subzey/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="a"></canvas>
	<script>
const gl = a.getContext('webgl2');
const program = gl.createProgram();

const vShader = gl.createShader(gl.VERTEX_SHADER);
const fShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(vShader, `#version 300 es
out vec4 p; // "varying" is now "out" in vertex shaders

void main() {
	p = gl_Position = vec4(
		gl_VertexID == 2 ? 3 : -1,
		gl_VertexID == 1 ? 3 : -1,
		0,
		1
	);
	// gl_VertexID | gl_Position
	// 0             (-1, -1, 0, 1)
	// 1             ( 3, -1, 0, 1)
	// 2             (-1,  3, 0, 1)
}`);

gl.shaderSource(fShader, `#version 300 es
uniform lowp float r;
in lowp vec4 p;  // "varying" is now "in" in fragment shaders
out lowp vec4 c; // "gl_FragColor" is now just an "out" value with any name

// OR you can still set the default precision, like this:
// ==========
// precision lowp float;
// uniform float r;
// in vec4 p;
// out vec4 c;
// ==========

void main() {
	c = vec4(
		p.x / 2.0 + 0.5,
		p.y / 2.0 + 0.5,
		cos(p.x + p.y - r * 3.0) / 2.0 + 0.5,
		1
	);
}`);

gl.compileShader(vShader);
gl.compileShader(fShader);

gl.attachShader(program, vShader);
gl.attachShader(program, fShader);

gl.linkProgram(program)
gl.useProgram(program);

console.log('vertex shader:', gl.getShaderInfoLog(vShader) || 'OK');
console.log('fragment shader:', gl.getShaderInfoLog(fShader) || 'OK');
console.log('program:', gl.getProgramInfoLog(program) || 'OK');

setInterval(_ => {
	gl.uniform1f(
		gl.getUniformLocation(program, 'r'),
		performance.now() / 1e3
	);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
}, 16);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<canvas id="a"></canvas>
	<script>
	const gl = a.getContext('webgl2');
	const program = gl.createProgram();

	const vShader = gl.createShader(gl.VERTEX_SHADER);
	const fShader = gl.createShader(gl.FRAGMENT_SHADER);

	gl.shaderSource(vShader, `#version 300 es
	out vec4 p; // "varying" is now "out" in vertex shaders

	void main() {
	p = gl_Position = vec4(
	gl_VertexID == 2 ? 3 : -1,
	gl_VertexID == 1 ? 3 : -1,
	0,
	1
	);
	// gl_VertexID \| gl_Position
	// 0 (-1, -1, 0, 1)
	// 1 ( 3, -1, 0, 1)
	// 2 (-1, 3, 0, 1)
	}`);

	gl.shaderSource(fShader, `#version 300 es
	uniform lowp float r;
	in lowp vec4 p; // "varying" is now "in" in fragment shaders
	out lowp vec4 c; // "gl_FragColor" is now just an "out" value with any name

	// OR you can still set the default precision, like this:
	// ==========
	// precision lowp float;
	// uniform float r;
	// in vec4 p;
	// out vec4 c;
	// ==========

	void main() {
	c = vec4(
	p.x / 2.0 + 0.5,
	p.y / 2.0 + 0.5,
	cos(p.x + p.y - r * 3.0) / 2.0 + 0.5,
	1
	);
	}`);

	gl.compileShader(vShader);
	gl.compileShader(fShader);

	gl.attachShader(program, vShader);
	gl.attachShader(program, fShader);

	gl.linkProgram(program)
	gl.useProgram(program);

	console.log('vertex shader:', gl.getShaderInfoLog(vShader) \|\| 'OK');
	console.log('fragment shader:', gl.getShaderInfoLog(fShader) \|\| 'OK');
	console.log('program:', gl.getProgramInfoLog(program) \|\| 'OK');

	setInterval(_ => {
	gl.uniform1f(
	gl.getUniformLocation(program, 'r'),
	performance.now() / 1e3
	);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	}, 16);
	</script>
	</body>
	</html>