Rewrote mesh rendering, disabled debug views

src/app_context.ts

@@ -136,11 +136,20 @@ export class AppContext {
         const uiElements = this._ui.layout.import.elements;
         const filePath = uiElements.input.getCachedValue();
 
-        const importer = new ObjImporter();
+        TIME_START('Load Mesh');
-        importer.parseFile(filePath);
+        {
-        this._loadedMesh = importer.toMesh();
+            const importer = new ObjImporter();
-        this._loadedMesh.processMesh();
+            importer.parseFile(filePath);
-        Renderer.Get.useMesh(this._loadedMesh);
+            this._loadedMesh = importer.toMesh();
+            this._loadedMesh.processMesh();
+        }
+        TIME_END('Load Mesh');
+
+        TIME_START('Render Mesh');
+        {
+            Renderer.Get.useMesh(this._loadedMesh);
+        }
+        TIME_END('Render Mesh');
     }
 
     private _simplify() {

src/renderer.ts

@@ -44,13 +44,14 @@ export class Renderer {
     private _modelsAvailable: number;
 
     private _materialBuffers: Array<{
-        buffer: RenderBuffer,
+        buffer: twgl.BufferInfo,
         material: (SolidMaterial | (TexturedMaterial & { texture: WebGLTexture }))
+        numElements: number,
     }>;
     public _voxelBuffer?: twgl.BufferInfo;
     public _voxelBufferRaw?: {[attribute: string]: { numComponents: number, data: Float32Array | Uint32Array }};
     private _blockBuffer?: twgl.BufferInfo;
-    private _debugBuffers: { [meshType: string]: { [bufferComponent: string]: RenderBuffer } };
+    // private _debugBuffers: { [meshType: string]: { [bufferComponent: string]: RenderBuffer } };
     private _axisBuffer: RenderBuffer;
 
     private _isGridComponentEnabled: { [bufferComponent: string]: boolean };
@@ -70,11 +71,13 @@ export class Renderer {
         this._modelsAvailable = 0;
         this._materialBuffers = [];
 
+        /*
         this._debugBuffers = {};
         this._debugBuffers[MeshType.None] = {};
         this._debugBuffers[MeshType.TriangleMesh] = {};
         this._debugBuffers[MeshType.VoxelMesh] = {};
         this._debugBuffers[MeshType.BlockMesh] = {};
+        */
 
         this._isGridComponentEnabled = {};
         this._isGridComponentEnabled[EDebugBufferComponents.Grid] = false;
@@ -142,6 +145,17 @@ export class Renderer {
         EventManager.Get.broadcast(EAppEvent.onDevViewEnabledChanged, isEnabled);
     }
 
+    public clearMesh() {
+        EventManager.Get.broadcast(EAppEvent.onModelAvailableChanged, MeshType.TriangleMesh, false);
+        EventManager.Get.broadcast(EAppEvent.onModelAvailableChanged, MeshType.VoxelMesh, false);
+        EventManager.Get.broadcast(EAppEvent.onModelAvailableChanged, MeshType.BlockMesh, false);
+
+        this._materialBuffers = [];
+
+        this._modelsAvailable = 0;
+        this.setModelToUse(MeshType.None);
+    }
+
     public useMesh(mesh: Mesh) {
         EventManager.Get.broadcast(EAppEvent.onModelAvailableChanged, MeshType.TriangleMesh, false);
         EventManager.Get.broadcast(EAppEvent.onModelAvailableChanged, MeshType.VoxelMesh, false);
@@ -149,32 +163,78 @@ export class Renderer {
         
         LOG('Using mesh');
         this._materialBuffers = [];
-        
+
-        for (const materialName in mesh.getMaterials()) {
+        const materialTriangleCount = new Map<string, number>();
-            const materialBuffer = new RenderBuffer([
+        for (let triIndex = 0; triIndex < mesh.getTriangleCount(); ++triIndex) {
-                { name: 'position', numComponents: 3 },
+            const materialName = mesh.getMaterialByTriangle(triIndex);
-                { name: 'texcoord', numComponents: 2 },
+            const triangleCount = materialTriangleCount.get(materialName) ?? 0;
-                { name: 'normal', numComponents: 3 },
+            materialTriangleCount.set(materialName, triangleCount + 1);
-            ]);
+        }
-            
+
+        materialTriangleCount.forEach((triangleCount: number, materialName: string) => {
+            const materialBuffer = {
+                'position': {
+                    numComponents: 3,
+                    data: new Float32Array(triangleCount * 3 * 3),
+                },
+                'texcoord': {
+                    numComponents: 2,
+                    data: new Float32Array(triangleCount * 3 * 2),
+                },
+                'normal': {
+                    numComponents: 3,
+                    data: new Float32Array(triangleCount * 3 * 3),
+                },
+                'indices': {
+                    numComponents: 3,
+                    data: new Uint32Array(triangleCount * 3),
+                },
+            };
+
+            let insertIndex = 0;
             for (let triIndex = 0; triIndex < mesh.getTriangleCount(); ++triIndex) {
                 const material = mesh.getMaterialByTriangle(triIndex);
                 if (material === materialName) {
-                    const uvTri = mesh.getUVTriangle(triIndex);
+                    const uiTriangle = mesh.getUVTriangle(triIndex);
-                    const triGeom = GeometryTemplates.getTriangleBufferData(uvTri);
+                    // const tmp = GeometryTemplates.getTriangleBufferData(uiTriangle);
-                    materialBuffer.add(triGeom);
+
+                    materialBuffer.position.data.set(uiTriangle.v0.toArray(), insertIndex * 9 + 0);
+                    materialBuffer.position.data.set(uiTriangle.v1.toArray(), insertIndex * 9 + 3);
+                    materialBuffer.position.data.set(uiTriangle.v2.toArray(), insertIndex * 9 + 6);
+
+                    materialBuffer.texcoord.data.set([uiTriangle.uv0.u, uiTriangle.uv0.v], insertIndex * 6 + 0);
+                    materialBuffer.texcoord.data.set([uiTriangle.uv1.u, uiTriangle.uv1.v], insertIndex * 6 + 2);
+                    materialBuffer.texcoord.data.set([uiTriangle.uv2.u, uiTriangle.uv2.v], insertIndex * 6 + 4);
+
+                    const normalArray = uiTriangle.getNormal().toArray();
+                    materialBuffer.normal.data.set(normalArray, insertIndex * 9 + 0);
+                    materialBuffer.normal.data.set(normalArray, insertIndex * 9 + 3);
+                    materialBuffer.normal.data.set(normalArray, insertIndex * 9 + 6);
+
+                    // materialBuffer.position.data.set(tmp.custom['position'], insertIndex * 9);
+                    // materialBuffer.normal.data.set(tmp.custom['normal'], insertIndex * 9);
+                    // materialBuffer.texcoord.data.set(tmp.custom['texcoord'], insertIndex * 6);
+                    
+                    materialBuffer.indices.data.set([
+                        insertIndex * 3 + 0,
+                        insertIndex * 3 + 1,
+                        insertIndex * 3 + 2,
+                    ], insertIndex * 3);
+
+                    ++insertIndex;
                 }
             }
-
+            
             const material = mesh.getMaterialByName(materialName);
             if (material.type === MaterialType.solid) {
                 this._materialBuffers.push({
-                    buffer: materialBuffer,
+                    buffer: twgl.createBufferInfoFromArrays(this._gl, materialBuffer),
                     material: material,
+                    numElements: materialBuffer.indices.data.length,
                 });
             } else {
                 this._materialBuffers.push({
-                    buffer: materialBuffer,
+                    buffer: twgl.createBufferInfoFromArrays(this._gl, materialBuffer),
                     material: {
                         type: MaterialType.textured,
                         path: material.path,
@@ -183,15 +243,18 @@ export class Renderer {
                             mag: this._gl.LINEAR,
                         }),
                     },
+                    numElements: materialBuffer.indices.data.length,
                 });
             }
-        }
+        });
-        
+
+        /*
         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).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;
         this.setModelToUse(MeshType.TriangleMesh);
@@ -218,8 +281,10 @@ 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).toRGBA(), this._voxelSize);
+        */
         
         this._modelsAvailable = 2;
         this.setModelToUse(MeshType.VoxelMesh);
@@ -239,7 +304,9 @@ export class Renderer {
             mag: this._gl.NEAREST,
         });
         
+        /*
         this._debugBuffers[MeshType.BlockMesh][EDebugBufferComponents.Grid] = this._debugBuffers[MeshType.VoxelMesh][EDebugBufferComponents.Grid];
+        */
         
         this._modelsAvailable = 3;
         this.setModelToUse(MeshType.BlockMesh);
@@ -250,6 +317,7 @@ export class Renderer {
     // /////////////////////////////////////////////////////////////////////////
 
     private _drawDebug() {
+        /*
         const debugComponents = [EDebugBufferComponents.Grid, EDebugBufferComponents.Wireframe, EDebugBufferComponents.Normals, EDebugBufferComponents.Dev];
         for (const debugComp of debugComponents) {
             if (this._isGridComponentEnabled[debugComp]) {
@@ -274,19 +342,20 @@ export class Renderer {
             });
             this._gl.enable(this._gl.DEPTH_TEST);
         }
+        */
     }
 
     private _drawMesh() {
         for (const materialBuffer of this._materialBuffers) {
             if (materialBuffer.material.type === MaterialType.textured) {
-                this._drawRegister(materialBuffer.buffer, ShaderManager.Get.textureTriProgram, {
+                this._drawMeshBuffer(materialBuffer.buffer, materialBuffer.numElements, ShaderManager.Get.textureTriProgram, {
                     u_lightWorldPos: ArcballCamera.Get.getCameraPosition(0.0, 0.0),
                     u_worldViewProjection: ArcballCamera.Get.getWorldViewProjection(),
                     u_worldInverseTranspose: ArcballCamera.Get.getWorldInverseTranspose(),
                     u_texture: materialBuffer.material.texture,
                 });
             } else {
-                this._drawRegister(materialBuffer.buffer, ShaderManager.Get.solidTriProgram, {
+                this._drawMeshBuffer(materialBuffer.buffer, materialBuffer.numElements, ShaderManager.Get.solidTriProgram, {
                     u_lightWorldPos: ArcballCamera.Get.getCameraPosition(0.0, 0.0),
                     u_worldViewProjection: ArcballCamera.Get.getWorldViewProjection(),
                     u_worldInverseTranspose: ArcballCamera.Get.getWorldInverseTranspose(),
@@ -330,8 +399,8 @@ export class Renderer {
 
     // /////////////////////////////////////////////////////////////////////////
 
-    private _drawRegister(register: RenderBuffer, shaderProgram: twgl.ProgramInfo, uniforms: any) {
+    private _drawMeshBuffer(register: twgl.BufferInfo, numElements: number, shaderProgram: twgl.ProgramInfo, uniforms: any) {
-        this._drawBuffer(this._gl.TRIANGLES, register.getWebGLBuffer(), shaderProgram, uniforms);
+        this._drawBuffer(this._gl.TRIANGLES, { buffer: register, numElements: numElements }, shaderProgram, uniforms);
     }
 
     public setModelToUse(meshType: MeshType) {

src/ui/layout.ts

@@ -266,6 +266,7 @@ export class UI {
         groups: {
             'debug': {
                 elements: {
+                    /*
                     'wireframe': new ToolbarItemElement('wireframe', () => {
                         Renderer.Get.toggleIsWireframeEnabled();
                     }, EAppEvent.onWireframeEnabledChanged, (...args: any[]) => {
@@ -294,8 +295,9 @@ export class UI {
                         const devBufferAvailable = Renderer.Get.getModelsAvailable() >= 2;
                         return modelUsed === MeshType.TriangleMesh && devBufferAvailable;
                     }),
+                    */
                 },
-                elementsOrder: ['wireframe', 'normals', 'dev'],
+                elementsOrder: [], // ['wireframe', 'normals', 'dev'],
             },
         },
         groupsOrder: ['debug'],