https://motioncanvas.online/preview/webgl-raymarching-shader
Scroll Down
WebGL Raymarching Shader
🟠 WebGLA jaw-dropping 3D fractal Raymarching scene calculated inside a pixel shader. Watch infinite glowing metashapes morph, bend, and reflect light in real-time around cursor forces.
#WebGL#raymarching#shader#3d#interactive
Advertisement
Sponsor Advertisement
728 × 90 | Responsive Banner
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-below-preview
Google AdSense Placeholder
Interactive Settings
Motion PresetsCustom Tuning
Animation Speed1.0x
Blur (Aesthetic diffusion)0px
Layer Opacity100%
Scale Zoom1.0x
Rotation Angle0°
Advertisement
Sponsor Advertisement
300 × 250 | Rectangle
Medium Rectangle Block
Slot ID: ca-pub-detail-after-customization
Google AdSense Placeholder
Quick Copy Actions
Download File Packages
Keyboard Shortcuts
Space Play/Pause
F Fullscreen
R Reset Slider
C Copy Code
Advertisement
Sponsor Advertisement
728 × 90 | Responsive Banner
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-before-related
Google AdSense Placeholder
More in WebGL
Loading Canvas Shader...
🟠 WebGL
WebGL Aurora
A gorgeous, high-performance WebGL-powered Aurora Borealis simulation. Watch glowing ribbons of green and violet light wave gracefully across the deep cosmos.
Loading Canvas Shader...
🟠 WebGL
Midnight JDM Street Race
A deeply motion-blurred late-night street race simulation. Glowing red and white headlights and taillights continuously warp past with responsive speed-boosting scroll wheel and immersive camera shake.
Loading Canvas Shader...
🟠 WebGL
Retro Topographic Grid
A gorgeous 3D wireframe topographic landscape under a neon retro sun. Features a procedural Web Audio synthesizer playing an interactive, heavy-bass ambient beat that drives real-time landscape morphing, pulse lighting, and camera vibrations.
WebGL Raymarching Shader - WebGL 3D GPU WebGL background for React & Tailwind
Integrate the WebGL Raymarching Shader directly into your website. This asset is rendered using raw WebGL shader context. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.
⚡ Performance Specifications
- Render Mode: WEBGL (WebGL 3D GPU)
- Fluidity: Locked at 60fps dynamic loop
- Bundle Footprint: Zero external NPM dependencies
- SEO Indexing status: 100% Crawlable static semantic HTML
🛠️ Integration Capabilities
Our templates expose inline design tokens like --color-1 and --color-2 for infinite color palettes. This template is designed to fit inside hero elements, full-screen landing pages, and interactive presentation cards.
Technical Code Reference & Syntaxes for Googlebot & Crawlers
The snippets below display the direct, unminified source code utilized for rendering this background.
HTML & Inline CSS Snippet (Vanilla)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Raymarching Shader</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #09090b;
}
#canvas-webgl-raymarching {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<canvas id="canvas-webgl-raymarching"></canvas>
<script>
(function() {
const canvas = document.getElementById('canvas-webgl-raymarching');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) return;
const vertices = new Float32Array([
-1, -1, 1, -1, -1, 1,
-1, 1, 1, -1, 1, 1
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
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(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vsSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const fsSource = `
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
mat3 rotationMatrix(vec3 axis, float angle) {
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat3(
oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c
);
}
float sdSphere(vec3 p, float s) {
return length(p) - s;
}
float map(vec3 p, float time) {
vec3 q = p;
q = rotationMatrix(vec3(1.0, 0.5, 0.2), time * 0.5) * q;
float d1 = sdSphere(q, 1.0);
float wave = sin(q.x * 3.0 + time * 2.0) * cos(q.y * 3.0 + time * 1.5) * sin(q.z * 3.0 + time) * 0.15;
return d1 + wave;
}
vec3 getNormal(vec3 p, float time) {
vec2 e = vec2(0.001, 0.0);
float d = map(p, time);
vec3 n = d - vec3(
map(p - e.xyy, time),
map(p - e.yxy, time),
map(p - e.yyx, time)
);
return normalize(n);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
vec2 mouse = (u_mouse - 0.5 * u_resolution.xy) / u_resolution.y;
vec3 ro = vec3(0.0, 0.0, -3.0);
vec3 rd = normalize(vec3(p, 1.0));
mat3 camRot = rotationMatrix(vec3(0.0, 1.0, 0.0), mouse.x * 1.5) * rotationMatrix(vec3(1.0, 0.0, 0.0), -mouse.y * 1.5);
ro = camRot * ro;
rd = camRot * rd;
float t = 0.0;
float maxT = 10.0;
int hit = 0;
vec3 pos = vec3(0.0);
for (int i = 0; i < 40; ++i) {
pos = ro + rd * t;
float d = map(pos, u_time);
if (d < 0.001) {
hit = 1;
break;
}
t += d;
if (t > maxT) break;
}
vec3 col = vec3(0.0);
if (hit == 1) {
vec3 normal = getNormal(pos, u_time);
vec3 lightPos = vec3(2.0, 4.0, -3.0);
vec3 lightDir = normalize(lightPos - pos);
float diff = max(dot(normal, lightDir), 0.0);
vec3 viewDir = normalize(ro - pos);
vec3 reflectDir = reflect(-lightDir, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 16.0);
vec3 baseColor = 0.5 + 0.5 * cos(u_time * 0.3 + pos.xyx + vec3(0.0, 2.0, 4.0));
col = baseColor * (diff * 0.8 + 0.2) + vec3(spec * 0.5);
float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 4.0);
col += vec3(0.3, 0.8, 1.0) * fresnel * 0.6;
} else {
col = mix(vec3(0.02, 0.01, 0.05), vec3(0.08, 0.03, 0.15), uv.y);
float glow = 0.02 / (length(p - vec2(0.2, 0.2)) + 0.05);
col += vec3(0.2, 0.5, 1.0) * glow * 0.3;
}
gl_FragColor = vec4(col, 1.0);
}
`;
const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
if (!vs || !fs) return;
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
gl.useProgram(program);
const positionLoc = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
const uResolution = gl.getUniformLocation(program, 'u_resolution');
const uTime = gl.getUniformLocation(program, 'u_time');
const uMouse = gl.getUniformLocation(program, 'u_mouse');
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = canvas.height - e.clientY;
});
function resize() {
const width = window.innerWidth;
const height = window.innerHeight;
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, width, height);
}
}
window.addEventListener('resize', resize);
resize();
let startTime = Date.now();
function render() {
let elapsed = (Date.now() - startTime) / 1000.0;
gl.uniform2f(uResolution, canvas.width, canvas.height);
gl.uniform1f(uTime, elapsed);
gl.uniform2f(uMouse, mouseX, mouseY);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
})();
</script>
</body>
</html>React Component Wrapper (TSX)
import React from 'react';
export default function WebGLRaymarchingShaderBackground() {
return (
<div
style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}
>
<style dangerouslySetInnerHTML={{ __html: `
#canvas-webgl-raymarching {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
` }} />
{/* HTML Structure */}
<div
style={{ width: '100%', height: '100%' }}
dangerouslySetInnerHTML={{ __html: `
<canvas id="canvas-webgl-raymarching"></canvas>
<script>
(function() {
const canvas = document.getElementById('canvas-webgl-raymarching');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) return;
const vertices = new Float32Array([
-1, -1, 1, -1, -1, 1,
-1, 1, 1, -1, 1, 1
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
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(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vsSource = \`
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
\`;
const fsSource = \`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
mat3 rotationMatrix(vec3 axis, float angle) {
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat3(
oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c
);
}
float sdSphere(vec3 p, float s) {
return length(p) - s;
}
float map(vec3 p, float time) {
vec3 q = p;
q = rotationMatrix(vec3(1.0, 0.5, 0.2), time * 0.5) * q;
float d1 = sdSphere(q, 1.0);
float wave = sin(q.x * 3.0 + time * 2.0) * cos(q.y * 3.0 + time * 1.5) * sin(q.z * 3.0 + time) * 0.15;
return d1 + wave;
}
vec3 getNormal(vec3 p, float time) {
vec2 e = vec2(0.001, 0.0);
float d = map(p, time);
vec3 n = d - vec3(
map(p - e.xyy, time),
map(p - e.yxy, time),
map(p - e.yyx, time)
);
return normalize(n);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
vec2 mouse = (u_mouse - 0.5 * u_resolution.xy) / u_resolution.y;
vec3 ro = vec3(0.0, 0.0, -3.0);
vec3 rd = normalize(vec3(p, 1.0));
mat3 camRot = rotationMatrix(vec3(0.0, 1.0, 0.0), mouse.x * 1.5) * rotationMatrix(vec3(1.0, 0.0, 0.0), -mouse.y * 1.5);
ro = camRot * ro;
rd = camRot * rd;
float t = 0.0;
float maxT = 10.0;
int hit = 0;
vec3 pos = vec3(0.0);
for (int i = 0; i < 40; ++i) {
pos = ro + rd * t;
float d = map(pos, u_time);
if (d < 0.001) {
hit = 1;
break;
}
t += d;
if (t > maxT) break;
}
vec3 col = vec3(0.0);
if (hit == 1) {
vec3 normal = getNormal(pos, u_time);
vec3 lightPos = vec3(2.0, 4.0, -3.0);
vec3 lightDir = normalize(lightPos - pos);
float diff = max(dot(normal, lightDir), 0.0);
vec3 viewDir = normalize(ro - pos);
vec3 reflectDir = reflect(-lightDir, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 16.0);
vec3 baseColor = 0.5 + 0.5 * cos(u_time * 0.3 + pos.xyx + vec3(0.0, 2.0, 4.0));
col = baseColor * (diff * 0.8 + 0.2) + vec3(spec * 0.5);
float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 4.0);
col += vec3(0.3, 0.8, 1.0) * fresnel * 0.6;
} else {
col = mix(vec3(0.02, 0.01, 0.05), vec3(0.08, 0.03, 0.15), uv.y);
float glow = 0.02 / (length(p - vec2(0.2, 0.2)) + 0.05);
col += vec3(0.2, 0.5, 1.0) * glow * 0.3;
}
gl_FragColor = vec4(col, 1.0);
}
\`;
const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
if (!vs || !fs) return;
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
gl.useProgram(program);
const positionLoc = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
const uResolution = gl.getUniformLocation(program, 'u_resolution');
const uTime = gl.getUniformLocation(program, 'u_time');
const uMouse = gl.getUniformLocation(program, 'u_mouse');
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = canvas.height - e.clientY;
});
function resize() {
const width = window.innerWidth;
const height = window.innerHeight;
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, width, height);
}
}
window.addEventListener('resize', resize);
resize();
let startTime = Date.now();
function render() {
let elapsed = (Date.now() - startTime) / 1000.0;
gl.uniform2f(uResolution, canvas.width, canvas.height);
gl.uniform1f(uTime, elapsed);
gl.uniform2f(uMouse, mouseX, mouseY);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
})();
</script>
` }}
/>
</div>
);
}Next.js App Router Component (use client)
'use client';
import React from 'react';
export default function WebGLRaymarchingShaderBackground() {
return (
<div
className="w-full h-full relative overflow-hidden"
>
<style dangerouslySetInnerHTML={{ __html: `
#canvas-webgl-raymarching {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
` }} />
{/* HTML Structure */}
<div
className="w-full h-full"
dangerouslySetInnerHTML={{ __html: `
<canvas id="canvas-webgl-raymarching"></canvas>
<script>
(function() {
const canvas = document.getElementById('canvas-webgl-raymarching');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) return;
const vertices = new Float32Array([
-1, -1, 1, -1, -1, 1,
-1, 1, 1, -1, 1, 1
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
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(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vsSource = \`
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
\`;
const fsSource = \`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
mat3 rotationMatrix(vec3 axis, float angle) {
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat3(
oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c
);
}
float sdSphere(vec3 p, float s) {
return length(p) - s;
}
float map(vec3 p, float time) {
vec3 q = p;
q = rotationMatrix(vec3(1.0, 0.5, 0.2), time * 0.5) * q;
float d1 = sdSphere(q, 1.0);
float wave = sin(q.x * 3.0 + time * 2.0) * cos(q.y * 3.0 + time * 1.5) * sin(q.z * 3.0 + time) * 0.15;
return d1 + wave;
}
vec3 getNormal(vec3 p, float time) {
vec2 e = vec2(0.001, 0.0);
float d = map(p, time);
vec3 n = d - vec3(
map(p - e.xyy, time),
map(p - e.yxy, time),
map(p - e.yyx, time)
);
return normalize(n);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
vec2 mouse = (u_mouse - 0.5 * u_resolution.xy) / u_resolution.y;
vec3 ro = vec3(0.0, 0.0, -3.0);
vec3 rd = normalize(vec3(p, 1.0));
mat3 camRot = rotationMatrix(vec3(0.0, 1.0, 0.0), mouse.x * 1.5) * rotationMatrix(vec3(1.0, 0.0, 0.0), -mouse.y * 1.5);
ro = camRot * ro;
rd = camRot * rd;
float t = 0.0;
float maxT = 10.0;
int hit = 0;
vec3 pos = vec3(0.0);
for (int i = 0; i < 40; ++i) {
pos = ro + rd * t;
float d = map(pos, u_time);
if (d < 0.001) {
hit = 1;
break;
}
t += d;
if (t > maxT) break;
}
vec3 col = vec3(0.0);
if (hit == 1) {
vec3 normal = getNormal(pos, u_time);
vec3 lightPos = vec3(2.0, 4.0, -3.0);
vec3 lightDir = normalize(lightPos - pos);
float diff = max(dot(normal, lightDir), 0.0);
vec3 viewDir = normalize(ro - pos);
vec3 reflectDir = reflect(-lightDir, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 16.0);
vec3 baseColor = 0.5 + 0.5 * cos(u_time * 0.3 + pos.xyx + vec3(0.0, 2.0, 4.0));
col = baseColor * (diff * 0.8 + 0.2) + vec3(spec * 0.5);
float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 4.0);
col += vec3(0.3, 0.8, 1.0) * fresnel * 0.6;
} else {
col = mix(vec3(0.02, 0.01, 0.05), vec3(0.08, 0.03, 0.15), uv.y);
float glow = 0.02 / (length(p - vec2(0.2, 0.2)) + 0.05);
col += vec3(0.2, 0.5, 1.0) * glow * 0.3;
}
gl_FragColor = vec4(col, 1.0);
}
\`;
const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
if (!vs || !fs) return;
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
gl.useProgram(program);
const positionLoc = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
const uResolution = gl.getUniformLocation(program, 'u_resolution');
const uTime = gl.getUniformLocation(program, 'u_time');
const uMouse = gl.getUniformLocation(program, 'u_mouse');
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = canvas.height - e.clientY;
});
function resize() {
const width = window.innerWidth;
const height = window.innerHeight;
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, width, height);
}
}
window.addEventListener('resize', resize);
resize();
let startTime = Date.now();
function render() {
let elapsed = (Date.now() - startTime) / 1000.0;
gl.uniform2f(uResolution, canvas.width, canvas.height);
gl.uniform1f(uTime, elapsed);
gl.uniform2f(uMouse, mouseX, mouseY);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
})();
</script>
` }}
/>
</div>
);
}Raw CSS Stylesheet Snippet
#canvas-webgl-raymarching {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}