webgl renderer for cytoscape.js

I have been exploring different layout extensions and have examined various examples from existing extensions like arbor, cola, cose-bilkent, as well as the scaffolding provided here. However, I am facing a roadblock when it comes to integrating a webGL renderer. While most examples handle this through the core for canvas rendering, I am wondering if it's possible to utilize a webGL renderer using three.js instead. Would it be as straightforward as creating and attaching the necessary webGL elements in the extension, such as scene, cameras, and light sources?

The reason I am leaning towards webGL is because I want to implement a 3D adjacency matrix (I recall seeing a paper where someone implemented this in a desktop application with subject, predicate, and object representing the X, Y, and Z axes) and I believe that webGL would be the most efficient option for handling large result sets containing 10-25K nodes/edges.

Answer №1

Although Cytoscape supports multiple renderers, it does not currently support 3D coordinates. Instead, positions are defined in a two-dimensional format (x, y).

If you wish to implement a 3D renderer, you can do so by utilizing a data property for the z position since the default position object does not accommodate z-axis values.

Developing a new renderer can be quite labor-intensive, especially when aiming for optimal performance and full functionality. Writing a 2D renderer allows for leveraging existing hittests, gestures/interactions, events, etc., enabling focus on drawing techniques. However, creating a 3D renderer necessitates building all rendering logic from scratch.

If your data specifically requires 3D representation - such as depicting 3D atomic bonds or protein structures - then developing a 3D renderer could prove beneficial. On the other hand, if the sole purpose is to achieve a visually appealing 3D effect, it may not be worthwhile due to the increased complexity of navigating and comprehending 3D visualizations for users.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement an event listener on the final element of a webpage utilizing querySelector

I need help with a password security check feature that changes field borders to green or red based on certain conditions. Despite successfully implementing it, the JavaScript code only selects the first field (nickname) instead of the last one. I've ...

What could be causing the 3D model to not function properly when paired with AmbientLight?

I'm facing an issue with adding a 3D model in Three.js. When I turn on AmbientLight, the model doesn't light up properly while other 3D models work fine. It seems that there is a problem within the 3D model itself, but I can't figure out whi ...

What could be the reason why I am unable to choose my radio button? What error am I

The output can be found here... I am struggling to use a radio button and cannot seem to select it. Can someone please explain what issue I am facing? Any help would be greatly appreciated. const [value, setValue] = React.useState({ yes:"", no:"" ...

Updating an Object in vue.js Upon Click Event to Add a New Value

I currently have a code snippet that looks like the following: arr = [ { val1: a, val2: b }, { val1: a, val2: b }, { val1: a, val2: b } ] <div v-for="single in arr"> <button v-on:click="addSome"></button> </div> When I c ...

What is the method for retrieving the title element from the Json data?

I am attempting to extract JSON data from http://omadbapi.com/?s= for a search script, but I am encountering difficulties in retrieving the Title element from this particular JSON: { "Search": [{ "Title": "Sherlock Holmes: A Game of Shadows", ...

Fetching data using an Ajax request in PHP is encountering issues, whereas the same request is successfully

I am experiencing an issue with a simple Ajax call in ASP.NET that works fine, but encounters a strange DOM Exception when I insert a breakpoint inside the onreadystatechange function. Can anyone explain why ASP.NET seems to have some additional header log ...

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

Leverage React.js by incorporating a Header-Imported JavaScript Library

I recently developed a React.js web application and am exploring the use of Amplitude Analytics, which provides a Javascript SDK found here. According to the guidelines, I need to include a <script></script> within the <head></head> ...

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...

The method defined in the external script for React is not recognized

For my React project, I am trying to import BlotterJS. In order to do so, I have added the following script in my index.html file: <script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script> Wit ...

Error: Access Denied - discord.js bot command cannot be executed due to lack of authorization

Every time I initiate the bot and try to execute my "ping" command, an error occurs: js:350 throw new DiscordAPIError(data, res.status, request); ^ DiscordAPIError: Missing Access at RequestHandler.execute (C: ...

Run a JavaScript function once the one before it has finished executing

I need help with executing a series of JavaScript functions in a specific order, where each function must wait for the previous one to complete. I've tried multiple approaches but haven't been successful so far. Any suggestions would be greatly a ...

How can I reset the DefaultValue of my Autocomplete input field after submitting?

Is there a way to reset the default value of my <TextField> inside Autocomplete after form submission? Even after submitting the form, the state of formValues remains as the default value. What can I do to fix this issue? I've attempted to mod ...

Ways to implement distinct values for model and input field in Angular 5

I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...

Sending Data from Clicked Button to Another Component as a Prop

I am struggling to figure out how to pass a value that is set inside a button to a child component. Essentially, I want the value of the clicked button that displays a percentage to be passed as a prop value. This prop value should update depending on whic ...

Vue.js is able to update various models based on selection from a form dropdown

I have a dynamic select list in my app built with vue.js. I am trying to update a "details" box on the page with information fetched through an ajax request. You can view the code here: https://jsfiddle.net/pznej8dz/1/ I am puzzled as to why the sf_detail ...

What is the best way to update a div element following a successful AJAX request?

Sharing my experience as I struggled to find a raw JavaScript solution among all the jQuery answers. I have a function that posts comments to a section, and I want the section to refresh after posting. However, my code seems to be failing to work as expec ...

Conceal a div when the user is browsing within a Facebook page tab

I am trying to create a webpage that can be accessed directly or through a Facebook page tab. My goal is to only display a Facebook logo if the user is accessing the page outside of Facebook. If they are already viewing the page within Facebook, I don&ap ...

Combine walls into a singular mesh with uniform corners adjustment

Currently, I am developing a basic building planning editor. To create a 3D preview, I am utilizing the Three.js library for Dart, sourced from GitHub. The algorithm implemented is rather straightforward: it transforms individual lines into rectangles and ...

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...