0

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).

Ice_Queen1996
  • 37
  • 7
  • You should avoid asking multiple questions at once since it reduces your chance of getting an answer. One would have to know the solution to all question to write an answer. – BDL Jul 09 '17 at 22:07
  • Maybe also tell us the reason the lecturer said it was very hard to use transparency in shaders. It's not so hard AFAIK – 2pha Jul 09 '17 at 23:32
  • i agree, passing single float transparency value to the fragment shader via uniform is not that hard – DanP Jul 10 '17 at 07:11
  • Question needs to be broken up and all of them improved. I think the transparency refers to sorting algorithms, like painters sort. – pailhead Jul 10 '17 at 22:58
  • Hey guys, thanks for your answers! I made what you recommended and split up the question! The hint with the sorting algorithm was right! We had discussed the ZBufferAlgorithm for example in the lecture. But I had no idea that "normal" three.js materials do that on their own... – Ice_Queen1996 Jul 18 '17 at 07:24

1 Answers1

0

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).

TheJim01
  • 6,362
  • 1
  • 17
  • 44
  • Kudos on actually understanding the question :) – pailhead Jul 10 '17 at 23:00
  • hey, sorry for the late answer. I broke the question up as recommended. So that i get it correnctly: if is use ja three.js material and create a mesh with transparency and some opacity values, the scene will bei correctly rendered because a fullautmatic deepth-sorting is running? That can't be done by the shaders on their ow, rather you have to do that? – Ice_Queen1996 Jul 18 '17 at 05:59
  • Correct. Transparent objects are sorted by their position in 3D space. This is easiest to do outside the shader. Scene = shapes & objects, Shaders = fragments. Someday, WebGL 2.0 will have [compute shaders](https://www.khronos.org/opengl/wiki/Compute_Shader), which will be able to perform the sorting faster than a JavaScript thread. But for now, your understanding is correct. – TheJim01 Jul 18 '17 at 13:48