feat: Add hello-triangle example

packages/examples/src/hello-triangle/fs.glsl

@@ -0,0 +1,11 @@
+#version 300 es
+
+precision mediump float;
+
+in vec3 v_color;
+
+out vec4 frag_color;
+
+void main() {
+    frag_color = vec4(v_color, 1.0f);
+}

packages/examples/src/hello-triangle/index.ts

@@ -0,0 +1,42 @@
+import * as twgl from 'twgl.js';
+import vs from './vs.glsl?raw';
+import fs from './fs.glsl?raw';
+
+export default function (gl: WebGLRenderingContext) {
+  const arrays = {
+    a_position: {
+      numComponents: 3,
+      data: [0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0],
+    },
+    a_color: {
+      numComponents: 3,
+      data: [1, 0, 0, 0, 1, 0, 0, 0, 1],
+    },
+    indices: {
+      numComponents: 3,
+      data: [0, 1, 2],
+    },
+  };
+  const programInfo = twgl.createProgramInfo(
+    gl,
+    [vs, fs],
+    ['a_position', 'a_color']
+  );
+  const vertexArrayInfo = twgl.createVertexArrayInfo(
+    gl,
+    programInfo,
+    twgl.createBufferInfoFromArrays(gl, arrays)
+  );
+
+  return (_time: number) => {
+    twgl.resizeCanvasToDisplaySize(gl.canvas as HTMLCanvasElement);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.enable(gl.DEPTH_TEST);
+    gl.enable(gl.CULL_FACE);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.useProgram(programInfo.program);
+    twgl.setBuffersAndAttributes(gl, programInfo, vertexArrayInfo);
+    twgl.drawBufferInfo(gl, vertexArrayInfo);
+  };
+}

packages/examples/src/hello-triangle/vs.glsl

@@ -0,0 +1,11 @@
+#version 300 es
+
+in vec3 a_position;
+in vec3 a_color;
+
+out vec3 v_color;
+
+void main() {
+    v_color = a_color;
+    gl_Position = vec4(a_position, 1.0f);
+}

packages/examples/src/main.ts

@@ -1,5 +1,5 @@
 import './style.css';
 import { render } from 'engine';
-import app from './twgl-cube';
+import app from './hello-triangle';
 
 render(app, document.querySelector('#app')!);