Utilize Three.js to render objects at the forefront by adjusting renderDepth

Question

Utilize Three.js to render objects at the forefront by adjusting renderDepth

How can I render objects on top of other objects in a Three.js scene?

I am struggling to get the green torus knots to display above the red boxes and floor in my fiddle.

Despite trying various values like mesh.renderDepth = 0, 1, 1000, nothing seems to work.

The material I have created is:

material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true, opacity: 0.5 } );

Is there any way to achieve this using renderDepth? Am I overlooking any other settings?

Setting depthTest to true does sort of work, but it's not ideal for concave meshes like the torus as they end up with overlapping polygons, especially when opaque.

Although I have not been successful in getting this alternative solution involving two scenes to function properly, it appears to be more complex and less versatile than just using renderDepth.

To see the issue in action, check out the fully operational JSFiddle: http://jsfiddle.net/QHssJ/

I appreciate any guidance or assistance you can provide. Thank you!

javascript three.js

Answer 1

Answer №1

Although this post may be outdated, it's important to note that objects with a custom renderDepth should have their material configured with depthWrite set to false:

 material.depthWrite = false

For an updated version of the fiddle shared in the original post, visit: http://jsfiddle.net/QHssJ/20/

Answer 2

Although this post may be outdated, it's important to note that objects with a custom renderDepth should have their material configured with depthWrite set to false:

 material.depthWrite = false

For an updated version of the fiddle shared in the original post, visit: http://jsfiddle.net/QHssJ/20/

Answer 3

Answer №2

Behold a practical demonstration featuring the VisualLayers class designed for overseeing multiple layers effortlessly, employing the technique of setting renderer.autoClear = false along with clearing-depth method.

This strategy shines as it leaves the renderOrder of objects untouched (an alternative methodology) hence sidestepping any associated issues with renderOrder.

Feel free to experiment with the user interface options to observe its effects:

// @ts-check

////////////////////////
// LAYER SYSTEM
////////////////////////

/** @typedef {{name: string, backingScene: THREE.Scene, order: number}} Layer */

class VisualLayers {
    /**
     * @type {Array<Layer>}
     * @private
     */
    __layers = [];

    constructor(
        /** @private @type {THREE.WebGLRenderer} */ __renderer,
        /** @private @type {typeof THREE.Scene} */ __Scene = THREE.Scene
    ) {
        this.__renderer = __renderer;
        this.__Scene = __Scene;
    }

    defineLayer(/** @type {string} */ name, /** @type {number=} */ order = 0) {
        const layer = this.__getLayer(name);

        // The default layer always has order 0.
        const previousOrder = layer.order;
        layer.order = name === "default" ? 0 : order;

        // Sort only if order changed.
        if (previousOrder !== layer.order)
            this.__layers.sort((a, b) => a.order - b.order);

...

(window.onresize = function (event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
})();

...

html,
body,
#container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

canvas {
    background: transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed999a888c869d8c8388addcc3d8c3d8">[email protected]</a>/dist/tweakpane.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d918b9c9cb9c9d7c8cbc8d7c8">[email protected]</a>/build/three.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4b54484f4b4954585e484852555c7b0d150a0c150f">[email protected]</a>/build/postprocessing.js"></script>

(view example on codepen)

Answer 4

Behold a practical demonstration featuring the VisualLayers class designed for overseeing multiple layers effortlessly, employing the technique of setting renderer.autoClear = false along with clearing-depth method.

This strategy shines as it leaves the renderOrder of objects untouched (an alternative methodology) hence sidestepping any associated issues with renderOrder.

Feel free to experiment with the user interface options to observe its effects:

// @ts-check

////////////////////////
// LAYER SYSTEM
////////////////////////

/** @typedef {{name: string, backingScene: THREE.Scene, order: number}} Layer */

class VisualLayers {
    /**
     * @type {Array<Layer>}
     * @private
     */
    __layers = [];

    constructor(
        /** @private @type {THREE.WebGLRenderer} */ __renderer,
        /** @private @type {typeof THREE.Scene} */ __Scene = THREE.Scene
    ) {
        this.__renderer = __renderer;
        this.__Scene = __Scene;
    }

    defineLayer(/** @type {string} */ name, /** @type {number=} */ order = 0) {
        const layer = this.__getLayer(name);

        // The default layer always has order 0.
        const previousOrder = layer.order;
        layer.order = name === "default" ? 0 : order;

        // Sort only if order changed.
        if (previousOrder !== layer.order)
            this.__layers.sort((a, b) => a.order - b.order);

...

(window.onresize = function (event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
})();

...

html,
body,
#container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

canvas {
    background: transparent;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed999a888c869d8c8388addcc3d8c3d8">[email protected]</a>/dist/tweakpane.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d918b9c9cb9c9d7c8cbc8d7c8">[email protected]</a>/build/three.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4b54484f4b4954585e484852555c7b0d150a0c150f">[email protected]</a>/build/postprocessing.js"></script>

(view example on codepen)

Utilize Three.js to render objects at the forefront by adjusting renderDepth

Answer №1

Answer №2

Similar questions

Is there a way to retrieve real-time information from an API by utilizing the HTTP.Get method?

Arranging rows according to an array value containing column (PHP/MySQL/jQuery)

Having trouble properly sending gender value through javascript/ajax functionality

What is the best way to specify the stream responseType for my client?

`Cannot press when using custom cursor in JS?`

Replace Jade script with block override

The problem with legends in chart.js not displaying properly

Ways to retrieve session variables within a PHP code?

Is it possible to use the POST method with NODE JS and JavaScript?

Customize the CSS for the column containers in Material-UI's DataGrid with the

Can the variable name within a function be retrieved?

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Utilizing Subdirectories in a Command Manager

Using Firebase to connect and disconnect from state in React with Re-base

"NaN is being caused by the presence of quotation marks within the split property

Display/conceal within a jQuery fixed navigation bar (center-aligned)

Trouble displaying JSON data when using a search box filter in React

What is the functioning of the node.js next() middleware without any parameters supplied?

Is it possible to determine if a style property has been altered

Looking for the properties of the ServerResponse object in node.js - where can I locate them?