diff options
| author | pommicket <pommicket@gmail.com> | 2023-06-14 11:51:05 +0100 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2023-06-14 11:51:05 +0100 |
| commit | ed5d2abddffcf72d28dd427d08efc50d4b1456d9 (patch) | |
| tree | a05a2b516b56ad464538491747b2aef3d0a113f5 | |
drawing a rectangle
| -rw-r--r-- | fractiform.js | 97 | ||||
| -rw-r--r-- | index.html | 45 |
2 files changed, 142 insertions, 0 deletions
diff --git a/fractiform.js b/fractiform.js new file mode 100644 index 0000000..eac29a6 --- /dev/null +++ b/fractiform.js @@ -0,0 +1,97 @@ +'use strict'; + +let gl; +let program; +let vertex_buffer; +let prev_frame_time = 0.0; +let canvas; + +window.addEventListener('load', startup); + +function startup() { + canvas = document.getElementById('canvas'); + gl = canvas.getContext('webgl'); + + program = gl.createProgram(); + let vertex_shader = compile_shader('main vertex', gl.VERTEX_SHADER, ` +attribute vec2 v_pos; +void main() { + gl_Position = vec4(v_pos, 0.0, 1.0); +} +`); + let fragment_shader = compile_shader('main fragment', gl.FRAGMENT_SHADER, ` +#ifdef GL_ES +precision highp float; +#endif + +uniform vec4 u_color; + +void main() { + gl_FragColor = u_color; +} +`); + if (vertex_shader == null || fragment_shader == null) { + return; + } + + gl.attachShader(program, vertex_shader); + gl.attachShader(program, fragment_shader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + show_error('Error linking shader program:\n' + gl.getProgramInfoLog(program)); + } + + vertex_buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, + ]), gl.STATIC_DRAW); + + frame(0.0); +} + +function frame(delta) { + let width = canvas.offsetWidth; + let height = canvas.offsetHeight; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + gl.clearColor(0.8, 0.9, 1.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.useProgram(program); + + gl.uniform4fv(gl.getUniformLocation(program, 'u_color'), [0.1, 0.7, 0.2, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); + + let v_pos = gl.getAttribLocation(program, 'v_pos'); + gl.enableVertexAttribArray(v_pos); + gl.vertexAttribPointer(v_pos, 2, gl.FLOAT, false, 0, 0); + gl.drawArrays(gl.TRIANGLES, 0, 6); + + requestAnimationFrame((t) => { + let delta = t - prev_frame_time; + prev_frame_time = t; + frame(delta); + }); +} + + +function compile_shader(name, type, source) { + let shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + show_error('Error compiling shader ' + name + ':\n' + + gl.getShaderInfoLog(shader)); + return null; + } + return shader; +} + +function show_error(error) { + // TODO: display error in browser + console.log(error); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c6dfd3 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + +<head> + <title>fractiform</title> + <style> + body { + font-family: sans-serif; + background-color: #111; + margin: 0; + padding: 0; + overflow: hidden; + } + + #canvas { + width: 100vw; + height: 100vh; + } + </style> + <meta charset="utf-8"> + <meta content="width=device-width,initial-scale=1" name="viewport"> +</head> + +<body> +<script id="vertex-shader" type="x-shader/x-vertex"> + attribute vec2 aVertexPosition; + void main() { + gl_Position = vec4(aVertexPosition, 0.0, 1.0); + } +</script> +<script id="fragment-shader" type="x-shader/x-fragment"> + uniform vec4 uGlobalColor; + + void main() { + gl_FragColor = uGlobalColor; + } +</script> +<script src="fractiform.js" type="text/javascript"></script> + +<canvas id="canvas"> + Your browser doesn't support <canvas><br> + This page won't work for you. +</canvas> +</body> +</html> |