WebGL (three.js) Diamond reflections and refractions
polycounter lvl 5
Hi, there people!
So, here is my case: I am developing a web site in which the costumers of the Diamond Company I will work for can come in and customize their own rings, bracelets, and necklaces, and then order it.
The site is made in WebGL, and the biggest problem we ran into is the rendering of realistic-looking diamonds.
Now, I've been working with CGI diamonds for over a decade, and I';m pretty aware of how Vray works with the bouncing of lightning inside a diamond making reflections and refractions work together to achive a realistic look like this one:
But of course, on WebGL that is not possible. Yet, I thought of faking it a bit by rendering a skybox with Vray, by placing a square camera render inside of a diamond, and this was the result:
And then applying it to the diamond's reflection skybox (while the silver plating has it's own 'studio' skybox:
But it is still not that pretty... So I was wondering if any of you guys might have some sort of cool idea to work with it?
I will appreciate any help or ideas you can throw at me! Thanks in advance!
Lucas
So, here is my case: I am developing a web site in which the costumers of the Diamond Company I will work for can come in and customize their own rings, bracelets, and necklaces, and then order it.
The site is made in WebGL, and the biggest problem we ran into is the rendering of realistic-looking diamonds.
Now, I've been working with CGI diamonds for over a decade, and I';m pretty aware of how Vray works with the bouncing of lightning inside a diamond making reflections and refractions work together to achive a realistic look like this one:
But of course, on WebGL that is not possible. Yet, I thought of faking it a bit by rendering a skybox with Vray, by placing a square camera render inside of a diamond, and this was the result:
And then applying it to the diamond's reflection skybox (while the silver plating has it's own 'studio' skybox:
But it is still not that pretty... So I was wondering if any of you guys might have some sort of cool idea to work with it?
I will appreciate any help or ideas you can throw at me! Thanks in advance!
Lucas
Replies
I would look into refraction mapping, not just reflection.
Does your renderer support custom shaders? Maybe you could render the interior surface as 1 pass, then a transparent exterior as the 2nd pass. That's kind of what a reflection+refraction shader does.
Looking at these examples might give you some ideas.
http://www.google.com/search?q=diamond+real+time+rendering
The vimeo video at the bottom looks like a cheap method to approximate the effect. Seems as if they deleted the top face, so you can see inside the model?
Good thing is that Three.js accepts Custom Shaders, so that;s a good point to start researching.
About the vimeo video, I think you might be right, I'll try and remove the top face and render both the inner and outer faces, and see what happens.
Also, for some reason, I can't reduce the reflection's size on my diamond. I mean, if you see that video, each face reflects a couple of shiny details, and other faces, while in my project each face reflects an area of 10px x 10px of the skybox. And I would like it to reflect a bigger area, does that makes sense?
Here I have zoomed in the stone, and as you can see, the skybox is really enlarged (as if the skybox was massive, but it is the size of the stone, around 5cm3):
Thanks again for your feed back!
http://www.google.com/search?q=flat+reflection+shader
In here:
https://www.shadertoy.com/view/4sSGDc
It is webGL and it looks good!
Now my problem is to convert the shader's equations to Three.js (my framework).. I tried for a few hours, but I just get loads and loads of errors, and the shader can't be compiled!