glsl-face-normal

approximate face normal in the fragment shader

Usage no npm install needed!

<script type="module">
  import glslFaceNormal from 'https://cdn.skypack.dev/glsl-face-normal';
</script>

README

glsl-face-normal

stable

demo-image

(click for demo)

Approximates face normals in the fragment shader for flat shading from the position in camera space.

Note: You need to enable GL_OES_standard_derivatives.

Fragment:

#extension GL_OES_standard_derivatives : enable
varying vec3 vViewPos;

#pragma glslify: faceNormal = require('glsl-face-normal')

void main() {
  vec3 normal = faceNormal(vViewPos);
  //... lighting
}

Vertex:

varying vec3 vViewPos;

void main() {
  vec4 pos = vec4(position, 1.0);
  vec4 mpos = modelViewMatrix * pos;
  gl_Position = projectionMatrix * mpos;
  vViewPos = -mpos.xyz;
}

Usage

NPM

vec3 normal = faceNormal(vec3 pos)

Approximates the face normal from the given pos, which is typically the position in camera-space.

For better precision, you can use the eye relative position instead.

License

MIT. See LICENSE.md for details.