Give vertex shader to geometry in threeJS w/o changing material

Programming
, , ,
1

I am trying to apply linear transforms to each vertex of a geometry using a vertex shader to alter its shape. However, I am unable to enable phong lighting and textures with this. When I pass the shader through the material API, the geometry appears flat and red.

Here is a demo demonstrating the application of my vertex shader to a cube: https://jsfiddle.net/6593Lyve/4/

Here is the code for the vertex shader:

void main()
{
    vec3 p = position.xyz;
    float new_x = p.x*a11 + p.y*a12;
    float new_y = p.x*a21 + p.y*a22;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_x, new_y, p.z, 1.0);
}

Can anyone help me figure out how to enable phong lighting and textures with this shader?

2

To enable phong lighting and textures with this shader, you need to pass the necessary uniforms to the shader and calculate the lighting and texture coordinates in the shader. Here is an updated vertex shader that includes the necessary calculations:

uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

varying vec3 vNormal;
varying vec2 vUv;

void main()
{
    vec3 transformedNormal = normalMatrix * normal;
    vNormal = normalize(transformedNormal);

    vUv = uv;

    vec3 p = position.xyz;
    float new_x = p.x*a11 + p.y*a12;
    float new_y = p.x*a21 + p.y*a22;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_x, new_y, p.z, 1.0);
}

Make sure to pass the necessary uniforms, including the modelMatrix, normalMatrix, cameraPosition, and any texture samplers, to the shader in your code.