Search code examples
three.jsglslwebglfragment-shadervertex-shader

Some basic questions About the Shaders (Vertex-and Fragment Shader) from Three.js

I have asked myself some general understanding question about the fragment and the vertex shader.

We've leard in the lecture, that it is not possible/or at least very hard to compute and use transparency in the custom shaders from Tree.js.

Here's the question: Can anyone explain to me why that is the case and how you can make something with the shaders transparent (like the "normal" transparency parameter at Material, where you can just say: transpareny:true).

Solution

  • It depends on what you and the lecturer means by "transparency." What follows is very simplified for clarity.

    The first part of transparent objects is depth sorting. When you create a three.js material, material.transparent = true; enables depth sorting, which places scene objects into rendering order based on depth from the camera, rather than the order in which they were added. This ensures the transparent objects blend their colors correctly. This is probably what the lecturer was intending to say was difficult to do in the shader, because the shader concentrates on drawing the current fragment, and doesn't have much information about the surrounding scene.

    The second part of transparency--which is what you're probably more familiar with--is setting an opacity value for the material. If you look in any fragment shader, the last thing it does is set the color of the fragment, which is a vec4.

    gl_FragColor = something;

    The fourth value of the vec4 is the alpha (opacity) value. You could manually set a fragment to half-tranparent red like this:

    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);

    But again, if your object isn't correctly depth-sorted, the transparency might not work how you expect.

    Regarding your question about how to pass values to the shader, I agree with the comments above: your second question should be broken into a separate post.

    That said, uniforms, attributes, and varyings are general and fundamental type qualifiers in shaders. Each has very specific uses, and it sounds like you don't quite understand the difference (that's fine, you're still learning). I recommend doing some more reading on how to use each of them appropriately (and, naturally, StackOverflow is a good place for answers like this one).