Skip to content
This repository has been archived by the owner on Nov 22, 2022. It is now read-only.

Material opacity #60

Open
ManishJu opened this issue Jan 16, 2020 · 5 comments
Open

Material opacity #60

ManishJu opened this issue Jan 16, 2020 · 5 comments

Comments

@ManishJu
Copy link

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:
#59

Thanks!

@jaxry
Copy link
Contributor

jaxry commented Jan 16, 2020

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

@ManishJu
Copy link
Author

ManishJu commented Jan 17, 2020

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

@jaxry
Copy link
Contributor

jaxry commented Jan 20, 2020

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.

@ManishJu
Copy link
Author

ManishJu commented Jan 21, 2020

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.

@jaxry
Copy link
Contributor

jaxry commented Jan 21, 2020

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 jaxry changed the title Texture opacity value overwritten on raytracing Material opacity Apr 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants