The Three.js scene is failing to render properly on subsequent attempts

Question

The Three.js scene is failing to render properly on subsequent attempts

Currently, I am in the process of developing a web-based height map generator using Three.js. The project involves utilizing multiple canvases to display the generated height map, individual octaves that make up the map, and a separate canvas to showcase how the height map affects a plane mesh.

While everything appears to be functioning well initially with all the predefined parameters, the issue arises when the canvases fail to update after the first render pass. This renders my program ineffective as the main goal is to manipulate various parameters of the height map using sliders and observe real-time changes.

Unfortunately, only the canvas displaying the 'real' 3D scene with the plane mesh seems to update. However, it appears that data from the initial render pass remains, giving the impression that the noise parameter uniforms are updating correctly - unlike the other canvases.

Prior to rendering each scene, I ensure that the `needsUpdate` field of the material meshes is set to `true`, yet this method only works for the last initialized canvas. I am at a loss here, as I have been unable to find any relevant information related to this problem.

javascript canvas 3d three.js heightmap

Answer 1

Answer №1

After hours of troubleshooting, I managed to locate the solution on my own. Surprisingly, the issue did not lie with three.js itself but rather with my handling of multiple planes within the scene instead of just one. This mistake stemmed from inadvertently calling the initScene() method multiple times without properly checking if all shaders were still loading (I utilized an async AJAX request for shader loading). My oversight was only checking for when shaders were either not loaded or completely ready.

Here is the corrected code:

/**
 * Adds geometry to the scene and attaches previously loaded material.
 * 
 * @param {Number} wavelength of the first octave of the height map
 * @param {Number} frequency of the first octave of the height map
 * @param {Number} number of octaves (must be an integer)
 */
HeightMap.prototype.initScene = function(wavelength, frequency, lacunarity, persistency, octaves) {
    this.material = HeightMap.settings.templateMaterial.clone();

    this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves);
    HeightMapOctave.prototype.addPlane.call(this);

    this.initialized = true;
};

/**
 * Updates values for HeightMap.
 * 
 * @param {Number} wavelength of the first octave of the height map
 * @param {Number} frequency of the first octave of the height map
 * @param {Number} number of octaves (must be an integer)
 */
HeightMap.prototype.updateScene = function(wavelength, frequency, lacunarity, persistency, octaves) {
    if (this.initialized) {
        this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves);
        Canvas3D.prototype.render.call(this);
    } else if (!this.initializing) {
        this.initializing = true;
        this.loadShaders(function() {
            this.initScene(wavelength, frequency, lacunarity, persistency, octaves);
            Canvas3D.prototype.render.call(this);
        });
    }
};

Although this may seem like a niche problem, I hope this post can assist others facing a similar issue. It took me nearly a week to identify and resolve this elusive bug...

Answer 2

After hours of troubleshooting, I managed to locate the solution on my own. Surprisingly, the issue did not lie with three.js itself but rather with my handling of multiple planes within the scene instead of just one. This mistake stemmed from inadvertently calling the initScene() method multiple times without properly checking if all shaders were still loading (I utilized an async AJAX request for shader loading). My oversight was only checking for when shaders were either not loaded or completely ready.

Here is the corrected code:

/**
 * Adds geometry to the scene and attaches previously loaded material.
 * 
 * @param {Number} wavelength of the first octave of the height map
 * @param {Number} frequency of the first octave of the height map
 * @param {Number} number of octaves (must be an integer)
 */
HeightMap.prototype.initScene = function(wavelength, frequency, lacunarity, persistency, octaves) {
    this.material = HeightMap.settings.templateMaterial.clone();

    this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves);
    HeightMapOctave.prototype.addPlane.call(this);

    this.initialized = true;
};

/**
 * Updates values for HeightMap.
 * 
 * @param {Number} wavelength of the first octave of the height map
 * @param {Number} frequency of the first octave of the height map
 * @param {Number} number of octaves (must be an integer)
 */
HeightMap.prototype.updateScene = function(wavelength, frequency, lacunarity, persistency, octaves) {
    if (this.initialized) {
        this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves);
        Canvas3D.prototype.render.call(this);
    } else if (!this.initializing) {
        this.initializing = true;
        this.loadShaders(function() {
            this.initScene(wavelength, frequency, lacunarity, persistency, octaves);
            Canvas3D.prototype.render.call(this);
        });
    }
};

Although this may seem like a niche problem, I hope this post can assist others facing a similar issue. It took me nearly a week to identify and resolve this elusive bug...

The Three.js scene is failing to render properly on subsequent attempts

Answer №1

Similar questions

Removing consecutive pipe symbols in JavaScript

Incorporate an additional retrieve functionality in your asp.net web api

Error: the function is not defined, therefore the variable is being passed

Guide on determining if the value in a JSON object is a string or an array in Node.js

Implementing dynamic checkbox values depending on a selection from a dropdown menu in Angular

Error in Angular: Trying to access property 'setLng' of a null component variable

What is the best way to switch out the characters 'a' and 'b' in a given string?

The keyboard fails to open when trying to input text on a WKWebView

The Google reCaptcha reply was "Uncaught (in promise) null"

Arrangement of watch attachment and $timeout binding

refresh polymer components or make an ajax request within a custom element

Exploring the proximity between the camera and a mesh using THREE.js

Guide to setting up a TreeView with default expansion

Unlocking location data in React Router-DOM 6: A step-by-step guide

Ways to retrieve text like innerText that functions across all web browsers

Encountering an error when attempting to generate a production build after running the npm install command with the

Importing modules dynamically in NextJS allows for the loading of

Associating mongoose object with a DTO object in an Express.js application

Preventing jQuery parser from turning arrays into objects

The JavaScript operator that functions in a manner akin to the SQL "like"