On my OpenGL app I simulate a kind of metal/glass reflection effect using a texture with
and GL_COMBINE_RGB using GL_TEXTURE_ENV_COLOR.
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.
Thank you Mugen,
which way would you suggest to simulate a soft reflection on the surface?
Consider to use
MeshPhongMaterial with a low
shininess value e.g.
If you want to use a PBR material, use
MeshPhysicalMaterial with a high
roughness value e.g.
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.