Created
October 28, 2020 20:06
Star
You must be signed in to star a gist
WebGL Ray Marching
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>RayMarching</title> | |
<script src="./twgl.min.js"></script> | |
<script src="./shaders.js"></script> | |
<script src="./script.js" defer></script> | |
<style>html,body{margin:0;overflow:hidden;height:100%}canvas{width:100%;height:100%}</style> | |
</head> | |
<body> | |
<canvas></canvas> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const gl = document.querySelector("canvas").getContext("webgl2"); | |
const programInfo = twgl.createProgramInfo(gl, [vs, fs]); | |
const arrays = { | |
position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0], | |
}; | |
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays); | |
function render(time) { | |
twgl.resizeCanvasToDisplaySize(gl.canvas); | |
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); | |
gl.clearColor(0.0, 0.0, 0.0, 1.0); | |
gl.clear(gl.COLOR_BUFFER_BIT); | |
const uniforms = { | |
u_time: time * 0.001, | |
u_resolution: [gl.canvas.width, gl.canvas.height], | |
}; | |
gl.useProgram(programInfo.program); | |
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); | |
twgl.setUniforms(programInfo, uniforms); | |
twgl.drawBufferInfo(gl, bufferInfo); | |
requestAnimationFrame(render); | |
} | |
requestAnimationFrame(render); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const vs = `#version 300 es | |
in vec4 position; | |
void main() { | |
gl_Position = position; | |
} | |
`; | |
const fs = `#version 300 es | |
precision mediump float; | |
out vec4 fragColor; | |
uniform vec2 u_resolution; | |
uniform float u_time; | |
float DE(vec3 p); | |
float DE(vec3 p){ | |
// Move camera back | |
// p+=vec3(0.0, 0.0, -2.); | |
// Animate camera | |
p+=vec3(0.0, u_time * 2.0, u_time); | |
// Infinite | |
p = mod(p, 2.0) - 0.5 * 2.0; | |
// Sphere | |
return length(p) - 0.5; | |
// Box | |
// return length(max(abs(p) - 0.5, 0.0)); | |
// Torus | |
return length(vec2(length(p.xy)-.6,p.z))-.2; | |
} | |
void main() { | |
vec2 fragCoord = gl_FragCoord.xy; | |
vec3 D = normalize( | |
vec3(fragCoord + fragCoord - (fragColor.xy = u_resolution.xy), fragColor.y) | |
); | |
fragColor -= fragColor; | |
for(int i = 0; i < 50; ++i) | |
fragColor += DE(D * fragColor.x - vec3(0, 0, 2)); | |
fragColor = 1.0 / fragColor; | |
fragColor = vec4(fragColor.xyz, 1.0); | |
} | |
`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment