From f4c862057d85cef80b7084b44ad5f764d37ad403 Mon Sep 17 00:00:00 2001 From: Ben Houston Date: Sun, 21 Jun 2020 07:29:46 -0400 Subject: [PATCH] feat: interleaved buffers example (not yet working) --- .../6_interleavedBuffers/fragment.glsl | 8 +-- .../6_interleavedBuffers/index.ts | 68 +++++-------------- .../6_interleavedBuffers/vertex.glsl | 17 ++--- src/lib/geometry/Attribute.ts | 2 +- src/lib/geometry/Geometry.Functions.ts | 13 ++-- 5 files changed, 33 insertions(+), 75 deletions(-) diff --git a/src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl b/src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl index 82b51045..d78e0993 100644 --- a/src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl +++ b/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); } diff --git a/src/examples/gettingstarted/6_interleavedBuffers/index.ts b/src/examples/gettingstarted/6_interleavedBuffers/index.ts index 2f27bb8f..35e98fac 100644 --- a/src/examples/gettingstarted/6_interleavedBuffers/index.ts +++ b/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 { - 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); diff --git a/src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl b/src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl index be34388d..60f31bc6 100644 --- a/src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl +++ b/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 ); } diff --git a/src/lib/geometry/Attribute.ts b/src/lib/geometry/Attribute.ts index b87bd885..0f5d878b 100644 --- a/src/lib/geometry/Attribute.ts +++ b/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; } diff --git a/src/lib/geometry/Geometry.Functions.ts b/src/lib/geometry/Geometry.Functions.ts index 62ebee37..2eb9be2f 100644 --- a/src/lib/geometry/Geometry.Functions.ts +++ b/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 {