Skip to content

Instantly share code, notes, and snippets.

@CaterpyOwO
Created October 28, 2020 20:06
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CaterpyOwO/05eda3715e6aa9d751ac3c8069881993 to your computer and use it in GitHub Desktop.
WebGL Ray Marching
<!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>
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);
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