Trying to render a .obj with a .png texture has caused the head to turn white in the following image:
After removing the png texture, the result is as follows:
This code snippet is used to create the texture:
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
uniform vec3 color;
uniform sampler2D texture;
varying vec2 vUv;
void main() {
vec4 tColor = texture2D( texture, vUv );
gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
}
var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png');
texture.needsUpdate = true;
var uniforms = {
color: { type: "c", value: new THREE.Color( 0xffffff ) }, // material is "red"
texture: { type: "t", value: texture },
transparent: true,
opacity: 0.9,
};
var AvatarTextureF = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
fragmentShader : document.getElementById( 'fragment_shader' ).textContent
});
To apply it to the object:
object.children[1].material = AvatarTextureF;
Tried different approaches, including using a normal material:
var AvatarTextureF = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png'), shininess: 80, color: 0xffcc66, shading: THREE.SmoothShading, alphaMap: 0x000000} );
Resulting in the same issue.
Updated code now renders the head as invisible:
Shaders:
<script type="x-shader/x-vertex" id="vertex_shader">
#if NUM_DIR_LIGHTS > 0
struct DirectionalLight {
vec3 direction;
vec3 color;
int shadow;
float shadowBias;
float shadowRadius;
vec2 shadowMapSize;
};
uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif
//varying vec3 color;
void main() {
float r = directionalLights[0].color.r;
//color = vec3(r,0.6,0.6,0.6);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
</script>
<script type="x-shader/x-fragment" id="fragment_shader">
uniform vec3 color;
uniform sampler2D texture;
varying vec2 vUv;
void main() {
vec4 tColor = texture2D( texture, vUv );
gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
}
</script>
Head rendering code:
var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png');
texture.needsUpdate = true;
// uniforms
var uniforms = THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "lights" ],
{
color: { type: "c", value: new THREE.Color( 0xffffff ) },
texture: { type: "t", value: texture }
}
] );
// material
var AvatarTextureF = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : document.getElementById( 'vertex_shader' ).textContent,
fragmentShader : document.getElementById( 'fragment_shader' ).textContent,
//transparent: true,
lights: true
});