Texture loading for custom Geometry using ShaderMaterial is not working in Three.js

Question

Here, i have a Geometry(pyramid) with four vertices and 4 faces -

var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100));
geom.faces.push( new THREE.Face3( 0, 2, 1), new THREE.Face3( 0, 1, 3), new THREE.Face3( 0, 3, 2), new THREE.Face3( 1, 2, 3) );
geom.computeFaceNormals();

Here is my RawShaderMaterial -

var geomMaterial = new THREE.RawShaderMaterial({
        vertexShader: [
            'precision highp float;',
            'precision highp int;',
            'uniform mat4 modelViewMatrix;',
            'uniform mat4 projectionMatrix;',
            'attribute vec3 position;',
            'attribute vec2 uv;',
            'varying vec2 interpolatedUV;',
            'void main() {',
            'interpolatedUV = uv;',
            'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
            '}'
        ].join('\n'),
        fragmentShader: [
            'precision highp float;',
            'precision highp int;',
            'uniform sampler2D texSampler;',
            'varying vec2 interpolatedUV;',
            'void main() {',
            'gl_FragColor = texture2D(texSampler, interpolatedUV);',
            '}'
        ].join('\n'),
        uniforms: {
            texSampler: {
                type: 't',
                value: new THREE.ImageUtils.loadTexture("images/test.png")
            }
        }
    });

"images/test.png" is accessible from the script. It seems pretty much trivial to me but the texture simply does not show up. All i can see is a white pyramid.

Can you please tell me what actually went wrong with it?

UPDATE:

After digging around, i have found that i have to provide the UV map for the custom geometry i have created. So i have added it this way -

var uvs = [];
    uvs.push(new THREE.Vector2(0.5, 1.0));
    uvs.push(new THREE.Vector2(0.5, 0.0));
    uvs.push(new THREE.Vector2(0.0, 0.0));
    uvs.push(new THREE.Vector2(1.0, 0.0));

    geom.faces.push( new THREE.Face3( 0, 2, 1));
    geom.faceVertexUvs[0].push(uvs[0], uvs[2], uvs[1]);

    geom.faces.push( new THREE.Face3( 0, 1, 3));
    geom.faceVertexUvs[0].push(uvs[0], uvs[1], uvs[3]);

    geom.faces.push( new THREE.Face3( 0, 3, 2));
    geom.faceVertexUvs[0].push(uvs[0], uvs[3], uvs[2]);

    geom.faces.push( new THREE.Face3( 1, 2, 3));
    geom.faceVertexUvs[0].push(uvs[1], uvs[2], uvs[3]);

But it still shows the white pyramid.And also i am getting this error now -

THREE.BufferAttribute.copyVector2sArray(): vector is undefined 0 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 1 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 2 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 3 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 4 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 5 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 6 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 7 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 8 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 9 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 10 THREE.BufferAttribute.copyVector2sArray(): vector is undefined 11

Any idea about it?

No errors? I thought the raw shader material doesnt give you projectionMatrix MVMatrix etc. — pailhead
– pailhead, Commented Dec 3, 2015 at 21:41
If i remove my custom geometry and provide a sphereGeometry, it works fine. SO i think the problem is not there. — Rasheduzzaman Sourov
– Rasheduzzaman Sourov, Commented Dec 3, 2015 at 22:43
do gl_FragColor = vec4( abs( interpolatedUV ) , 0. , 1.); see if it gives any color — pailhead
– pailhead, Commented Dec 3, 2015 at 23:44
hmm, interpolatedUV contains (0, 0) for every fragment. That means the attribute "uv" is not getting passed to the vertex shader. Any idea why that might be? — Rasheduzzaman Sourov
– Rasheduzzaman Sourov, Commented Dec 4, 2015 at 0:03
last made geometry like that at some 60 something version :) Not entirely sure, but its a start. — pailhead
– pailhead, Commented Dec 4, 2015 at 0:33

Rasheduzzaman Sourov · Accepted Answer · 2015-12-04 07:28:24Z

After debugging the code of Three.js, i have found the problem. I am writing it down as an answer since others can face the same problem.

Three.js treat Geometry.faceVertexUvs as an array of a set of UVs where each set represents all UVs of a single face. Here is the code snippet where they take the UVs from Geometry.faceVertexUvs -

if(!0===e){
     w=d[0][k];// here d=Geometry.faceVertexUvs and k=the index of the face

     if(void 0!==w)
       this.uvs.push(w[0],w[1],w[2]);
     else{
       console.warn("THREE.DirectGeometry.fromGeometry(): Undefined vertexUv ", k);
       this.uvs.push(new THREE.Vector2,new THREE.Vector2,new THREE.Vector2);
     }
}

So, the solution is to provide Geometry.faceVertexUvs as an array of FaceUvs. Here is my rough solution -

var faceUvs = [[],[],[],[]];
faceUvs[0].push(uvs[0], uvs[2], uvs[1]);
faceUvs[1].push(uvs[0], uvs[1], uvs[3]);
faceUvs[2].push(uvs[0], uvs[3], uvs[2]);
faceUvs[3].push(uvs[1], uvs[2], uvs[3]);
geom.faceVertexUvs[0].push(faceUvs[0]);
geom.faceVertexUvs[0].push(faceUvs[1]);
geom.faceVertexUvs[0].push(faceUvs[2]);
geom.faceVertexUvs[0].push(faceUvs[3]);

Collectives™ on Stack Overflow

Texture loading for custom Geometry using ShaderMaterial is not working in Three.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related