Hi, all !
I am working now on spectral rendering with POV-Ray, and wonder, is it possible to make something
similar as at this image with three.js, maybe by shaders manipulations ?
The basic idea is to render a set of grayscale images - each representing a specific wavelength - and
finally combine them using the CIE color match function.
Will be glad to get any suggestion or ideas from three.js experts.
Thanks in advance.
r3f has some nice refraction demos:
https://codesandbox.io/p/sandbox/diamond-ring-3ywzzx
https://codesandbox.io/p/sandbox/nextjs-prism-j3ycvl?
https://codesandbox.io/p/sandbox/diamond-ring-4gy946?
You can get some nice refraction effects with three transmission shader:
(allows setting ior etc)
https://threejs.org/examples/webgl_materials_physical_transmission.html
The new dispersion option on MeshPhysicalMaterial (combined with transmission) will be helpful, too:
Ultimately though, three.js is not a spectral renderer, and lighting calculations are made in terms of RGB stimulus with Rec. 709 primaries, not continuous distributions of wavelengths from the electromagnetic spectrum.
Thanks a lot for the links - looks very cool !
Will play with examples now âŠ
Thanks for this sample - looks like it is what I was looking for.
Although itâs not real spectral rendering, the illusion is good enough for real time preview. After scene
parameters will be set, I will render it on the server with POV-Ray.
Looking at these examples, I see that they use âMeshRefractionMaterialâ, which is part of â@react-three/fiberâ. I prefer pure vanilla code and donât want to use fiber, but can not find the same material in three.js doc. Is it possible to import it from fiber somehow ?
Or maybe âMeshPhysicalMaterialâ with transmission can produce the same or even better effects with appropriate settings ?
Any help from experts will save me a lot of time spent for exploring.
Thanks in advance.
I donât think thatâs possible currently. Some Poimandres three.js features get built for vanilla three.js, they tend to be hereâŠ
âŠbut MeshRefractionMaterial does not currently appear to be supported outside of R3F.
Originally, I believe MeshRefractionMaterial was created in order to add some artistic effects that MeshPhysicalMaterial did not support. Dispersion has, since then, been added to MeshPhysicalMaterial. MeshPhysicalMaterial is intended to be compatible with PBR standards like the glTF PBR specification and Blenderâs Principled BSDF.
I think MeshRefractionMaterial is designed more for maximum artistic control of refraction effects, which is certainly useful, but may be less portable with other PBR implementations. Probably MeshRefractionMaterial would do a better job of showing the internal facets of the gemstone, that is currently difficult in MeshPhysicalMaterial.
Thank you very much for the detailed consultation. It looks like MeshPhysicalMaterial much more suits my needs, as the main goal of the project is to provide juvelirs true view of gemstone based on design.
As for Fiber, I was sure that it is only a React wrapper around three.js and now wonder why materials are not interchangeable. Although I am working with React, I am in doubt whether it is better to use Fiber or stay connected with the original three.js.
Could anyone post pros and cons of switching to Fiber, please ?
R3F itself is a âjustâ wrapper around three.js, yes. But the community around it has also built many higher-level components â like those you see in GitHub - pmndrs/drei: đ„ useful helpers for react-three-fiber. In some cases there are simple framework-agnostic equivalents outside R3F. In other cases, there are not.
The component-based architecture of React and R3F is more opinionated than the three.js library about how you structure code, but that opinionatedness also makes it possible to compose components together in new ways. I think MeshRefractionMaterialâs implementation currently depends on some of those choices.
My feeling is that if you are happy working with React, then using R3F is generally a win-win. If youâre not sure whether React itself fits your project, that is a much more open-ended question.
Thanks again, the picture is clear now. I will finish my vanilla preview and if the project will be demanded by the community, switch to R3F for more advanced GUI and other extensions, including materials.
Vanilla drei for users who donât want ReactâŠ
Thanks, I will try it.
