π index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="main.js"></script>
</html>π style.css
body {
margin: 0;
padding: 0;
background-color: rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
}π app.js
// Set up the HTML canvas
const canvas = document.getElementById("canvas");
canvas.width = 1000;
canvas.height = 1000;
// get the webgl context
const gl = canvas.getContext("webgl2");
// Clear the canvas color and set a new one
gl.clearColor(0.2, 0.7, 0.8, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
// Create an array of triangle (x,y )coordinates
const triangleCoords = [0.0, -1.0, 0.0, 1.0, 1.0, 1.0];
// Add vertex and fragment shader code
const vertexShader = `#version 300 es
precision mediump float;
in vec2 position;
void main() {
gl_Position = vec4(position.x, position.y, 0.0, 1.0); //x,y,z,w
}
`;
const fragmentShader = `#version 300 es
precision mediump float;
out vec4 color;
void main () {
color = vec4(0.0, 0.0, 0.0, 1.0); //r,g,b,a
}
`;
// Process and compile the shader code
const vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShader);
gl.compileShader(vShader);
if (!gl.getShaderParameter(vShader, gl.COMPILE_STATUS)) {
console.log(gl.getShaderInfoLog(vertexShader));
}
const fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShader);
gl.compileShader(fShader);
if (!gl.getShaderParameter(fShader, gl.COMPILE_STATUS)) {
console.log(gl.getShaderInfoLog(fragmentShader));
}
// Create a webGL program
const program = gl.createProgram();
// Link the GPU information to the CPU
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const info = gl.getProgramInfoLog(program);
throw "Could not compile WebGL program. \n\n${info}";
}
// Create and bind buffers to the webGL program
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(triangleCoords),
gl.STATIC_DRAW,
);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Use the program
gl.useProgram(program);
// Link the GPU information to the CPU
const position = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(position);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(position, 2, gl.FLOAT, gl.FALSE, 0, 0);
// render triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
Coding Art with Blender / oF / Processing / p5.js / nannou