Looking to achieve optimal performance when rendering simple textured shapes? The Phong model requires extra lighting and color adjustments, leading to unwarranted complexities. To simplify matters, a flat shader seemed like the best solution, yet some issues have arisen:
<script id="vertShader" type="shader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragShader" type="shader">
varying vec2 vUv;
uniform sampler2D material;
void main() {
gl_FragColor = texture2D(material, vUv);
}
</script>
Under specific camera angles, shelves appear to vanish, revealing darker spots and allowing for visibility through them – an occurrence not witnessed with the Phong material. The issue seems to be related to the shadow textures embedded within each shelf space, possibly affecting loading times.
The standard obj loader, coupled with texture additions, sets the material to Phong, necessitating a switch to a custom shader:
var objLoader = new THREE.OBJLoader( manager );
objLoader.load( obj, function ( model ) {
elements[name] = model;
console.log('loaded ', name);
var img = THREE.ImageUtils.loadTexture(mat);
elements[name].traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = new THREE.ShaderMaterial( {
uniforms: {
color: {type: 'f', value: 0.0},
material: {type: 't', value: img}
},
fragmentShader: document.getElementById('fragShader').text,
vertexShader: document.getElementById('vertShader').text,
} );
}
});
If you have any insights or suggestions on resolving these challenges, please share them!