feat: interleaved buffers example (not yet working)

Author: bhouston

src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl

@@ -1,13 +1,9 @@
 precision highp float;
 
-uniform samplerCube cubeMap;
-
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
+varying vec3 v_color;
 
 void main() {
 
-  vec3 reflectDir = reflect( normalize( v_viewPosition ),normalize(v_viewNormal) );
-  gl_FragColor = textureCube(cubeMap, reflectDir);
+  gl_FragColor = vec4(v_color, 1.0);
 
 }

src/examples/gettingstarted/6_interleavedBuffers/index.ts

@@ -1,63 +1,29 @@
-import { icosahedron } from "../../../lib/geometry/primitives/Polyhedrons";
-import { fetchImage } from "../../../lib/io/loaders/Image";
+import { Float32Attribute } from "../../../lib/geometry/Attribute";
+import { Geometry } from "../../../lib/geometry/Geometry";
+import { convertToInterleavedGeometry } from "../../../lib/geometry/Geometry.Functions";
 import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
-import { Euler } from "../../../lib/math/Euler";
-import { Matrix4 } from "../../../lib/math/Matrix4";
-import {
-  makeMatrix4Perspective,
-  makeMatrix4RotationFromEuler,
-  makeMatrix4Translation,
-} from "../../../lib/math/Matrix4.Functions";
-import { Vector3 } from "../../../lib/math/Vector3";
 import { BufferGeometry } from "../../../lib/renderers/webgl2/buffers/BufferGeometry";
-import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl2/DepthTestState";
 import { Program } from "../../../lib/renderers/webgl2/programs/Program";
 import { RenderingContext } from "../../../lib/renderers/webgl2/RenderingContext";
-import { TexImage2D } from "../../../lib/renderers/webgl2/textures/TexImage2D";
-import { CubeTexture } from "../../../lib/textures/CubeTexture";
 import fragmentSourceCode from "./fragment.glsl";
 import vertexSourceCode from "./vertex.glsl";
 
-async function init(): Promise<null> {
-  const geometry = icosahedron(0.75, 3);
-  const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
-  const cubeTexture = new CubeTexture([
-    await fetchImage("/assets/textures/cube/pisa/px.png"),
-    await fetchImage("/assets/textures/cube/pisa/nx.png"),
-    await fetchImage("/assets/textures/cube/pisa/py.png"),
-    await fetchImage("/assets/textures/cube/pisa/ny.png"),
-    await fetchImage("/assets/textures/cube/pisa/pz.png"),
-    await fetchImage("/assets/textures/cube/pisa/nz.png"),
-  ]);
+let geometry = new Geometry();
+geometry.attributes["position"] = new Float32Attribute([0, 0.5, 0.5, -0.5, -0.5, -0.5], 2);
+geometry.attributes["color"] = new Float32Attribute([1, 0, 0, 0, 1, 0, 0, 0, 1], 3);
 
-  const context = new RenderingContext();
-  const canvasFramebuffer = context.canvasFramebuffer;
-  document.body.appendChild(canvasFramebuffer.canvas);
+console.log("geometry", geometry);
+geometry = convertToInterleavedGeometry(geometry);
+console.log("interleaved", geometry);
 
-  const program = new Program(context, material);
-  const uniforms = {
-    localToWorld: new Matrix4(),
-    worldToView: makeMatrix4Translation(new Matrix4(), new Vector3(0, 0, -1)),
-    viewToScreen: makeMatrix4Perspective(new Matrix4(), -0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
-    cubeMap: new TexImage2D(context, cubeTexture),
-  };
-  const bufferGeometry = new BufferGeometry(context, geometry);
-  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
 
-  function animate(): void {
-    requestAnimationFrame(animate);
+const context = new RenderingContext();
+const canvasFramebuffer = context.canvasFramebuffer;
+document.body.appendChild(canvasFramebuffer.canvas);
 
-    const now = Date.now();
-    uniforms.localToWorld = makeMatrix4RotationFromEuler(
-      uniforms.localToWorld,
-      new Euler(now * 0.0001, now * 0.00033, now * 0.000077),
-    );
-    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
-  }
+const bufferGeometry = new BufferGeometry(context, geometry);
+const program = new Program(context, material);
+const uniforms = {};
 
-  animate();
-
-  return null;
-}
-
-init();
+canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry);

src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl

@@ -1,17 +1,12 @@
-attribute vec3 position;
-attribute vec3 normal;
+attribute vec2 position;
+attribute vec3 color;
 
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
-
-uniform mat4 localToWorld;
-uniform mat4 worldToView;
-uniform mat4 viewToScreen;
+varying vec3 v_color;
 
 void main() {
 
-  v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0.0 ) ).xyz );
-  v_viewPosition = ( worldToView * localToWorld * vec4( position, 1.0 ) ).xyz;
-  gl_Position = viewToScreen * vec4( v_viewPosition, 1.0 );
+  v_color = color;
+
+  gl_Position = vec4( position.x, position.y, 0.5, 1.0 );
 
 }

src/lib/geometry/Attribute.ts

@@ -24,7 +24,7 @@ export class Attribute {
     if (this.vertexStride < 0) {
       this.vertexStride = this.bytesPerVertex;
     }
-    this.count = this.attributeData.arrayBuffer.byteLength / this.bytesPerVertex;
+    this.count = this.attributeData.arrayBuffer.byteLength / this.vertexStride;
     // this.minExtent = minExtent;
     // this.maxExtent = maxExtent;
   }

src/lib/geometry/Geometry.Functions.ts

@@ -17,12 +17,13 @@ function copyBytesUsingStride(
   for (let v = 0; v < vertexCount; v++) {
     const sourceOffset = v * bytesPerVertex;
     const destOffset = v * byteStridePerVertex + attributeOffset;
+    console.log(sourceOffset, "->", destOffset, "length: ", bytesPerVertex);
     for (let i = 0; i < bytesPerVertex; i++) {
       destBytes[destOffset + i] = sourceBytes[sourceOffset + i];
     }
   }
 }
-export function convertToInterleavedBuffer(geometry: Geometry): Geometry {
+export function convertToInterleavedGeometry(geometry: Geometry): Geometry {
   let byteStridePerVertex = 0;
   let vertexCount = 0;
   for (const name in geometry.attributes) {
@@ -33,7 +34,7 @@ export function convertToInterleavedBuffer(geometry: Geometry): Geometry {
     }
   }
   const interleavedArray = new ArrayBuffer(byteStridePerVertex * vertexCount);
-  const interleavedData = new AttributeData(interleavedArray, 0, -1, byteStridePerVertex);
+  const interleavedData = new AttributeData(interleavedArray);
 
   const interleavedGeometry = new Geometry();
   interleavedGeometry.indices = geometry.indices;
@@ -52,15 +53,15 @@ export function convertToInterleavedBuffer(geometry: Geometry): Geometry {
 
       interleavedGeometry.attributes[name] = new Attribute(
         interleavedData,
-        byteOffset,
-        attribute.componentType,
         attribute.componentsPerVertex,
-        vertexCount,
+        attribute.componentType,
+        byteStridePerVertex,
+        byteOffset,
       );
       byteOffset += attribute.bytesPerVertex;
     }
   }
-  return geometry;
+  return interleavedGeometry;
 }
 
 export function computeVertexNormals(geometry: Geometry): void {