WebGL Example: Transforming normals

This website is a part of the Graphics Programming lecture at the University of Marburg. The JavaScript source of this example is: renderer.js

If you do not see an output below, your browser does not support WebGL2. In this case, update your browser or visit the WebGL 1.0 version.

Edit the shader code below and click on the button to see the result:

Vertex shader:

#version 300 es

in vec3 inputPosition;
in vec2 inputTexCoord;
in vec3 inputNormal;

uniform mat4 projection;
uniform mat4 modelview;
uniform mat4 normalMat;
uniform int mode;

out vec4 forFragColor;

void main(){
    gl_Position = projection * modelview * vec4(inputPosition, 1.0);

    vec4 normal = normalMat * vec4(inputNormal, 0.0);
    forFragColor = vec4(1.0,0.0,0.0,1.0);
    if(mode == 1) forFragColor = normal;
    if(mode == 2) forFragColor = vec4(inputNormal, 1.0);
    if(mode == 3) forFragColor = gl_Position;
    if(mode == 4) forFragColor = vec4(inputPosition, 1.0);
    if(mode == 5) forFragColor = vec4(inputTexCoord, 0.0, 1.0);
}

Fragment shader:

#version 300 es
precision mediump float; 

in vec4 forFragColor;
out vec4 outColor;

void main() 
{
  outColor = forFragColor;
}

Note: The interface on this website is kept very simple. If you are looking for a more advanced online GLSL editor that allows uploading own 3D meshes and can handle custom uniform variables, the GSN Composer might be of interest.
Transforming normals: Open example in the GSN Composer