I need to convert a Diamond shader based in WebGL into Three.JS

Question

I am working on making an online shop that sells diamond jewelry, and our main goal is to make those diamonds look very attractive to the eye. Unfortunately I don't know how to achieve reflections and refractions in WebGL.

My first try was to make a round diamond, and then render a skybox by palcing a camera inside a diamond stone in 3dsmax and vray. This gave me a pretty looking skybox (full of faceted distortions, just like a diamond) but it didn't really look interesting once applied to a refractive/reflective lambert material in Three.js.

So I started looking into Custom Shaders, and I stumble upon this link https://www.shadertoy.com/view/4sSGDc

Now my problem is that I can't find a way to make three.js compile the shader. Following other threads here, I found out how to setup some of the uniforms: (for example, Texture2D) but errors like this keep showing up:

THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:163: 'textureCube' : no matching overloaded function found 
ERROR: 0:163: 'assign' :  cannot convert from 'const float' to 'highp 4-component vector of float'
ERROR: 0:168: 'textureCube' : no matching overloaded function found 
ERROR: 0:168: 'r' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:169: 'textureCube' : no matching overloaded function found 
ERROR: 0:169: 'g' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:170: 'textureCube' : no matching overloaded function found 
ERROR: 0:170: 'b' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:185: 'textureCube' : no matching overloaded function found 
ERROR: 0:185: 'assign' :  cannot convert from 'const float' to 'highp 4-component vector of float'
ERROR: 0:196: 'fragCoord' : undeclared identifier 
ERROR: 0:196: 'x' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:196: 'y' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:210: 'fragColor' : undeclared identifier 
ERROR: 0:210: 'assign' :  cannot convert from 'highp 4-component vector of float' to 'float'

Im not expecting to get someone to solve this for me, but I am asking for some lead into where to look first, or if there is some shortcut for converting this shader. This is a very important part of the project, so I will really appreciate any help! Thank you!

You can't just copy shaders. Shaders are mini programs. They require lots of custom inputs (attributes, textures, uniforms). Copying the shader won't bring along all the other infrastructure & data needed to function. There's no easy solution. You have to read the shader, understand what it's doing and what data it needs, then provide that data. Shaders on shadertoy r often ray casting shaders which means they are slow and math intensive. See this Q&A for pointers in that direction. — gman

LJᛃ LJᛃ · Accepted Answer · 2015-03-10T03:39:47

These errors are not three.js related but just plain GLSL errors.

Maybe you broke something while you adjusted the uniforms? Just to make sure: you're aware of the fact that this shader uses raymarching to render its geometry. You cannot pass any geometry to it even if converted without errors. This is a screenspace effect using distance field algorithms to mathematically define the diamond shape. Its not working on any actual geometry.

As a side note this shader is very expensive on the hardware side. My Intel HD 4000 almost choked on it(running it in fullscreen), so be prepared to have smartphone browsers aswell as the fancy MacBook Air of your boss crashing.

If I were to implement a diamond effect i would use a cubemap with prebaked color abbreviations and a simple face normal - view direction reflection lookup in combination with a prebaced caustics texture applied to the "ground plane".

I need to convert a Diamond shader based in WebGL into Three.JS

1 Answers