ray-tracing-renderer icon indicating copy to clipboard operation
ray-tracing-renderer copied to clipboard

Material opacity

Open ManishJu opened this issue 4 years ago • 5 comments

When we ray trace an object which is set to transparent but whose opacity level is set to 1, the raytracer overwrites the opacity value with its own value. In the below image the opacity of the table is set to 1. This opacity value changes as the material is ray traced.

Realtime WebGL2 render:

yz

Raytraced version:

yz2

You can see that the floor below the table is visible. The other issue you might be seeing is the texture repetition issue raised here: https://github.com/hoverinc/ray-tracing-renderer/issues/59

Thanks!

ManishJu avatar Jan 16 '20 11:01 ManishJu

The renderer currently treats any material with transparent set to true as glass. opacity is ignored, which is why you're getting the same results with both 0 and 1 for opacity. The only way to have a non-transparent material is to set transparent to false.

I know this behavior diverges from Three.js, because in Three.js, transparent to true and opacity to 1 makes a fully opaque surface. But the renderer doesn't support half-transparent surfaces, so an opacity of 0.5 wouldn't mean anything, which is why we only pay attention to the transparent property.

With the limitation that the renderer only supports fully opaque and glass materials, how would you expect transparent and opacity to work? Would it possibly be more clear if we didn't use either property, but instead introduced a new one (e.g. glass or transmissive) ?

jaxry avatar Jan 16 '20 20:01 jaxry

I have not checked how the ray tracing shader works but the rasterized output is quite simple with the last value of the vec4 controlling the transparency. Also I am curious that if the material goes fully transparent why does it have that black pattern ? I crossed checked again and removed all other maps except color and set the following material property :

const materialTableTop = new THREE.MeshStandardMaterial({
     
      map: Table_map, 
      roughness : 1,
      metalness : 0.0,
      emissive: 0xffffff,
      emissiveIntensity: 0.0,
      side: THREE.FrontSide,
      opacity :  1,
      transparent : true,

    });

Still I get the same output ? Is there a way to leverage this to include opacity in your ray-tracer ? Your input would be appreciated . Thanks :)

ManishJu avatar Jan 17 '20 14:01 ManishJu

Is there a way to leverage this to include opacity in your ray-tracer ?

Unfortunately no. Opacity, like how it works in Three.js, isn't supported in the renderer at the moment.

The opacity and transparent are treated differently in RayTracingRenderer.

  • opacity: No effect whatsoever. Currently ignored by the renderer.
  • transparent: If set to true, the material becomes glass, and will both refract and reflect light, regardless of opacity.

So your table material looks dark because it's behaving like glass. That's because you're setting the transparent property to true in your scene. e.g.

const materialTableTop = new THREE.MeshStandardMaterial({
      opacity :  1, // this property is ignored
      transparent : true,  // this is what's making your table look like glass
    });

If you want your table to look like it does in the WebGLRenderer, set transparent to false.

jaxry avatar Jan 20 '20 08:01 jaxry

Thanks for your input! How difficult would it be to introduce say a transmissive material in your ray tracer with a control over transparency? Any papers you can point out to ? I would try to contribute to this project.

ManishJu avatar Jan 21 '20 13:01 ManishJu

How difficult would it be to introduce say a transmissive material in your ray tracer with a control over transparency?

Adding a new material type would be easy, but how difficult it is to model that material depends on the material definition. Would the material scatter the transmitted light diffusely, or would it just pass through without a change in direction?

Any papers you can point out to?

pbrt implements a few transmissive materials. It's not discussed in the book itself, but it is implemented in the code. I can't remember which material it is, so you'd have to look around. It will be one of these: https://github.com/mmp/pbrt-v3/tree/master/src/materials Which internally will include a transmissive BSDF: https://github.com/mmp/pbrt-v3/blob/master/src/core/reflection.cpp

I would try to contribute to this project.

Absolutely! The PR I'm working on right now cleans up the material code a bit, so it might be more obvious how to proceed once I get that in over the next 2 weeks. But in the meantime, I can try answering your questions when they come up.

jaxry avatar Jan 21 '20 21:01 jaxry