Utilizing Pixi.js and ThreeJS to elevate your web user interface experience

The concept

Hello! My team and I are in the process of developing a dynamic graphical interface for interactive graph editing that will be open-source.

This interface is intended to manage a large number of interconnected nodes, giving users the ability to manipulate them, reestablish connections, zoom in/out, and more. Each node should support text, buttons, sliders, and other controls. Additionally, we aim to create a sophisticated, customizable graphical interface where each panel functions as a plugin - akin to a web-based eclipse. For instance, a panel could serve as a graph editor, a timeline, or a 3D viewport.

The inquiry

I am seeking advice on which library would offer the most advantages for our project - Pixi.js, ThreeJS, or perhaps another option? Should we consider a combination - utilizing Pixi.js for the interface and ThreeJS for plugins requiring 3D support (although I have reservations about this due to potential inconsistency)?

Criteria

We desire full functionality in WebGL. This decision stems from our goal of ensuring smooth operation of the graph editor, as well as maintaining uniformity across all parts of the GUI. Therefore, employing a single technology is logical.

We are searching for a library that provides optimal performance and flexibility for such a substantial undertaking, particularly taking into account:

  • Creation of custom HUD elements (sliders, buttons, graphs, etc)
  • Capability to handle a significant volume of elements - with emphasis on efficient caching/redrawing of only necessary portions
  • Provision of a canvas fallback, while not being indispensable
javascriptcanvasthree.jswebglpixi.js

Answer №1

When it comes to creating a high performance node graph with zooming capabilities and fancy effects while handling thousands of nodes, would using canvas/webgl provide better performance?

I have to disagree.

HTML excels in node manipulation and rendering. However, it does struggle with the fancy effects you mentioned.

On the other hand, webgl is great for fancy effects but falls short in terms of node manipulation. If each node requires a draw call, you may quickly reach your limit. Reducing draw calls in webgl can be challenging.

In my experience, Cocos2d-js might be a better option than Pixi.js or ThreeJS. It provides a powerful canvas fallback and some basic fancy effects like nine-slice. However, even a simple effect like nine-slice can impact performance with multiple draw calls.

The key issue contributing to low performance is that most engines offer limited options for rendering. If you want each picture to be rendered as a separate sprite, the engine may struggle to optimize it.

If I were in your shoes, I would consider using webgl without an engine. But this approach requires a deep understanding of webgl and lacks a canvas fallback. It's a challenging task, but worth exploring. Both ThreeJS and playcanvas offer free browser-based editors, with HTML GUIs preferred by many game designers. These webgl engines show promise despite the complexities involved.

So, HTML remains a viable option, but venturing into webgl requires thorough preparation. Your project may push the limits of traditional engines.

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

"Attempting to send a jQuery post to a node.js server, but encountering an issue with missing request

Could really use some assistance here. I've hit a roadblock and can't seem to find the solution anywhere, not even in sample codes or google search results. Something just isn't right. The issue arises when I make a jQuery post request to m ...

javascriptjquerynode.js

Modifying colors and applying transparency to objects in Three.js (loading from .obj + .mtl files)

Currently, I am working with Three.js to load .obj + .mtl files in order to view a 3D model within a web browser. I am at the beginning stages and would greatly appreciate some assistance. Two things that are currently puzzling me: The model I am working ...

javascript3dthree.js.objwavefront

MongoDB failing to store model information

As I dive into practicing with APIs to hone my skills in creating models and routes, I find myself stuck on getting my initial route to successfully save data to my MongoDB database. When testing with Postman, I encounter the following error: { "message" ...

javascriptmongodbexpress

AssertionError: 'assertEquals' is not recognized in compiled WebDriverJS

I'm facing an issue with the webDriverJS library. After downloading the project and building the js file "webdriver.js" following instructions from the wiki and this post on Selenium WebDriverJS Using in Browser, I am unable to use the function "asse ...

javascriptwebdriverselenium-webdriver

Prevent the onClick event in the parent container div from triggering when clicking on a child element

Having trouble with event bubbling and onClick functions within a card element. The card has a heart icon that triggers an onClick function to unlike the card, but it also triggers the onClick function for the entire card which leads to a different page wi ...

javascriptreactjseventsstoppropagation

Is it possible for Ajax to actually make GET requests to the server, and if it does, why doesn't it appear in Firebug?

I have a LAMP setup on my Ubuntu and I am attempting to use Ajax to print the output in an unordered list. However, I am not seeing any results and there are no server calls showing up in Firebug. Here is the HTML file where the call is made: <!DOCTYP ...

javascriptphpjqueryajax

Creating an AJAX request using JQuery in a JSP page and sending it to a Spring controller

At the moment, I am in the process of creating two distinct Ajax JQueries to transmit data from a Google Maps JavaScript page (Latitude, Longitude, and Address of the location searched by the user) to my controller class. However, I am encountering differe ...

javascriptjqueryajaxspringjsp

A method for conditionally assigning values from an object to properties within an array

I am in need of assigning values from an array of objects to another object, using different keys. Within my JavaScript application, I receive an array of objects that looks similar to the example below: urlArrayOfObjects = [ {url: 'https://ama ...

javascriptnode.jsreactjsarrays

ag-grid Server Side pagination function to enable independent setting of last row

Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...

javascriptangularag-grid

Controlling the input of characters in a textbox with JavaScript

Can someone assist me with validating a textbox to only allow specific characters and prevent input after the limit is reached? I know it can be done using Javascript but I'm not sure how to do it. Any help would be greatly appreciated. ...

javascriptasp.net

What is the proper way to add a string to a TypeScript array?

When attempting to add a string to a TypeScript array, I am encountering an error stating 'cannot push to undefined'. Is this the correct approach, or should I be using the spread operator instead? api.ts const api: IConfigName = {name: "getKey ...

javascripttypescript

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...

javascripthtmlnode.jsexpress

Tips on incorporating a fresh item into a expansive tree view using a recurring function or action - specifically geared towards the MUI React JS Tree View component

I am looking to implement a function or action that allows for the dynamic addition of new items to a tree view in MUI. The goal is to be able to click on a tree item and have it add another item, repeating this process as needed. <TreeView ...

javascriptreactjsmaterial-ui

Tips for embedding JavaScript and CSS files in a partial view

I am having trouble loading JavaScript and CSS files in a partial view of my page. Can someone please assist me with this? Specifically, I need help loading these three files in the Partial View: <link href="~/AdminTheme/BootstrapJalaliDatePicker/ ...

javascriptjquerycssajaxpartial-views

Leveraging context and hooks in React JS

Once again, I find myself here. Just 3 hours ago I was struggling with understanding how to use Context and useState in React. Thankfully, I managed to solve that issue on my own. However, now I'm facing another challenge - this time it's about s ...

javascriptreactjsuse-statereact-context

Images loading slowly causing scrolling to be slow

I've developed an image manager that displays a fixed grid of images in thumbnails. The size of the thumbnails is already relatively small, so reducing them further is not an option. To improve performance, I implemented lazy loading and used a deboun ...

javascriptcssangular

"Encountering a problem with installing packages on Node.js through npm

After spending the last 2 hours scouring StackOverflow and Google, I've come to the decision to seek help here. The issue I'm facing is that I'm unable to install any packages using npm. Specifically, when trying to install jQuery (as well ...

javascriptnode.js

A comparison between Three.js and Ammo.js: Implementing player movement in FPS mode with a dynamic playerPhysicsBody to facilitate left and

My issue lies in attaching the player (camera) physics body. While forward and backward movement works fine, I encounter problems with left and right movement. I do not want kinematic controls typically found in objects. I want my graphics to accurately f ...

three.jsammo.js

What is the best way to transform this string into a Luxon Datetime object using Typescript?

Here is a snippet of Javascript/Typescript code that I have for converting a string into a Luxon DateTime: import { DateTime } from 'luxon'; const x = '2023-10-27T01:00:57.830+00:00' const y = DateTime.fromFormat(x, 'yyyy-MM-dd ...

javascripttypescriptdatetimeluxon

How can I send data in JSON format to a JavaScript AJAX request?

I've created a method that looks like this: public String getUTResult() throws IOException { BuildResultParser bp = new BuildResultParser(); BuildResultBean b = bp.getreadFile("C:\\bc.txt"); String str = b.getuTresult(); ...

javajavascriptajaxjson