Using SceneJS to recycle JSON object nodes

I've utilized the scenejs framework to develop a webgl animation that includes numerous identical elements. To optimize code efficiency and reuse elements whenever necessary, I'm looking to minimize redundant code usage.

Initially, I've defined diskJSON in the following manner:

var diskJSON = [{
type: "disk",
radius: 3,
inner_radius: 2}];

The code below executes successfully with sceneJS implementation:

{
    type: "material",

    emit: 0,
    baseColor: {
        r: 0.3,
        g: 0.3,
        b: 0.9
    },
    specularColor: {
        r: 0.9,
        g: 0.9,
        b: 0.9
    },
    specular: 0.9,
    shine: 100.0,

    nodes: [{
            type: "translate",
            x:10,
            y:1,
            nodes: [{
                    type: "translate",
                    z:speedMultiplier*0.8,
                    nodes:[{
                            type: "disk",
                            radius: 3,
                            inner_radius: 2
                        }]
                },
                {
                    type: "translate",
                    z:speedMultiplier*9.8,
                    nodes:[{
                           type: "disk",
                            radius: 3,
                            inner_radius: 2
                        }]
                },
                {
                    type: "translate",
                    z:speedMultiplier*11.64,
                    nodes:[{
                           type: "disk",
                            radius: 3,
                            inner_radius: 2
                        }]
                },   
                {
                    type: "translate",
                     z:speedMultiplier*13.32,
                    nodes:[{
                           type: "disk",
                            radius: 3,
                            inner_radius: 2
                        }]
                }

            ]
        }
    ]




}

However, attempting to recycle the same diskJSON definition only results in a single node instead of four:

{
    type: "material",

    emit: 0,
    baseColor: {
        r: 0.3,
        g: 0.3,
        b: 0.9
    },
    specularColor: {
        r: 0.9,
        g: 0.9,
        b: 0.9
    },
    specular: 0.9,
    shine: 100.0,

    nodes: [{
            type: "translate",
            x:10,
            y:1,
            nodes: [
                {
                  type: "translate", 
                   z:speedMultiplier*0.8,
                   nodes:diskJSON
                 },
                {
                   type: "translate", 
                   z:speedMultiplier*9.8,
                   nodes:diskJSON
                },
                {
                   type: "translate", 
                   z:speedMultiplier*11.64,
                   nodes:diskJSON
                },   
                {
                   type: "translate", 
                   z:speedMultiplier*13.32,
                   nodes:diskJSON
                }

            ]
        }
    ]




}

Given that the application will involve thousands of these nodes, continuously redefining them seems inefficient. Is this a limitation with scenejs or is it intended behavior within Javascript/JSON functionality?

javascriptjsonwebglscenejs

Answer №1

Hello there Niklas! I stumbled upon a little bug in the way SceneJS is handling JSON parsing. It seems that SceneJS is marking node objects as visited in a map during DFS traversal, causing it to only parse your "disk" node once and then ignore it thereafter.

I've raised the issue here for further investigation: https://github.com/xeolabs/scenejs/issues/123

Rest assured, I am prioritizing fixing this issue promptly.

In the meantime, you may consider using a factory function like this:

function createDiskJSON() { return [{ type: "disk", radius: 3, inner_radius: 2}]; };

//...

nodes: [
    {
        type: "translate", 
        z:speedMultiplier*0.8,
        nodes: createDiskJSON()

    // ...

Alternatively, you can explore using the "instance" node for a workaround:

Cheers, LK

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

Adding an active class to a selected list item can easily be accomplished by targeting the

Hey there, I'm attempting to apply a class to the selected list item and also add a class when scrolling to a specific div. For instance, if I scroll to div#six, the number six (6) in the menu should also have the 'active' class. [Check out ...

javascriptjquerytwitter-bootstrap-3ecmascript-6ecmascript-5

Determine with jQuery whether a URL already contains a query string

When the site is loaded for the first time and a user selects a hospital location from the dropdown menu, the URL should have hos=somelocation as a query string parameter. If the URL already contains other query string parameters like then I need to chec ...

javascriptjquerystringurl

Transforming JSON data into a PowerShell object and vice versa

After exporting the JSON data from an Azure Resource Group to a file using this command: Export-AzureRmResourceGroup -ResourceGroupName $SourceResourceGroupName -Path $filename I retrieve the JSON content from the file and assign it to a variable like so ...

jsonpowershellazure

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

javascriptarraysangulartypescriptarraylist

Transform an array of integers into a mapping of values and corresponding IDs for selected values

I've been able to successfully load values from my API into react-select for single select, but I'm encountering some issues with multi-select. const fetch_companies = () => { API.get("/companies") ... data = data.map(({ id: ...

javascriptreactjs

React | Rendering multiple elements

Is there a way to include multiple <div id = "x" /> <div id = "y" /> elements in my index.html file using REACT? My site is already built with all the templates in index.html, so I only need to use REACT for specific sections. https://i.sstati ...

javascripthtmlreactjs

Choosing a value at random from various returned results in a JSON format

I have written this code that works perfectly for a single return value. However, what if I need to handle multiple results and randomly select one? Here is my current code: class CheckSummonerLevel { public class GetVariable { public stri ...

c#jsonapiparsing

Having an issue with discord.js and node.js modules not exporting correctly? The returned statement is not functioning as

Trying to retrieve specific messages from a channel to gather information about registered 'clans' has been quite challenging for me. I am able to fetch the channel, filter and loop through the messages, but strangely, I cannot return the fetched ...

javascriptnode.jsdiscorddiscord.jsnode-modules

Rotating the camera around the origin in Three.js

Hey, I'm having some trouble with what I thought would be a simple task. I have a group of objects at the origin, and I'm trying to rotate a camera around them while always facing the origin. According to the documentation, this code should work: ...

javascriptcamerathree.js

Tips for integrating Google WebKit with AngularJS

Looking to enhance my application with Google WebKit functionality. My goal is to create a feature similar to Gmail's where hovering over the "+" symbol expands to display options such as "insert photos" and "insert links". I'm just starting out ...

javascriptangularjswebkit

Can you provide guidance on how to format index signatures for objects in TypeScript

Currently, I am utilizing TypeScript in conjunction with Angular 1.5 and the Angular 1.5 type definition file. However, I am facing a challenge in defining the bindings within an Angular component. Within the definition file, the bindings are defined as f ...

javascripttypescript

Cover the <img ...> tag in HTML using JavaScript

I'm currently working on creating a simple game involving sliding ice-blocks. I ran into an issue while testing this JSFiddle and I'm looking to "hide" the image/button triggered by the line alert('Game starts!');. I attempted using sta ...

javascriptcsshtmlvisibility

Removing a row from a table seamlessly without the need to reload the page

I am having an issue with my page that displays a list of orders. When a user clicks on a button to delete a row from the table, it only removes the first row successfully. However, when attempting to delete the second or third row, it does not work. Can s ...

javascriptjqueryajaxasp.net-mvc

Tips for styling buttons in react-admin with custom CSS

I need some help with customizing buttons in react-admin. I am new to the platform and unsure about how to go about changing the button CSS for various actions such as create, edit, and export. Can anyone provide guidance on the best way to customize these ...

javascriptcssreactjs

How can I pull the account creation date stored in MongoDB and display it using Handlebars?

Currently in my development, I am utilizing MongoDB, NodeJS, and Handlebars. My challenge is to convert the user.id into a timestamp and then display this timestamp on my HTML page. At present, I can display the user.id by using {{ user.id }} in my code, ...

javascriptnode.jsmongodbhandlebars.js

Obtaining specific Google Image Search results depending on certain criteria

I am working on a project to create a web application that can suggest outfits based on the weather of a specific location. Here is where I am at with the project so far: https://codepen.io/anchpags/pen/bMpjxX <html> <head> <link rel=" ...

javascripthtmlcssapigoogle-custom-search

Obtain image URL from object properties using AngularJS

Just starting out with Angular JS and I have a question. I'm currently working on a project and I have a solution in mind, but I was wondering if there's a more "angular-esque" approach that I could take. The idea is for each videoid, there wou ...

javascriptjqueryangularjs

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events

Issue with res.json not displaying specific member of array (Sample code for user login)

Having some trouble with my simple login program. I'm trying to compare the input email with one stored in an array defined in the code. However, when I use res.json(User[0].email) to check the value of the email in the array, it returns nothing. This ...

javascriptnode.jsexpressauthenticationserver

Implementing Jquery tabs into the code causes the vertical auto-scroll to smoothly glide beyond anchor points

I recently implemented a smooth autoscroll feature on my webpage using the CSS-Tricks code found here: http://css-tricks.com/snippets/jquery/smooth-scrolling/ Everything was working perfectly until I added jQuery tabs to display some of the content. Now, ...

javascriptjqueryanchorjquery-tabs