From e8f1f45716a5b12aa6ee58040fc9b9fab3aa75a6 Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Sat, 14 May 2022 17:41:27 +0100 Subject: [PATCH] Added transparency to debug rendering --- res/shaders/debug_fragment.fs | 4 +- res/shaders/debug_vertex.vs | 4 +- src/geometry.ts | 71 +++++++++++++++++------------------ src/renderer.ts | 14 +++---- src/util.ts | 11 ++++++ 5 files changed, 57 insertions(+), 47 deletions(-) diff --git a/res/shaders/debug_fragment.fs b/res/shaders/debug_fragment.fs index c63aa21..4be62b6 100644 --- a/res/shaders/debug_fragment.fs +++ b/res/shaders/debug_fragment.fs @@ -1,7 +1,7 @@ precision mediump float; -varying vec3 v_colour; +varying vec4 v_colour; void main() { - gl_FragColor = vec4(v_colour, 1.0); + gl_FragColor = v_colour; } diff --git a/res/shaders/debug_vertex.vs b/res/shaders/debug_vertex.vs index bd3644a..af10803 100644 --- a/res/shaders/debug_vertex.vs +++ b/res/shaders/debug_vertex.vs @@ -3,9 +3,9 @@ precision mediump float; uniform mat4 u_worldViewProjection; attribute vec3 position; -attribute vec3 colour; +attribute vec4 colour; -varying vec3 v_colour; +varying vec4 v_colour; void main() { v_colour = colour; diff --git a/src/geometry.ts b/src/geometry.ts index 2554ce6..9b5d8ea 100644 --- a/src/geometry.ts +++ b/src/geometry.ts @@ -2,7 +2,7 @@ import * as twgl from 'twgl.js'; import { Triangle, UVTriangle } from './triangle'; import { Vector3 } from './vector'; import { AttributeData, MergeAttributeData, RenderBuffer } from './buffer'; -import { ASSERT, Bounds, RGB } from './util'; +import { ASSERT, Bounds, RGB, RGBA } from './util'; import { Mesh } from './mesh'; import { VoxelMesh } from './voxel_mesh'; @@ -62,7 +62,7 @@ export class GeometryTemplates { } export class DebugGeometryTemplates { - public static cross(centre: Vector3, radius: number, colour: RGB): AttributeData { + public static cross(centre: Vector3, radius: number, colour: RGBA): AttributeData { return { indices: new Uint32Array([0, 1, 2, 3, 4, 5]), custom: { @@ -75,18 +75,17 @@ export class DebugGeometryTemplates { centre.x, centre.y, centre.z - radius, ], colour: [ - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, ], }, }; } - public static line(start: Vector3, end: Vector3, colour: RGB): AttributeData { + public static line(start: Vector3, end: Vector3, colour: RGBA): AttributeData { return { indices: new Uint32Array([0, 1]), custom: { @@ -95,21 +94,21 @@ export class DebugGeometryTemplates { end.x, end.y, end.z, ], colour: [ - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, ], }, }; } - public static cube(centre: Vector3, size: number, colour: RGB): AttributeData { + public static cube(centre: Vector3, size: number, colour: RGBA): AttributeData { const min = Vector3.sub(centre, size/2); const max = Vector3.add(centre, size/2); const bounds = new Bounds(min, max); return this.bounds(bounds, colour); } - public static bounds(bounds: Bounds, colour: RGB): AttributeData { + public static bounds(bounds: Bounds, colour: RGBA): AttributeData { return { indices: new Uint32Array([ 0, 1, @@ -137,20 +136,20 @@ export class DebugGeometryTemplates { bounds.min.x, bounds.max.y, bounds.max.z, ], colour: [ - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, - colour.r, colour.g, colour.b, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, + colour.r, colour.g, colour.b, colour.a, ], }, }; } - public static circle(centre: Vector3, normal: Vector3, radius: number, colour: RGB, steps: number = 8): AttributeData { + public static circle(centre: Vector3, normal: Vector3, radius: number, colour: RGBA, steps: number = 8): AttributeData { const indices = []; const positions = []; const colours = []; @@ -160,7 +159,7 @@ export class DebugGeometryTemplates { const point = circlePoints[i]; positions.push(point.x, point.y, point.z); indices.push(i, (i+1) % steps); - colours.push(colour.r, colour.g, colour.b); + colours.push(colour.r, colour.g, colour.b, colour.a); } return { @@ -172,7 +171,7 @@ export class DebugGeometryTemplates { }; } - public static cone(tipCentre: Vector3, tipHeight: number, normal: Vector3, radius: number, colour: RGB, quarterSteps: number): AttributeData { + public static cone(tipCentre: Vector3, tipHeight: number, normal: Vector3, radius: number, colour: RGBA, quarterSteps: number): AttributeData { const indices = []; const positions = []; const colours = []; @@ -186,11 +185,11 @@ export class DebugGeometryTemplates { const point = circlePoints[i]; positions.push(point.x, point.y, point.z); indices.push(i, (i+1) % steps); - colours.push(colour.r, colour.g, colour.b); + colours.push(colour.r, colour.g, colour.b, colour.a); } // Add cone tip positions.push(tipCentre.x, tipCentre.y, tipCentre.z); - colours.push(colour.r, colour.g, colour.b); + colours.push(colour.r, colour.g, colour.b, colour.a); const tipIndex = steps; // Add cone lines for (let i = 0; i < 4; ++i) { @@ -207,7 +206,7 @@ export class DebugGeometryTemplates { }; } - public static arrow(start: Vector3, end: Vector3, colour: RGB): AttributeData { + public static arrow(start: Vector3, end: Vector3, colour: RGBA): AttributeData { const line = DebugGeometryTemplates.line(start, end, colour); const lineLength = Vector3.sub(end, start).magnitude(); const coneHeight = 0.15 * lineLength; @@ -222,10 +221,10 @@ export class DebugGeometryTemplates { public static grid(dimensions: Vector3, spacing?: number): RenderBuffer { const buffer = new RenderBuffer([ { name: 'position', numComponents: 3 }, - { name: 'colour', numComponents: 3 }, + { name: 'colour', numComponents: 4 }, ]); - const COLOUR_MINOR = new RGB(0.15, 0.15, 0.15); - const COLOUR_MAJOR = new RGB(0.3, 0.3, 0.3); + const COLOUR_MINOR: RGBA = new RGB(0.5, 0.5, 0.5).toRGBA(0.3); + const COLOUR_MAJOR: RGBA = RGB.white.toRGBA(0.3); buffer.add(DebugGeometryTemplates.line( new Vector3(-dimensions.x / 2, 0, -dimensions.z / 2), @@ -273,10 +272,10 @@ export class DebugGeometryTemplates { return buffer; } - public static meshWireframe(mesh: Mesh, colour: RGB): RenderBuffer { + public static meshWireframe(mesh: Mesh, colour: RGBA): RenderBuffer { const buffer = new RenderBuffer([ { name: 'position', numComponents: 3 }, - { name: 'colour', numComponents: 3 }, + { name: 'colour', numComponents: 4 }, ]); let v0: Vector3 = new Vector3(0, 0, 0); @@ -298,10 +297,10 @@ export class DebugGeometryTemplates { return buffer; } - public static voxelMeshWireframe(voxelMesh: VoxelMesh, colour: RGB, voxelSize: number): RenderBuffer { + public static voxelMeshWireframe(voxelMesh: VoxelMesh, colour: RGBA, voxelSize: number): RenderBuffer { const buffer = new RenderBuffer([ { name: 'position', numComponents: 3 }, - { name: 'colour', numComponents: 3 }, + { name: 'colour', numComponents: 4 }, ]); const dimensions = voxelMesh.getBounds().getDimensions(); @@ -319,10 +318,10 @@ export class DebugGeometryTemplates { return buffer; } - public static meshNormals(mesh: Mesh, colour: RGB): RenderBuffer { + public static meshNormals(mesh: Mesh, colour: RGBA): RenderBuffer { const buffer = new RenderBuffer([ { name: 'position', numComponents: 3 }, - { name: 'colour', numComponents: 3 }, + { name: 'colour', numComponents: 4 }, ]); for (let triIndex = 0; triIndex < mesh.getTriangleCount(); ++triIndex) { diff --git a/src/renderer.ts b/src/renderer.ts index 6cbe5a2..4d74f6b 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -82,11 +82,11 @@ export class Renderer { this._axisBuffer = new RenderBuffer([ { name: 'position', numComponents: 3 }, - { name: 'colour', numComponents: 3 }, + { name: 'colour', numComponents: 4 }, ]); - this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(1, 0, 0), new RGB(0.96, 0.21, 0.32))); - this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(0, 1, 0), new RGB(0.44, 0.64, 0.11))); - this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(0, 0, 1), new RGB(0.18, 0.52, 0.89))); + this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(1, 0, 0), new RGB(0.96, 0.21, 0.32).toRGBA())); + this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(0, 1, 0), new RGB(0.44, 0.64, 0.11).toRGBA())); + this._axisBuffer.add(DebugGeometryTemplates.arrow(new Vector3(0, 0, 0), new Vector3(0, 0, 1), new RGB(0.18, 0.52, 0.89).toRGBA())); } public update() { @@ -189,8 +189,8 @@ export class Renderer { const dimensions = mesh.getBounds().getDimensions(); this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Grid] = DebugGeometryTemplates.grid(dimensions); - this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Wireframe] = DebugGeometryTemplates.meshWireframe(mesh, new RGB(0.18, 0.52, 0.89)); - this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Normals] = DebugGeometryTemplates.meshNormals(mesh, new RGB(0.89, 0.52, 0.18)); + this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Wireframe] = DebugGeometryTemplates.meshWireframe(mesh, new RGB(0.18, 0.52, 0.89).toRGBA()); + this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Normals] = DebugGeometryTemplates.meshNormals(mesh, new RGB(0.89, 0.52, 0.18).toRGBA()); delete this._debugBuffers[MeshType.TriangleMesh][EDebugBufferComponents.Dev]; this._modelsAvailable = 1; @@ -219,7 +219,7 @@ export class Renderer { dimensions.add(1); this._debugBuffers[MeshType.VoxelMesh][EDebugBufferComponents.Grid] = DebugGeometryTemplates.grid(Vector3.mulScalar(dimensions, voxelSize), voxelSize); - this._debugBuffers[MeshType.VoxelMesh][EDebugBufferComponents.Wireframe] = DebugGeometryTemplates.voxelMeshWireframe(voxelMesh, new RGB(0.18, 0.52, 0.89), this._voxelSize); + this._debugBuffers[MeshType.VoxelMesh][EDebugBufferComponents.Wireframe] = DebugGeometryTemplates.voxelMeshWireframe(voxelMesh, new RGB(0.18, 0.52, 0.89).toRGBA(), this._voxelSize); this._modelsAvailable = 2; this.setModelToUse(MeshType.VoxelMesh); diff --git a/src/util.ts b/src/util.ts index c52a2fd..9da3b63 100644 --- a/src/util.ts +++ b/src/util.ts @@ -29,6 +29,13 @@ export enum ColourSpace { } /* eslint-enable */ +export type RGBA = { + r: number, + g: number, + b: number, + a: number +} + export class RGB { public r: number; public g: number; @@ -63,6 +70,10 @@ export class RGB { return [this.r, this.g, this.b]; } + public toRGBA(a: number = 1.0): RGBA { + return { r: this.r, g: this.g, b: this.b, a: a }; + } + public static distance(a: RGB, b: RGB, colourSpace: ColourSpace): number { if (colourSpace === ColourSpace.LAB) { const aLAB = convert.rgb.lab(a.r * 255, a.g * 255, a.b * 255);