zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Added transparency to debug rendering

Browse Source
This commit is contained in:
Lucas Dower 2022-05-14 17:41:27 +01:00
parent eea08adf16
commit e8f1f45716
5 changed files with 57 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
res/shaders/debug_fragment.fs
View File

@ -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;
}

4
res/shaders/debug_vertex.vs
View File

@ -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;

71
src/geometry.ts
View File

@ -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) {

14
src/renderer.ts
View File

@ -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);

11
src/util.ts
View File

@ -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);