Apply a custom model metrix to the vertex shader

shaders

#1

Dear all,

I need to pass a custom model matrix to the vertex shader .Even though i pass the custom model matrix to the vertex shader, the output is not the expected.

vertex shader code

attribute vec3 position;
attribute vec3 normal;
uniform mat4 model;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;

varying vec3 Normal;

void main(){
	
	Normal = mat3(model) * normal;
	gl_Position = projectionMatrix * viewMatrix * model * vec4( position, 1.0 );
			 
}  		

i create the custom model matrix:

uniforms = {

				model: {
					type: 'mat4', 
					value: 0
				}
		};


var geomery = new THREE.SphereGeometry( 1, 64, 64, );
var model = new THREE.Matrix4();
model.makeTranslation (1,1,3 );
uniforms.model.value = model;
					
var shaderMaterial = new THREE.RawShaderMaterial({
	uniforms: uniforms,
	vertexShader:document.getElementById( 'vertexshader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentshader' ).textContent
});
					
var sphere = new THREE.Mesh(geomery,shaderMaterial);
scene.add(sphere); // scene has created ealier in the actual code

The output is displays with out translation.Of couse i know that i can do this with sphere.position.set(1,1,3).But need to do this way(translating the model matrix) because i need to calculate the following at the vertex shader,

Normal = mat3(model) * normal;

To calculate the Normal parameter at the vertex shader model matrix need to be the translated one.

Thanks you,
Tharindu


#2

Why don’t you use the predefined uniform normalMatrix in order to transform the normal? Besides, you should use ShaderMaterial and not RawShaderMaterial if you are going to use predefined uniforms like projectionMatrix or viewMatrix.

Here is a fiddle with a custom model matrix: https://jsfiddle.net/f2Lommf5/8873/