It’s not trivial so I will not give you a full example or explanation, only some pointers.
By the look of it the diamonds in the second link you shared are geometries with an identical UV map for each individual diamond, and a ShaderMaterial using two textures like this as uniforms :
One of the texture could be exactly this one, the other should be a panoramic baking of faces normal from the inside of a diamond.
Firstly the vertex shader would hand uv and normal information to the fragment shader.
Then the fragment shader would start by sampling the panoramic normal texture based on uv and normal (with a bit of offsetting to fake a first refraction effet), to get new normal and compute the coords of the diffuse texture sampling (again with offset to fake a second refraction effect like the light bounced twice). The chromatic aberrations look like a third texture sampling like the diffuse texture sampling but with a different offset, with some smart colour blending.
Again it’s absolutely not trivial so I’m only giving pointers.
Thank you for reply, recently I learning webgl and shader because I find some examples about what I want at shaderToy. But I can’nt port it to three.js. shaderToy examples
It’s not trivial so I will not give you a full example or explanation, only some pointers.
why is everything in threejs always so secretive and mysterious @felixmariotto i will never be able to deal with the math, just want to have a nice diamond on my web page. i will figure the damn thing out and open source it.
@vcxiaohan - not exactly diamond shaped, but this WebGL guide also has a few nice gifs and explanations on math and handling of diamond-like surfaces (with internal reflections without transparency.)
This topic and answers to it may also be quite helpful.
Writing and open-sourcing a “fake” diamond shader (1, 2, 3) isn’t that hard, but will likely lead to an example like Water / Water2 - where the amount of limitations and “assumptions” makes them not really universal / maintainable. And in case where code isn’t reusable outside one project - we’re happy to give answers and help, but expect the other side to do the keyboard tapping
but the bits and pieces that are available online weren’t enough to figure it out for me. i have nothing against tapping a keyboard, but i can’t understand math. what i have so far somewhat refracts, i guess, but looks nothing like what i see in the demos and videos that are closed source.
The example in the repo I shared works differently than OP’s links, that’s why I didn’t mention it. Don’t use this code guys, it was just an experiment As @mjurczyk explained there are lots of assumptions that make the technic unsuable in real life use cases.
if anyone needs it, i published the raw shader: UNPKG - @react-three/drei (npm: import { MeshRefractionMaterial } from '@react-three/drei/materials/MeshRefractionMaterial'). it will not pull anything from react, it’s just the namespace.