https://i.sstatic.net/XzLsh.png
I am experiencing difficulties with my gltf CUP model that has texture and PBR effect. I am trying to apply reflection of the environment (Cubereflection), but I'm facing issues. The color and texture are being altered, and only the environmental reflection is visible. I am unsure where the problem lies in my shader program or if there is another issue at play. Since I lack extensive knowledge on shader programs, I am struggling to solve this problem. How can I achieve the proper color (similar to the first image) with the reflection? Two images have been attached - one without reflection and one with reflection. While the reflection seems to be working correctly, it remains a mystery why the proper color is not showing up. Any help would be greatly appreciated.
my shader program.
var meshlambert_vert =
varying vec3 vReflect;
varying vec3 vRefract[3];
varying float vReflectionFactor;
attribute vec3 a_normal;
varying vec3 v_normal;
varying vec3 v_position;
uniform mat3 u_normalMatrix;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
v_position = mvPosition.xyz;
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
v_normal = u_normalMatrix * a_normal;
vRefract[0] = refract( normalize( I ), worldNormal, 0.02 );
vRefract[1] = refract( normalize( I ), worldNormal, 0.02 * 0.2);
vRefract[2] = refract( normalize( I ), worldNormal, 0.02 * 0.2 );
vReflectionFactor = 0.1 + 1.0 * pow( 1.0 + dot( normalize( I ), worldNormal ), 0.2 );
gl_Position = projectionMatrix * mvPosition;
};
var meshlambert_frag =
uniform samplerCube tCube;
varying vec3 vReflect;
varying vec3 vRefract[3];
varying float vReflectionFactor;
uniform vec4 u_ambient;
uniform vec4 u_emission;
uniform vec4 u_specular;
uniform vec4 u_diffuse;
varying vec3 v_normal;
varying vec3 v_position;
void main() {
// shader code here...
}";
cubmaping code with reflection:https://i.sstatic.net/aOGxA.jpg
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/env1/' );
var textureCube = loader.load( [
'posx.jpg', 'negx.jpg',
'posy.jpg', 'negy.jpg',
'posz.jpg', 'negz.jpg'
] );
textureCube.mapping = THREE.CubeReflectionMapping;
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
scene.add( cubeMesh );
var sphereMaterial=new THREE.MeshLambertMaterial( {envMap: textureCube } );
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = sphereMaterial;
}
} );