From a9f7e2c470c36b54c65023a2fd426274b69ca519 Mon Sep 17 00:00:00 2001 From: Keanu Taufan Date: Sat, 21 Sep 2024 13:25:29 +0700 Subject: [PATCH] Basic outline draw --- package.json | 3 +- src/data/letter_outline.json | 11 +++++ src/geometry/Shape2D.ts | 1 + src/main.ts | 58 +++++++++++++++---------- src/{shaderUtils.ts => utils/shader.ts} | 0 src/{vaoUtils.ts => utils/vao.ts} | 0 src/verts/triangle.json | 3 -- 7 files changed, 50 insertions(+), 26 deletions(-) create mode 100644 src/data/letter_outline.json rename src/{shaderUtils.ts => utils/shader.ts} (100%) rename src/{vaoUtils.ts => utils/vao.ts} (100%) delete mode 100644 src/verts/triangle.json diff --git a/package.json b/package.json index 2a0a32d..7232a8f 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,6 @@ "devDependencies": { "typescript": "^5.5.3", "vite": "^5.4.1" - } + }, + "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1" } diff --git a/src/data/letter_outline.json b/src/data/letter_outline.json new file mode 100644 index 0000000..b800cbe --- /dev/null +++ b/src/data/letter_outline.json @@ -0,0 +1,11 @@ +{ + "k": { + "vertices": [-1.0, -1.0, -1.0, 1.0, -1.0, 0.0, 0.05, 1.0, -1.0, 0.0, 0.05, -1.0] + }, + "e": { + "vertices": [-1.0, -1.0, -1.0, 1.0, 0.0, -1.0, -1.0, -1.0, 0.0, 0.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0] + }, + "a": { + "vertices": [-0.8, -1.0, 0.0, 1.0, 0.0, 1.0, 0.8, -1.0, -0.4, 0.0, 0.4, 0.0] + } +} \ No newline at end of file diff --git a/src/geometry/Shape2D.ts b/src/geometry/Shape2D.ts index 18c124b..93eebcd 100644 --- a/src/geometry/Shape2D.ts +++ b/src/geometry/Shape2D.ts @@ -7,5 +7,6 @@ export default class Shape2D { public color: [number, number, number], public verticesCount: number, public vao: WebGLVertexArrayObject, + public renderType: GLenum, ) {} } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 229de28..149c231 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,13 +3,13 @@ import "./style.css"; import vsSource from "./shaders/basic.vert?raw"; import fsSource from "./shaders/basic.frag?raw"; -import { loadBuffer, loadProgram, loadShader } from "./shaderUtils"; +import { loadBuffer, loadProgram, loadShader } from "./utils/shader"; import Vector2D from "./geometry/Vector2D"; -import { createBasicVao } from "./vaoUtils"; +import { createBasicVao } from "./utils/vao"; import Shape2D from "./geometry/Shape2D"; -import triangle from "./verts/triangle.json"; +import outline from "./data/letter_outline.json"; function render() { const canvas = document.querySelector("#canvas"); @@ -32,13 +32,22 @@ function render() { throw new Error("Failed to get attrib location for vertexPosition"); } - const triangleVerts = new Float32Array(triangle.vertices); - const triangleBuffer = loadBuffer(gl, triangleVerts); - const triangleVao = createBasicVao(gl, triangleBuffer, vertexPositionAttribLocation); + const kVerts = new Float32Array(outline.k.vertices); + const kBuffer = loadBuffer(gl, kVerts); + const kVao = createBasicVao(gl, kBuffer, vertexPositionAttribLocation); + + const eVerts = new Float32Array(outline.e.vertices); + const eBuffer = loadBuffer(gl, eVerts); + const eVao = createBasicVao(gl, eBuffer, vertexPositionAttribLocation); + + const aVerts = new Float32Array(outline.a.vertices); + const aBuffer = loadBuffer(gl, aVerts); + const aVao = createBasicVao(gl, aBuffer, vertexPositionAttribLocation); const shapes: Shape2D[] = [ - new Shape2D(new Vector2D(300, 300), 200, [0.22745, 0.35294, 0.25098], 3, triangleVao), - new Shape2D(new Vector2D(800, 300), 100, [0.22745, 0.35294, 0.25098], 3, triangleVao), + new Shape2D(new Vector2D(300, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], kVerts.length / 2, kVao, gl.LINES), + new Shape2D(new Vector2D(600, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], eVerts.length / 2, eVao, gl.LINES), + new Shape2D(new Vector2D(900, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], aVerts.length / 2, aVao, gl.LINES), ] const fragmentColorUniform = gl.getUniformLocation(program, "uColor"); @@ -54,24 +63,29 @@ function render() { `); } - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; - gl.clearColor(0.1, 0.1, 0.1, 1.0); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.viewport(0, 0, canvas.width, canvas.height); - gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height); - shapes.forEach((shape) => { - gl.uniform3f(fragmentColorUniform, shape.color[0], shape.color[1], shape.color[2]); - gl.uniform2f(shapeLocationUniform, shape.position.x, shape.position.y); - gl.uniform1f(shapeScaleUniform, shape.scale); - - gl.bindVertexArray(shape.vao); - gl.drawArrays(gl.TRIANGLES, 0, shape.verticesCount); - }) + const frame = () => { + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + gl.clearColor(0.1, 0.1, 0.1, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.viewport(0, 0, canvas.width, canvas.height); + gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height); + shapes.forEach((shape) => { + gl.uniform3f(fragmentColorUniform, shape.color[0], shape.color[1], shape.color[2]); + gl.uniform2f(shapeLocationUniform, shape.position.x, shape.position.y); + gl.uniform1f(shapeScaleUniform, shape.scale); + + gl.bindVertexArray(shape.vao); + gl.drawArrays(shape.renderType, 0, shape.verticesCount); + }); + } + + requestAnimationFrame(frame); } + try { render(); } catch (err) { diff --git a/src/shaderUtils.ts b/src/utils/shader.ts similarity index 100% rename from src/shaderUtils.ts rename to src/utils/shader.ts diff --git a/src/vaoUtils.ts b/src/utils/vao.ts similarity index 100% rename from src/vaoUtils.ts rename to src/utils/vao.ts diff --git a/src/verts/triangle.json b/src/verts/triangle.json deleted file mode 100644 index 38e6875..0000000 --- a/src/verts/triangle.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "vertices": [0.0, -1, 0.6, 1, -0.6, 1] -} \ No newline at end of file