MeshToonMaterial: Only sample the red channel of gradientMap. #22911
Conversation
| // Materials | ||
|
|
||
| const cubeWidth = 400; | ||
| const numberOfSphersPerSide = 5; | ||
| const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5; | ||
| const stepSize = 1.0 / numberOfSphersPerSide; | ||
| const format = ( renderer.capabilities.isWebGL2 ) ? THREE.RedFormat : THREE.LuminanceFormat; |
There was a problem hiding this comment.
Hmm, is there a way to hide this? 🤔
There was a problem hiding this comment.
We use this approach at a different location, too:
three.js/examples/webaudio_visualizer.html
Line 116 in 38eb843
Hiding this detail in the renderer is problematic since THREE.RedFormat behaves differently than THREE.LuminanceFormat. If we would internally convert luminance to red, users could be confused because it would be only possible to sample the r channel.
IMO, we could leave the code as it is or just use THREE.RedFormat in both examples (which would make them WebGL 2 only though).
|
@mrdoob This PR is a blocker for using I'm happy to refactor the code in |
|
Sounds good 👍 |
Related issue: -
Description
When we want to use
texStorage2D()it's important to understand thatgl.LUMINANCEcan not be used as an internal format. The idea is to usegl.REDinstead which is converted to the sized formatsgl.R8,gl.R16Forgl.R32Fby the renderer depending on the data type.When using a texture with e.g.
gl.R8, only therchannel can be sampled. This PR refactors the toon material such that the shader only samples the red channel and not RGB. In this way, the gradient map does not break if we useTHREE.RedFormatwith WebGL 2.I'm not sure why it was implemented differently since gradient maps for toon materials are usually grayscale maps with a (n,1) dimension.