Creating a glass material with refraction of very close scene object

materials
shaders

#1

Hi all,
I’m attempting to model the crystal of a wrist watch, with hopefully a semi-realistic refraction effect. The usual advice for a glass material is to render a cubeMap at the location of the glass, and use that as the envMap with CubeRefractionMapping set.

Doing that gets me almost there, but since the crystal is so close to the watch dial, the dial ends up being massively magnified. Moving the cubeCamera back away from the dial just leads to the whole watch ending up in the texture.

I’ve also tried playing with the Refractor.js and FresnelShader examples, but no luck there. I’m still learning glsl so maybe I’m just missing an obvious way to modify one of those.

My google searches haven’t found any similar examples, so hopefully someone can point me in the right direction.

Thanks in advance!


#2

Can you post an image of your current result and the intended outcome? Or maybe provide a live demo?

The problem is that you have written a very opened question so it’s hard to provide a specific answer. Sharing your current progress of work makes it easier for the community to evaluate the issue.


#3

Sorry for lack of details. There’s two basic types I’m trying to model, a flat glass crystal, and a domed crystal.

The flat one is mostly easy, as a simple transparent material with reflections works well. But they do have some refraction effects as can be seen in this picture, where the markings on the watch face appear around the edge of the glass:

Orient-Ray-II-Dive-Watch-Review-1-1024x682

The other type, the domed crystal, has more extreme refraction, like in this picture:

My current attempt at rendering the domed crystal using a cube camera and refraction mapping can be seen here (may take a while to download, not optimized): http://mofig.gitlab.io/Watch-Modder/

I’ll post code if need be, but right now the relevant code is pretty straightforward from the examples - a cubeCamera set close in at the position of the glass, with the renderTarget.texture set to CubeRefractionMapping. And the glass material envMap set to renderTarget.texture.

I’m starting to think I need some form of ray tracing for the effect I want, which may not be possible performance wise.


#4

I guess you are looking for something like this maybe:

This visual result is achievable with three.js. More advanced real-time effects might need different rendering techniques like raytracing.


#5

Thanks, yes that’s similar to what I’m working on. Doesn’t look like they bothered modeling the subtle refraction effects of the glass. I’ll probably just move along with the project for now and see if I can learn enough about ray casting / tracing to get the effects I’d like.