DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Simple Sphere SDF title style body margin 0 canvas display block style head body canvas id canvas width 500 height 500 canvas script const vertexShaderSource attribute vec3 a position varying vec3 v position void main gl Position vec4 a position 1 0 v position a position const fragmentShaderSource precision highp float uniform float iTime uniform vec2 u resolution varying vec3 v position float sdfSphere vec3 testPoint vec3 spherePos float sphereRadius return length spherePos testPoint sphereRadius float sdfCube vec3 testPoint vec3 cubePos vec3 cubeDim vec3 d abs cubePos testPoint cubeDim return min max d x max d y d z 0 0 length max d vec3 0 0 float sdfTetrahedron vec3 z vec3 a1 vec3 1 1 1 vec3 a2 vec3 1 1 1 vec3 a3 vec3 1 1 1 vec3 a4 vec3 1 1 1 vec3 c int n 0 float dist float d const int Iterations 10 const float Scale 2 0 for int j 0 j Iterations j c a1 dist length z a1 d length z a2 if d dist c a2 dist d d length z a3 if d dist c a3 dist d d length z a4 if d dist c a4 dist d z Scale z c Scale 1 0 n return length z pow Scale float n 0 01 float rayCast vec3 ptin float t 0 0 Rotation float x 0 2 iTime float y 0 7 iTime mat4 Rx mat4 vec4 cos x sin x 0 0 0 0 vec4 sin x cos x 0 0 0 0 vec4 0 0 0 0 1 0 0 0 vec4 0 0 0 0 0 0 1 0 mat4 Ry mat4 vec4 cos y 0 0 sin y 0 0 vec4 0 0 1 0 0 0 0 0 vec4 sin y 0 0 cos y 0 0 vec4 0 0 0 0 0 0 1 0 vec3 pt vec4 ptin 1 0 Ry Rx xyz t sdfTetrahedron pt return t float rayTrace vec3 rayPos vec3 rayDir float t 0 0 for int i 0 i 200 i vec3 rayPosition rayPos rayDir t t rayCast rayPosition if t 0 0 t 1000 0 return 0 0 no hit return t vec3 getNormal vec3 pt float d rayCast pt float s 0 01 vec3 a vec3 pt x s pt y pt z vec3 b vec3 pt x pt y s pt z vec3 c vec3 pt x pt y pt z s vec3 normal normalize vec3 rayCast a d rayCast b d rayCast c d return normal void main vec2 uv gl FragCoord xy u resolution xy uv uv 2 0 1 0 Map uv coordinates to range 1 1 Convert 2D UV to 3D position vec3 rayDir normalize vec3 uv 2 5 vec3 0 0 0 vec3 rayPos vec3 0 0 0 0 5 0 vec3 fragColor vec3 1 1 1 float res rayTrace rayPos rayDir if res 0 0 fragColor vec3 1 0 0 5 0 0 vec3 n getNormal rayPos rayDir res vec3 lightDirection vec3 0 0 0 0 1 0 fragColor fragColor min dot n lightDirection 1 0 gl FragColor vec4 fragColor 1 0 function createShader gl type source const shader gl createShader type gl shaderSource shader source gl compileShader shader if gl getShaderParameter shader gl COMPILE STATUS console error An error occurred compiling the shaders gl getShaderInfoLog shader gl deleteShader shader return null return shader function createProgram gl vertexShader fragmentShader const program gl createProgram gl attachShader program vertexShader gl attachShader program fragmentShader gl linkProgram program if gl getProgramParameter program gl LINK STATUS console error Unable to initialize the shader program gl getProgramInfoLog program return null return program function main const canvas document getElementById canvas const gl canvas getContext webgl if gl console error Unable to initialize WebGL Your browser may not support it return Compile vertex and fragment shaders const vertexShader createShader gl gl VERTEX SHADER vertexShaderSource const fragmentShader createShader gl gl FRAGMENT SHADER fragmentShaderSource Create shader program const program createProgram gl vertexShader fragmentShader gl useProgram program Set up vertex buffer const positionBuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER positionBuffer const positions 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 gl bufferData gl ARRAY BUFFER new Float32Array positions gl STATIC DRAW const positionAttributeLocation gl getAttribLocation program a position gl enableVertexAttribArray positionAttributeLocation gl vertexAttribPointer positionAttributeLocation 3 gl FLOAT false 0 0 Set resolution uniform const resolutionUniformLocation gl getUniformLocation program u resolution gl uniform2f resolutionUniformLocation canvas width canvas height let timevalue 1 0 const timeUniformLocation gl getUniformLocation program iTime gl uniform1f timeUniformLocation timevalue Clear canvas gl clearColor 0 0 0 0 0 0 1 0 gl clear gl COLOR BUFFER BIT update loop function render Draw gl drawArrays gl TRIANGLES 0 6 timevalue 0 01 gl uniform1f timeUniformLocation timevalue requestAnimationFrame render Looping animation render main script body html
uv uv 2 0 1 0 Map uv coordinates to range 1 1 Convert 2D UV to 3D position vec3 rayDir normalize vec3 uv 2 5 vec3 0 0 0 vec3 rayPos vec3 0 0 0 0 5 0 vec3 fragColor vec3 1 1 1 float res rayTrace rayPos rayDir if res 0 0 fragColor vec3 1 0 0 5 0 0 vec3 n getNormal rayPos rayDir res vec3 lightDirection vec3 0 0 0 0 1 0 fragColor fragColor min dot n lightDirection 1 0 gl FragColor vec4 fragColor 1 0 function createShader gl type source const shader gl createShader type gl shaderSource shader source gl compileShader shader if gl getShaderParameter shader gl COMPILE STATUS console error An error occurred compiling the shaders gl getShaderInfoLog shader gl deleteShader shader return null return shader function createProgram gl vertexShader fragmentShader const program gl createProgram gl attachShader program vertexShader gl attachShader program fragmentShader gl linkProgram program if gl getProgramParameter program gl LINK STATUS console error Unable to initialize the shader program gl getProgramInfoLog program return null return program function main const canvas document getElementById canvas const gl canvas getContext webgl if gl console error Unable to initialize WebGL Your browser may not support it return Compile vertex and fragment shaders const vertexShader createShader gl gl VERTEX SHADER vertexShaderSource const fragmentShader createShader gl gl FRAGMENT SHADER fragmentShaderSource Create shader program const program createProgram gl vertexShader fragmentShader gl useProgram program Set up vertex buffer const positionBuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER positionBuffer const positions 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 1 0 1 0 0 0 gl bufferData gl ARRAY BUFFER new Float32Array positions gl STATIC DRAW const positionAttributeLocation gl getAttribLocation program a position gl enableVertexAttribArray positionAttributeLocation gl vertexAttribPointer positionAttributeLocation 3 gl FLOAT false 0 0 Set resolution uniform const resolutionUniformLocation gl getUniformLocation program u resolution gl uniform2f resolutionUniformLocation canvas width canvas height let timevalue 1 0 const timeUniformLocation gl getUniformLocation program iTime gl uniform1f timeUniformLocation timevalue Clear canvas gl clearColor 0 0 0 0 0 0 1 0 gl clear gl COLOR BUFFER BIT update loop function render Draw gl drawArrays gl TRIANGLES 0 6 timevalue 0 01 gl uniform1f timeUniformLocation timevalue requestAnimationFrame render Looping animation render main script body html