<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebGL Shader</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: black;
height: 100%;
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported');
}
const vertexShaderSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision highp float;
uniform vec2 r;
uniform float t;
void main() {
vec2 FC = gl_FragCoord.xy;
vec2 p = (FC * 2.0 - r) / r.y;
float a = atan(p.y, p.x);
float l = length(p);
vec3 c = vec3(0.0);
for(float i = 0.0; i < 15.0; i++) {
float m = sin(a * 10.0 + t * (2.0 + i * 0.5) - l * 20.0) * 0.05;
c += vec3(2.0, i * 0.1, 1.0) * 0.0008 / abs(l - 0.5 - m + i * 0.015);
}
gl_FragColor = vec4(c, 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)) {
alert('Shader compile error: ' + gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function createProgram(gl, vsSrc, fsSrc) {
const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert('Program link error: ' + gl.getProgramInfoLog(program));
return null;
}
return program;
}
const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
gl.useProgram(program);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1,
]),
gl.STATIC_DRAW
);
const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
const rLocation = gl.getUniformLocation(program, 'r');
const tLocation = gl.getUniformLocation(program, 't');
function resize() {
const dpr = window.devicePixelRatio || 1;
const width = Math.floor(canvas.clientWidth * dpr);
const height = Math.floor(canvas.clientHeight * dpr);
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, width, height);
}
}
function render(time) {
resize();
gl.uniform2f(rLocation, canvas.width, canvas.height);
gl.uniform1f(tLocation, time * 0.001);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</body>
</html>
Comments
Post a Comment