I have also ported some examples from Shadertoy in the collection. Maybe they help you with the porting.
See Little Shader Book (a bit more complicated … )
2 Likes
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. 
2 Likes
@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.
@drcmda it’s not about secrecy - all the math is already there. The main (and kinda only) challenge lies in transparency right now - since diamonds require 2 overlaying transparent surfaces to simulate total internal reflections (and overlaying transparency is easy neither in WebGLRenderer, nor in postprocessing.)
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 
2 Likes
i did try to abstract it once: Floating diamonds (forked) - CodeSandbox
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.
1 Like
says the guy who has a diamond shader repo at github 
3 Likes
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.
1 Like
i will totally use this
getting close: prod-rgb-zqrreo - CodeSandbox this is from a post on twitter i’ve stumbled over https://twitter.com/garrettkjohnson/status/1569756547508469762 and trying to untangle diamonds/main.js at 2dfb1ba5c938f213b8ecd0e2d7289cba1f299a72 · N8python/diamonds · GitHub into something more readily re-usable.
it’s missing the rgb color shift, does anyone have an idea how to implement that?
3 Likes
do three rays for r, g and b with slightly different ior
physically incorrect, but more performant: count the length the ray traveled, shift proportionally.
2 Likes
updated the sandbox with the solution from n8programms: https://twitter.com/N8Programs/status/1569865007042646018
could you guys check if that’s good or is your version faster? here’s the sandboxbox again
it looks pretty damn good
7 Likes
Yeah, the effect looks very good. I must spend a lot of time learning these. Thank you very much!
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.
to use it you need to give it a couple of defines without which it can’t work, and a bvh index, you can see how to add both here: drei/MeshRefractionMaterial.tsx at 66750d85d3c3ed5d1289d779acf9377eee159bb1 · pmndrs/drei · GitHub
3 Likes
Any luck making it look more white?
Not sure if this is relivant to the later provided resources but on android the diamond seems to be not rendered at all in the earlier sandbox…
Do we have the source code for the diamond project?