Utilizing see-through elements in ThreeJS

Question

Utilizing see-through elements in ThreeJS

In my threejs project, I have a mesh lambert material that is defined as follows:

new three.MeshLambertMaterial({
    transparent: true,
    emissive: 0xffffff,
    map: texture,
    alphaTest: 0.1
});

We had to set the alphaTest to 0.1 in order to achieve transparency for the material. However, this resulted in an unsightly grey line around the opaque portions of the material, which is even more pronounced when the texture represents text.

Is there a better method to create a transparent material that will simply display the object behind it without any artifacts?

javascript three.js textures transparency

Answer 1

Answer №1

It seems like you have a texture that includes transparency, and you want the transparency of the texture to determine the transparency of the material. Is that correct? If so, this snippet of fragment shader code should help achieve that:

<script id="fs" type="x-shader/x-fragment">
    uniform sampler2D inputTexture;

    varying vec2 uvCoordinates;  
    varying vec4 vertexColor;
    void main() {
        vec2 uv = uvCoordinates;
        vec4 texel = texture2D(inputTexture, vec2(uv.x, uv.y));
        gl_FragColor = vec4(texel.r, texel.g, texel.b, texel.a);
    }

</script>

You can view a working example here: http://example.com/sample

Answer 2

It seems like you have a texture that includes transparency, and you want the transparency of the texture to determine the transparency of the material. Is that correct? If so, this snippet of fragment shader code should help achieve that:

<script id="fs" type="x-shader/x-fragment">
    uniform sampler2D inputTexture;

    varying vec2 uvCoordinates;  
    varying vec4 vertexColor;
    void main() {
        vec2 uv = uvCoordinates;
        vec4 texel = texture2D(inputTexture, vec2(uv.x, uv.y));
        gl_FragColor = vec4(texel.r, texel.g, texel.b, texel.a);
    }

</script>

You can view a working example here: http://example.com/sample

Utilizing see-through elements in ThreeJS

Answer №1

Similar questions

Having trouble with the npm package installation for react-circular-progressbar

Storing the ID passed from Next.js/Link into Next.js

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

JavaScript triggers page reload upon selection box click

What could be causing Rivets.js to malfunction on mobile devices?

Encountering an issue while attempting to utilize the request.js library in a Node environment

Does the sequence matter when studying JavaScript, Ajax, jQuery, and JSON?

Automatically Submitting React Forms Using Code

Error occurring with FXAA in three.js after updating from version r65 to r68

The issue arises when trying to access the value that is not defined in the combination of angularjs $

Using AJAX to retrieve HTML elements may cause compatibility issues with Jquery

Struggling to enable Google Cast functionality on Apache Cordova: Unhandled error - chrome is not recognized

There was an error encountered: TypeError - It is not possible to access the property 'handle' of an undefined object. Nevertheless, the following condition was set: if (fn.handle && fn

Is there a way to trigger javascript on Amazon once the "Next Page" button is clicked?

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

Problem: Reactjs renders only a single navbar instead of two navbars

Guide on adjusting PHP variable values and updating functions with ajax requests

Executing various count() queries on a MongoDB using mongoose

Retrieve the dynamically generated element ID produced by a for loop and refresh the corresponding div

What is the process for turning off caching in CORS-Anywhere?