CODEWITHSUNDEEP
javascriptthree.jsglslshader
Philip Bell
Philip Bell

Reputation: 75

Three.js Shader not displaying correctly on single custom geometry mesh face

I have a single face Mesh in Three.js that I want to apply a shader to.

When I apply the shader material on the mesh, it appears to be reading a single pixel of the shader and applying that value to the entire face. I'm testing this in the following example: https://threejs.org/examples/?q=shader#webgl_shader2

A single face mesh has been added to each shader example, it's the same problem across all examples. 

// how geometry is defined (right after BoxGeometry in example)
let triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3( 0.0, 1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( -1.0, -1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0 ));
triangleGeometry.faces.push(new THREE.Face3( 0, 1, 2 ));

// how mesh is defined (right after box mesh in example)
let triangleMesh = new THREE.Mesh( triangleGeometry, material );
triangleMesh.position.x = i - ( params.length - 1 ) / 2;
triangleMesh.position.y = i % 2 - 0.5;
scene.add( triangleMesh );

sample shader image

I've tried this on every example I can find and have the same issue. I wonder what I'm not seeing.

Upvotes: 1

Views: 425

Answers (1)

Philip Bell
Philip Bell

Reputation: 75

This works:

geometry.computeBoundingBox();

var max = geometry.boundingBox.max,
    min = geometry.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometry.faces;

geometry.faceVertexUvs[0] = [];

for (var i = 0; i < faces.length ; i++) {

    var v1 = geometry.vertices[faces[i].a], 
        v2 = geometry.vertices[faces[i].b], 
        v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
        new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
        new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
    ]);
}
geometry.uvsNeedUpdate = true;

Upvotes: 1

Related Questions