Reflection effect with GL_TEXTURE_GEN_S

On my OpenGL app I simulate a kind of metal/glass reflection effect using a texture with


So with env_color 100% I get a metal reflection effect and with 0% I get a flat material.

How can I achieve this effect with Three.js ?

What this code does is it enables the automatic generation of texture coordinates with OpenGL. Such a feature is not available with WebGL.

I’m not familiar with texture combiners so I’m not sure how this would work in WebGL.

Please keep in mind that WebGL has to run on many different devices which use a wide set of native 3D APIs like OpenGL, DirectX or Vulkan. WebGL does not support features of native 3D APIs which have to be emulated in software on all others.

1 Like

Thank you Mugen,

which way would you suggest to simulate a soft reflection on the surface?

1 Like

Consider to use MeshPhongMaterial with a low shininess value e.g. 15.

If you want to use a PBR material, use MeshStandardMaterial or MeshPhysicalMaterial with a high roughness value e.g. 1.

1 Like

Hi Michael, I realised that what I wanted to achieve, on Threejs is called “envMap”. So I did it and it works well with a Phong material. I paste here the basic code for the other devs to know

texture = textureLoader.load(imagePath);
texture.mapping = THREE.EquirectangularReflectionMapping;
material.envMap = texture;
material.reflectivity = reflectivity; // from 0.0 to 1.0

a low reflectivity plus a little shininess gives you a nice plastic reflecting material effect

On my original macOS OpenGL app I get this

On Threejs the same model gives me this result. Very good! Yeah, still some difference, but I am a newbie on Threejs.

The best is the movie, taken from my browser Safari

I’m going to try the roughness as you suggested. I’ll tell you ASAP. Thank you.