diff --git a/examples/package.json b/examples/package.json index 2ae1e9fc242f8643775d192685c0032f05451335..97ac9167df7ec7c190b859b2da0759c4b040f450 100644 --- a/examples/package.json +++ b/examples/package.json @@ -1,4 +1,5 @@ { + "name": "webgl-renderer-examples", "private": true, "scripts": { "dev": "vite", @@ -12,6 +13,6 @@ }, "dependencies": { "gl-matrix": "^3.4.3", - "@feng3d/webgl-renderer": "^0.0.1" + "@feng3d/webgl": "0.0.2" } } \ No newline at end of file diff --git a/examples/src/WebGL2Samples/buffer_copy.ts b/examples/src/WebGL2Samples/buffer_copy.ts index 867d0637f623a7d8f6706b784ae3b0dd1624ca8d..ae77b535f00a9ccecd00a062f407351d25899b85 100644 --- a/examples/src/WebGL2Samples/buffer_copy.ts +++ b/examples/src/WebGL2Samples/buffer_copy.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, ICopyBuffer, IProgram, IRenderPass, IRenderingContext, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLCopyBuffer, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,10 +11,11 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // -- Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init Program - const program: IProgram = { + const program: IGLRenderPipeline = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES" }, }; @@ -28,38 +29,38 @@ import { getShaderSource } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBufferSrc: IVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; + const vertexPosBufferSrc: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; - const vertexPosBufferDst: IVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array(vertices.length), usage: "STATIC_DRAW" }; + const vertexPosBufferDst: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array(vertices.length), usage: "STATIC_DRAW" }; - const cb: ICopyBuffer = { + const cb: IGLCopyBuffer = { read: vertexPosBufferSrc, write: vertexPosBufferDst, readOffset: 0, writeOffset: 0, size: vertices.length * Float32Array.BYTES_PER_ELEMENT }; - WebGL.runCopyBuffer(rc, cb); + webgl.runCopyBuffer(cb); // -- Init Vertex Array - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { pos: { buffer: vertexPosBufferDst, numComponents: 2 }, } }; // -- Render - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [{ pipeline: program, vertexArray, drawArrays: { vertexCount: 6 }, }] }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // -- Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBufferSrc); - WebGL.deleteBuffer(rc, vertexPosBufferDst); - WebGL.deleteProgram(rc, program); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBufferSrc); + webgl.deleteBuffer(vertexPosBufferDst); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); })(); diff --git a/examples/src/WebGL2Samples/buffer_uniform.ts b/examples/src/WebGL2Samples/buffer_uniform.ts index 5ced19304d6c6e0545a1bda372d945c040957463..2dcfe8a8718038ef7279cced4d392bda4e7f625e 100644 --- a/examples/src/WebGL2Samples/buffer_uniform.ts +++ b/examples/src/WebGL2Samples/buffer_uniform.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IIndexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, IUniformBuffer, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLIndexBuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLUniformBuffer, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,10 +11,11 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // --Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init Program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -23,7 +24,7 @@ import { getShaderSource } from "./utility"; 0, 1, 2, 2, 3, 0 ]); - const elementBuffer: IIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: elementData, usage: "STATIC_DRAW" }; + const elementBuffer: IGLIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: elementData, usage: "STATIC_DRAW" }; //vec3 position, vec3 normal, vec4 color const vertices = new Float32Array([ @@ -32,7 +33,7 @@ import { getShaderSource } from "./utility"; 1.0, 1.0, -0.5, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, -1.0, 1.0, -0.5, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0 ]); - const vertexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; + const vertexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; //mat4 P, mat4 MV, mat3 Mnormal const transforms = new Float32Array([ @@ -52,12 +53,12 @@ import { getShaderSource } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const uniformPerDrawBuffer: IUniformBuffer = { target: "UNIFORM_BUFFER", data: transforms, usage: "DYNAMIC_DRAW" }; + const uniformPerDrawBuffer: IGLUniformBuffer = { target: "UNIFORM_BUFFER", data: transforms, usage: "DYNAMIC_DRAW" }; const lightPos = new Float32Array([ 0.0, 0.0, 0.0, 0.0, ]); - const uniformPerPassBuffer: IUniformBuffer = { target: "UNIFORM_BUFFER", data: lightPos, usage: "DYNAMIC_DRAW" }; + const uniformPerPassBuffer: IGLUniformBuffer = { target: "UNIFORM_BUFFER", data: lightPos, usage: "DYNAMIC_DRAW" }; //vec3 ambient, diffuse, specular, float shininess const material = new Float32Array([ @@ -65,10 +66,10 @@ import { getShaderSource } from "./utility"; 0.5, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 4.0, ]); - const uniformPerSceneBuffer: IUniformBuffer = { target: "UNIFORM_BUFFER", data: material, usage: "STATIC_DRAW" }; + const uniformPerSceneBuffer: IGLUniformBuffer = { target: "UNIFORM_BUFFER", data: material, usage: "STATIC_DRAW" }; // -- Init Vertex Array - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexBuffer, numComponents: 3, vertexSize: 40, offset: 0 }, normal: { buffer: vertexBuffer, numComponents: 3, vertexSize: 40, offset: 12 }, @@ -77,7 +78,7 @@ import { getShaderSource } from "./utility"; index: elementBuffer, }; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: { @@ -88,8 +89,8 @@ import { getShaderSource } from "./utility"; drawElements: { indexCount: 6, firstIndex: 0 } }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; @@ -106,7 +107,7 @@ import { getShaderSource } from "./utility"; lightPos[1] = Math.sin(6 * uTime); uniformPerPassBuffer.writeBuffers = [{ bufferOffset: 0, data: lightPos }]; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/draw_image_space.ts b/examples/src/WebGL2Samples/draw_image_space.ts index 1a2d9e52d59ece53e414aec6ae519711180f2b93..f7b9d6624eb50e15dae8e33f6d06ea84578bdfe1 100644 --- a/examples/src/WebGL2Samples/draw_image_space.ts +++ b/examples/src/WebGL2Samples/draw_image_space.ts @@ -1,5 +1,4 @@ -import { IRenderObject, IRenderPipeline, ISampler, ITexture, WebGL } from "@feng3d/webgl-renderer"; -import { IRenderingContext } from "../../../src/data/IRenderingContext"; +import { IGLRenderingContext, IGLRenderObject, IGLRenderPipeline, IGLSampler, IGLTexture, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,9 +7,12 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); + loadImage("../../assets/img/Di-3d.png", (img) => { - const texture: ITexture = { + const texture: IGLTexture = { sources: [{ source: img }], pixelStore: { unpackFlipY: false, @@ -19,12 +21,12 @@ loadImage("../../assets/img/Di-3d.png", (img) => format: "RGBA", type: "UNSIGNED_BYTE", }; - const sampler: ISampler = { + const sampler: IGLSampler = { minFilter: "LINEAR", magFilter: "LINEAR", }; - const program: IRenderPipeline = { + const program: IGLRenderPipeline = { primitive: { topology: "TRIANGLES" }, vertex: { code: getShaderSource("vs") @@ -35,22 +37,17 @@ loadImage("../../assets/img/Di-3d.png", (img) => } }; - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { uniforms: { diffuse: { texture, sampler }, u_imageSize: [canvas.width / 2, canvas.height / 2], }, - // drawVertex: { firstVertex: 0, vertexCount: 3 }, + drawArrays: { firstVertex: 0, vertexCount: 3 }, pipeline: program }; - canvas.width = Math.min(window.innerWidth, window.innerHeight); - canvas.height = canvas.width; - - const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; - - WebGL.runRenderPass(renderingContext, { - passDescriptor: { + webgl.runRenderPass({ + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -60,8 +57,8 @@ loadImage("../../assets/img/Di-3d.png", (img) => }); // Delete WebGL resources - WebGL.deleteTexture(renderingContext, texture); - WebGL.deleteProgram(renderingContext, program); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); }); function loadImage(url: string, onload: (img: HTMLImageElement) => void) diff --git a/examples/src/WebGL2Samples/draw_instanced.ts b/examples/src/WebGL2Samples/draw_instanced.ts index 0c4177913a7bc35967ebff557ec0bf1f837f31f0..6f10f68b10b7b1a31d3ab67fd9b758e4909363e2 100644 --- a/examples/src/WebGL2Samples/draw_instanced.ts +++ b/examples/src/WebGL2Samples/draw_instanced.ts @@ -1,5 +1,4 @@ -import { IVertexBuffer, IBuffer, IRenderObject, IRenderPipeline, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; -import { IRenderingContext } from "../../../src/data/IRenderingContext"; +import { IGLRenderingContext, IGLRenderObject, IGLRenderPipeline, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,33 +7,36 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const vertexPosBuffer: IVertexBuffer = { +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); + +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([-0.3, -0.5, 0.3, -0.5, 0.0, 0.5]) }; -const vertexColorBuffer: IVertexBuffer = { +const vertexColorBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([ 1.0, 0.5, 0.0, 0.0, 0.5, 1.0]) }; -const program: IRenderPipeline = { +const program: IGLRenderPipeline = { primitive: { topology: "TRIANGLES" }, vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs"), targets: [{ blend: {} }] } }; -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { pos: { buffer: vertexPosBuffer, numComponents: 2 }, color: { buffer: vertexColorBuffer, numComponents: 3, divisor: 1 }, }, }; -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { vertexArray, uniforms: {}, drawArrays: { instanceCount: 2 }, @@ -44,10 +46,8 @@ const renderObject: IRenderObject = { canvas.width = window.innerWidth; canvas.height = window.innerHeight; -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; - -WebGL.runRenderPass(renderingContext, { - passDescriptor: { +webgl.runRenderPass({ + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -57,7 +57,7 @@ WebGL.runRenderPass(renderingContext, { }); // -- Delete WebGL resources -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteBuffer(renderingContext, vertexColorBuffer); -WebGL.deleteProgram(renderingContext, program); -WebGL.deleteVertexArray(renderingContext, vertexArray); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(vertexColorBuffer); +webgl.deleteProgram(program); +webgl.deleteVertexArray(vertexArray); diff --git a/examples/src/WebGL2Samples/draw_instanced_ubo.ts b/examples/src/WebGL2Samples/draw_instanced_ubo.ts index c5b9cffcc301cdea495c85a801789cc1d825a783..08fe2e62cf802fbc05f917d527f78cfb1effb25f 100644 --- a/examples/src/WebGL2Samples/draw_instanced_ubo.ts +++ b/examples/src/WebGL2Samples/draw_instanced_ubo.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IProgram, IRenderPass, IRenderingContext, IUniformBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLUniformBuffer, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,10 +7,11 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Init program -const program: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; // -- Init Buffer const vertices = new Float32Array([ @@ -18,7 +19,7 @@ const vertices = new Float32Array([ 0.3, -0.5, 0.0, 0.5 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; const transforms = new Float32Array([ 1.0, 0.0, 0.0, 0.0, @@ -31,17 +32,17 @@ const transforms = new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.5, 0.0, 0.0, 1.0 ]); -const uniformTransformBuffer: IUniformBuffer = { target: "UNIFORM_BUFFER", data: transforms, usage: "DYNAMIC_DRAW" }; +const uniformTransformBuffer: IGLUniformBuffer = { target: "UNIFORM_BUFFER", data: transforms, usage: "DYNAMIC_DRAW" }; const materials = new Float32Array([ 1.0, 0.5, 0.0, 1.0, 0.0, 0.5, 1.0, 1.0 ]); -const uniformMaterialBuffer: IUniformBuffer = { target: "UNIFORM_BUFFER", data: materials, usage: "STATIC_DRAW" }; +const uniformMaterialBuffer: IGLUniformBuffer = { target: "UNIFORM_BUFFER", data: materials, usage: "STATIC_DRAW" }; // -- Render -const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0, 0, 0, 1], loadOp: "clear" }] }, +const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0, 0, 0, 1], loadOp: "clear" }] }, renderObjects: [{ pipeline: program, vertexArray: { @@ -56,10 +57,10 @@ const rp: IRenderPass = { drawArrays: { vertexCount: 3, instanceCount: 2 }, }] }; -WebGL.runRenderPass(rc, rp); +webgl.runRenderPass(rp); // -- Delete WebGL resources -WebGL.deleteBuffer(rc, vertexPosBuffer); -WebGL.deleteBuffer(rc, uniformTransformBuffer); -WebGL.deleteBuffer(rc, uniformMaterialBuffer); -WebGL.deleteProgram(rc, program); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(uniformTransformBuffer); +webgl.deleteBuffer(uniformMaterialBuffer); +webgl.deleteProgram(program); diff --git a/examples/src/WebGL2Samples/draw_primitive_restart.ts b/examples/src/WebGL2Samples/draw_primitive_restart.ts index 678435c4c4cc3c5183e1e51598aa867e061481ef..7e1da9b2d8fbbaaf79639889e076e95af9c2107f 100644 --- a/examples/src/WebGL2Samples/draw_primitive_restart.ts +++ b/examples/src/WebGL2Samples/draw_primitive_restart.ts @@ -1,5 +1,4 @@ -import { IVertexBuffer, IBuffer, IIndexBuffer, IRenderObject, IRenderPipeline, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; -import { IRenderingContext } from "../../../src/data/IRenderingContext"; +import { IGLIndexBuffer, IGLRenderingContext, IGLRenderObject, IGLRenderPipeline, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,11 +7,14 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); + // https://www.khronos.org/registry/webgl/specs/latest/2.0/#5.18 // WebGL 2.0 behaves as though PRIMITIVE_RESTART_FIXED_INDEX were always enabled. const MAX_UNSIGNED_SHORT = 65535; -const vertexPosBuffer: IVertexBuffer = { +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([ -1.0, -1.0, @@ -22,14 +24,14 @@ const vertexPosBuffer: IVertexBuffer = { ]) }; -const vertexElementBuffer: IIndexBuffer = { +const vertexElementBuffer: IGLIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array([ 0, 1, 2, MAX_UNSIGNED_SHORT, 2, 3, 1 ]) }; -const program: IRenderPipeline = { +const program: IGLRenderPipeline = { primitive: { topology: "TRIANGLE_STRIP" }, vertex: { code: getShaderSource("vs") @@ -40,24 +42,22 @@ const program: IRenderPipeline = { } }; -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { pos: { buffer: vertexPosBuffer, numComponents: 2 }, }, index: vertexElementBuffer, }; -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { vertexArray, uniforms: {}, - drawArrays: { instanceCount: 2 }, + drawElements: { instanceCount: 2 }, pipeline: program, }; -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; - -WebGL.runRenderPass(renderingContext, { - passDescriptor: { +webgl.runRenderPass({ + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -67,7 +67,7 @@ WebGL.runRenderPass(renderingContext, { }); // -- Delete WebGL resources -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteBuffer(renderingContext, vertexElementBuffer); -WebGL.deleteProgram(renderingContext, program); -WebGL.deleteVertexArray(renderingContext, vertexArray); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(vertexElementBuffer); +webgl.deleteProgram(program); +webgl.deleteVertexArray(vertexArray); diff --git a/examples/src/WebGL2Samples/draw_range_arrays.ts b/examples/src/WebGL2Samples/draw_range_arrays.ts index 6b9fc83f8da3fcdc1b9a0098c8c13adb773eecf1..75fa1c6a36e2baaae7a19a3c2c6d376d13f2fb5a 100644 --- a/examples/src/WebGL2Samples/draw_range_arrays.ts +++ b/examples/src/WebGL2Samples/draw_range_arrays.ts @@ -1,5 +1,4 @@ -import { IVertexBuffer, IBuffer, IRenderObject, IRenderPass, IRenderPipeline, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; -import { IRenderingContext } from "../../../src/data/IRenderingContext"; +import { IGLRenderingContext, IGLRenderObject, IGLRenderPass, IGLRenderPipeline, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,7 +7,10 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const vertexPosBuffer: IVertexBuffer = { +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); + +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([ -0.8, -0.8, @@ -26,7 +28,7 @@ const vertexPosBuffer: IVertexBuffer = { ]) }; -const pipeline: IRenderPipeline = { +const pipeline: IGLRenderPipeline = { primitive: { topology: "TRIANGLE_STRIP" }, vertex: { code: getShaderSource("vs") @@ -37,20 +39,20 @@ const pipeline: IRenderPipeline = { } }; -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, } }; const vertexCount = 12; -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { vertexArray, pipeline, }; -const data: IRenderPass = { - passDescriptor: { +const data: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -70,10 +72,8 @@ const data: IRenderPass = { ], }; -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; - -WebGL.runRenderPass(renderingContext, data); +webgl.runRenderPass(data); -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteProgram(renderingContext, pipeline); -WebGL.deleteVertexArray(renderingContext, vertexArray); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteProgram(pipeline); +webgl.deleteVertexArray(vertexArray); diff --git a/examples/src/WebGL2Samples/fbo_blit.ts b/examples/src/WebGL2Samples/fbo_blit.ts index c76f11f4044b937609a0eee46551f8e1c8f71684..3b0a5533c6b4aa3f3d48497a81fc921ce92ff91b 100644 --- a/examples/src/WebGL2Samples/fbo_blit.ts +++ b/examples/src/WebGL2Samples/fbo_blit.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBlitFramebuffer, IBlitFramebufferItem, IBuffer, IPassDescriptor, IRenderObject, IRenderPass, IRenderPipeline, IRenderbuffer, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexAttributes, WebGL } from "@feng3d/webgl-renderer"; +import { IGLBlitFramebuffer, IGLBlitFramebufferItem, IGLRenderObject, IGLRenderPass, IGLRenderPassDescriptor, IGLRenderPipeline, IGLRenderbuffer, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexAttributes, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,9 +7,10 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const canvasContext: IRenderingContext = { canvasId: "glcanvas" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); -const program: IRenderPipeline = { +const program: IGLRenderPipeline = { primitive: { topology: "TRIANGLES" }, vertex: { code: getShaderSource("vs") @@ -20,7 +21,7 @@ const program: IRenderPipeline = { }, }; -const vertexPosBuffer: IVertexBuffer = { +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([ -1.0, -1.0, @@ -32,7 +33,7 @@ const vertexPosBuffer: IVertexBuffer = { ]), usage: "STATIC_DRAW", }; -const vertexTexBuffer: IVertexBuffer = { +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: new Float32Array([ 0.0, 1.0, @@ -45,7 +46,7 @@ const vertexTexBuffer: IVertexBuffer = { usage: "STATIC_DRAW", }; -const vertices: IVertexAttributes = { +const vertices: IGLVertexAttributes = { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, }; @@ -57,7 +58,7 @@ loadImage("../../assets/img/Di-3d.png", (image) => y: image.height }; - const textureDiffuse: ITexture = { + const textureDiffuse: IGLTexture = { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", @@ -66,33 +67,33 @@ loadImage("../../assets/img/Di-3d.png", (image) => }, sources: [{ source: image }], }; - const samplerDiffuse: ISampler = { + const samplerDiffuse: IGLSampler = { minFilter: "LINEAR", magFilter: "LINEAR", }; - const textureColorBuffer: ITexture = { + const textureColorBuffer: IGLTexture = { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y, border: 0 }], }; - const samplerColorBuffer: ISampler = { + const samplerColorBuffer: IGLSampler = { minFilter: "LINEAR", magFilter: "LINEAR", }; - const colorRenderbuffer: IRenderbuffer = { + const colorRenderbuffer: IGLRenderbuffer = { internalformat: "RGBA4", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y, }; - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices, }; - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: program, viewport: { x: 0, y: 0, width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }, vertexArray, @@ -109,8 +110,8 @@ loadImage("../../assets/img/Di-3d.png", (image) => }; // Render FBO - const fboRenderPass: IRenderPass = { - passDescriptor: { + const fboRenderPass: IGLRenderPass = { + descriptor: { colorAttachments: [{ view: colorRenderbuffer, clearValue: [0.3, 0.3, 0.3, 1.0] @@ -119,7 +120,7 @@ loadImage("../../assets/img/Di-3d.png", (image) => renderObjects: [renderObject], }; - const framebufferResolve: IPassDescriptor = { + const framebufferResolve: IGLRenderPassDescriptor = { colorAttachments: [{ view: { texture: textureColorBuffer, level: 0 }, clearValue: [0.7, 0.0, 0.0, 1.0] @@ -127,11 +128,11 @@ loadImage("../../assets/img/Di-3d.png", (image) => }; // - const renderPassResolve: IRenderPass = { - passDescriptor: framebufferResolve, + const renderPassResolve: IGLRenderPass = { + descriptor: framebufferResolve, }; - const blitFramebuffers: IBlitFramebufferItem[] = []; + const blitFramebuffers: IGLBlitFramebufferItem[] = []; const TILE = 4; const BORDER = 2; for (let j = 0; j < TILE; j++) @@ -154,13 +155,13 @@ loadImage("../../assets/img/Di-3d.png", (image) => } } - const blitFramebuffer: IBlitFramebuffer = { - read: fboRenderPass.passDescriptor, - draw: renderPassResolve.passDescriptor, + const blitFramebuffer: IGLBlitFramebuffer = { + read: fboRenderPass.descriptor, + draw: renderPassResolve.descriptor, blitFramebuffers, }; - const renderObject2: IRenderObject = { + const renderObject2: IGLRenderObject = { viewport: { x: 0, y: 0, width: canvas.width, height: canvas.height }, vertexArray, uniforms: { @@ -176,8 +177,8 @@ loadImage("../../assets/img/Di-3d.png", (image) => pipeline: program, }; - const renderPass2: IRenderPass = { - passDescriptor: { + const renderPass2: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -187,18 +188,18 @@ loadImage("../../assets/img/Di-3d.png", (image) => }; // 执行 - WebGL.runRenderPass(canvasContext, fboRenderPass); - WebGL.runBlitFramebuffer(canvasContext, blitFramebuffer); - WebGL.runRenderPass(canvasContext, renderPass2); + webgl.runRenderPass(fboRenderPass); + webgl.runBlitFramebuffer(blitFramebuffer); + webgl.runRenderPass(renderPass2); // Delete WebGL resources - WebGL.deleteFramebuffer(canvasContext, fboRenderPass.passDescriptor); - WebGL.deleteFramebuffer(canvasContext, framebufferResolve); - WebGL.deleteRenderbuffer(canvasContext, colorRenderbuffer); - WebGL.deleteBuffer(canvasContext, vertexPosBuffer); - WebGL.deleteBuffer(canvasContext, vertexTexBuffer); - WebGL.deleteTexture(canvasContext, textureDiffuse); - WebGL.deleteTexture(canvasContext, textureColorBuffer); - WebGL.deleteProgram(canvasContext, program); - WebGL.deleteVertexArray(canvasContext, vertexArray); + webgl.deleteFramebuffer(fboRenderPass.descriptor); + webgl.deleteFramebuffer(framebufferResolve); + webgl.deleteRenderbuffer(colorRenderbuffer); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(textureDiffuse); + webgl.deleteTexture(textureColorBuffer); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); }); diff --git a/examples/src/WebGL2Samples/fbo_multisample.ts b/examples/src/WebGL2Samples/fbo_multisample.ts index 74a5fb4a43bbe346086e04a64fe8ea19cee5366b..ec8686aa1949c412521c4e2f52a698fe32d1d816 100644 --- a/examples/src/WebGL2Samples/fbo_multisample.ts +++ b/examples/src/WebGL2Samples/fbo_multisample.ts @@ -1,5 +1,5 @@ +import { IGLBlitFramebuffer, IGLRenderPass, IGLRenderPassDescriptor, IGLRenderPipeline, IGLRenderbuffer, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IVertexBuffer, IBlitFramebuffer, IBuffer, IPassDescriptor, IRenderPass, IRenderPipeline, IRenderbuffer, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,7 +8,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const renderingContext: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(renderingContext); // -- Init program const PROGRAM = { @@ -17,7 +18,7 @@ const PROGRAM = { MAX: 2 }; -const programs: IRenderPipeline[] = [ +const programs: IGLRenderPipeline[] = [ { vertex: { code: getShaderSource("vs-render") }, fragment: { code: getShaderSource("fs-render") }, @@ -43,7 +44,7 @@ for (let i = 0; i < vertexCount; i++) } // -- Init buffers -const vertexDataBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data, usage: "STATIC_DRAW" }; +const vertexDataBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data, usage: "STATIC_DRAW" }; const positions = new Float32Array([ -1.0, -1.0, @@ -53,7 +54,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -63,7 +64,7 @@ const texCoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init Texture // used for draw framebuffer storage @@ -71,30 +72,31 @@ const FRAMEBUFFER_SIZE = { x: canvas.width, y: canvas.height }; -const texture: ITexture = { +const texture: IGLTexture = { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ level: 0, width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y, border: 0, pixels: null }], }; -const sampler: ISampler = { minFilter: "NEAREST", magFilter: "NEAREST" }; +const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST" }; // -- Init Frame Buffers const FRAMEBUFFER = { RENDERBUFFER: 0, COLORBUFFER: 1 }; -const colorRenderbuffer: IRenderbuffer = { samples: 4, internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; +const colorRenderbuffer: IGLRenderbuffer = { internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; -const framebuffers: IPassDescriptor[] = [ +const framebuffers: IGLRenderPassDescriptor[] = [ { colorAttachments: [{ view: colorRenderbuffer, clearValue: [0.0, 0.0, 0.0, 1.0] }], + multisample: 4 // 多重采样 }, { colorAttachments: [{ view: { texture, level: 0 }, clearValue: [0.0, 0.0, 0.0, 1.0] }], - }, + } ]; // -- Init VertexArray -const vertexArrays: IVertexArrayObject[] = [ +const vertexArrays: IGLVertexArrayObject[] = [ { vertices: { position: { buffer: vertexDataBuffer, numComponents: 2 } } }, @@ -111,8 +113,8 @@ const IDENTITY = mat4.create(); // -- Render // Pass 1 -const renderPass1: IRenderPass = { - passDescriptor: framebuffers[FRAMEBUFFER.RENDERBUFFER], +const renderPass1: IGLRenderPass = { + descriptor: framebuffers[FRAMEBUFFER.RENDERBUFFER], renderObjects: [{ pipeline: programs[PROGRAM.TEXTURE], vertexArray: vertexArrays[PROGRAM.TEXTURE], @@ -121,17 +123,17 @@ const renderPass1: IRenderPass = { }] }; -WebGL.runRenderPass(renderingContext, renderPass1); +webgl.runRenderPass(renderPass1); // Blit framebuffers, no Multisample texture 2d in WebGL 2 -const blitFramebuffer: IBlitFramebuffer = { +const blitFramebuffer: IGLBlitFramebuffer = { read: framebuffers[FRAMEBUFFER.RENDERBUFFER], draw: framebuffers[FRAMEBUFFER.COLORBUFFER], blitFramebuffers: [[0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y, 0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y, "COLOR_BUFFER_BIT", "NEAREST"]], }; -WebGL.runBlitFramebuffer(renderingContext, blitFramebuffer); +webgl.runBlitFramebuffer(blitFramebuffer); // Pass 2 @@ -140,8 +142,8 @@ vec3.set(scaleVector3, 8.0, 8.0, 8.0); const mvp = mat4.create(); mat4.scale(mvp, IDENTITY, scaleVector3); -const renderPass2: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, +const renderPass2: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ { pipeline: programs[PROGRAM.SPLASH], @@ -151,17 +153,17 @@ const renderPass2: IRenderPass = { } ], }; -WebGL.runRenderPass(renderingContext, renderPass2); +webgl.runRenderPass(renderPass2); // -- Delete WebGL resources -WebGL.deleteBuffer(renderingContext, vertexDataBuffer); -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteBuffer(renderingContext, vertexTexBuffer); -WebGL.deleteTexture(renderingContext, texture); -WebGL.deleteRenderbuffer(renderingContext, colorRenderbuffer); -WebGL.deleteFramebuffer(renderingContext, framebuffers[FRAMEBUFFER.RENDERBUFFER]); -WebGL.deleteFramebuffer(renderingContext, framebuffers[FRAMEBUFFER.COLORBUFFER]); -WebGL.deleteVertexArray(renderingContext, vertexArrays[PROGRAM.TEXTURE]); -WebGL.deleteVertexArray(renderingContext, vertexArrays[PROGRAM.SPLASH]); -WebGL.deleteProgram(renderingContext, programs[PROGRAM.TEXTURE]); -WebGL.deleteProgram(renderingContext, programs[PROGRAM.SPLASH]); +webgl.deleteBuffer(vertexDataBuffer); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(vertexTexBuffer); +webgl.deleteTexture(texture); +webgl.deleteRenderbuffer(colorRenderbuffer); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.RENDERBUFFER]); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.COLORBUFFER]); +webgl.deleteVertexArray(vertexArrays[PROGRAM.TEXTURE]); +webgl.deleteVertexArray(vertexArrays[PROGRAM.SPLASH]); +webgl.deleteProgram(programs[PROGRAM.TEXTURE]); +webgl.deleteProgram(programs[PROGRAM.SPLASH]); diff --git a/examples/src/WebGL2Samples/fbo_new_blend_equation.ts b/examples/src/WebGL2Samples/fbo_new_blend_equation.ts index 7a621c04f8b74cdb21096d24d66bd358a78327d6..4ae8383d888edc8d333b13f8ff4a7d38dc2981f1 100644 --- a/examples/src/WebGL2Samples/fbo_new_blend_equation.ts +++ b/examples/src/WebGL2Samples/fbo_new_blend_equation.ts @@ -1,5 +1,5 @@ -import { IVertexBuffer, IBuffer, IRenderObject, IRenderPass, IRenderPipeline, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; -import { IViewport } from "../../../src/data/IViewport"; +import { IGLRenderObject, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, IGLViewport, WebGL } from "@feng3d/webgl"; + import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,7 +8,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const renderingContext: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(renderingContext); // -- Divide viewport @@ -57,7 +58,7 @@ viewport[Corners.TOP_LEFT] = { // -- Initialize program -const program: IRenderPipeline = { +const program: IGLRenderPipeline = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs"), targets: [{ blend: {} }] }, }; @@ -71,7 +72,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 1.0, @@ -81,10 +82,10 @@ const texcoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initilize vertex array -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -92,12 +93,12 @@ const vertexArray: IVertexArrayObject = { }; // -- Load texture then render -const sampler: ISampler = { +const sampler: IGLSampler = { minFilter: "LINEAR", magFilter: "LINEAR" }; const imageUrl = "../../assets/img/Di-3d.png"; -let texture: ITexture; +let texture: IGLTexture; loadImage(imageUrl, function (image) { texture = { @@ -120,21 +121,21 @@ function render() 0.0, 0.0, 0.0, 1.0 ]); - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: program, vertexArray, uniforms: { mvp: matrix, diffuse: { texture, sampler } }, drawArrays: { vertexCount: 6 }, }; - const renderPass: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.5, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const renderPass: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.5, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; for (let i = 0; i < Corners.MAX; ++i) { - const viewport0: IViewport = { x: viewport[i].x, y: viewport[i].y, width: viewport[i].z, height: viewport[i].w }; + const viewport0: IGLViewport = { x: viewport[i].x, y: viewport[i].y, width: viewport[i].z, height: viewport[i].w }; if (i === Corners.TOP_LEFT) { @@ -189,12 +190,12 @@ function render() } } - WebGL.runRenderPass(renderingContext, renderPass); + webgl.runRenderPass(renderPass); // -- Clean up - WebGL.deleteBuffer(renderingContext, vertexPosBuffer); - WebGL.deleteBuffer(renderingContext, vertexTexBuffer); - WebGL.deleteVertexArray(renderingContext, vertexArray); - WebGL.deleteTexture(renderingContext, texture); - WebGL.deleteProgram(renderingContext, program); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteVertexArray(vertexArray); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); } \ No newline at end of file diff --git a/examples/src/WebGL2Samples/fbo_read_pixels.ts b/examples/src/WebGL2Samples/fbo_read_pixels.ts index ecbfbb8b60dbfdf957b7461e08e8ad541ee574e1..eb058da1f63c7c5dd845df99582d94827ae129db 100644 --- a/examples/src/WebGL2Samples/fbo_read_pixels.ts +++ b/examples/src/WebGL2Samples/fbo_read_pixels.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IFramebuffer, IRenderObject, IRenderPass, IRenderPipeline, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLFramebuffer, IGLRenderObject, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,7 +7,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(renderingContext); // -- Divide viewport @@ -49,13 +50,13 @@ viewport[Textures.BLUE] = { // -- Initialize program // Multiple out shaders -const multipleOutputProgram: IRenderPipeline = { +const multipleOutputProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-multiple-output") }, fragment: { code: getShaderSource("fs-multiple-output") }, primitive: { topology: "TRIANGLES" }, }; // Layer shaders -const layerProgram: IRenderPipeline = { +const layerProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-layer") }, fragment: { code: getShaderSource("fs-layer") }, primitive: { topology: "TRIANGLES" }, }; @@ -70,7 +71,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 0.0, @@ -80,17 +81,17 @@ const texcoords = new Float32Array([ 0.0, 1.0, 0.0, 0.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const multipleOutputVertexArray: IVertexArrayObject = { +const multipleOutputVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, } }; -const layerVertexArray: IVertexArrayObject = { +const layerVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -102,18 +103,18 @@ const layerVertexArray: IVertexArrayObject = { const w = 16; const h = 16; -const texture: ITexture = { +const texture: IGLTexture = { target: "TEXTURE_2D_ARRAY", sources: [{ width: w, height: h, level: 0, depth: 3 }], internalformat: "RGB8", format: "RGB", type: "UNSIGNED_BYTE", }; -const sampler: ISampler = { lodMinClamp: 0, lodMaxClamp: 0, minFilter: "NEAREST", magFilter: "NEAREST" }; +const sampler: IGLSampler = { lodMinClamp: 0, lodMaxClamp: 0, minFilter: "NEAREST", magFilter: "NEAREST" }; // -- Initialize frame buffer -const frameBuffer: IFramebuffer = { +const frameBuffer: IGLFramebuffer = { colorAttachments: [ { view: { texture, level: 0, layer: Textures.RED } }, { view: { texture, level: 0, layer: Textures.GREEN } }, @@ -130,8 +131,8 @@ const matrix = new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ]); -const rp1: IRenderPass = { - passDescriptor: frameBuffer, +const rp1: IGLRenderPass = { + descriptor: frameBuffer, renderObjects: [{ pipeline: multipleOutputProgram, uniforms: { mvp: matrix }, @@ -140,15 +141,15 @@ const rp1: IRenderPass = { drawArrays: { vertexCount: 6 }, }], }; -WebGL.runRenderPass(renderingContext, rp1); +webgl.runRenderPass(rp1); // Pass 2 -const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, +const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [] }; -const ro: IRenderObject = { +const ro: IGLRenderObject = { pipeline: layerProgram, uniforms: { mvp: matrix, @@ -167,19 +168,19 @@ for (let i = 0; i < Textures.MAX; ++i) uniforms: { ...ro.uniforms, layer: i }, }); } -WebGL.runRenderPass(renderingContext, rp); +webgl.runRenderPass(rp); const data = new Uint8Array(w * h * 4 * 3); -WebGL.runReadPixels(renderingContext, { +webgl.runReadPixels({ frameBuffer, attachmentPoint: "COLOR_ATTACHMENT0", x: 0, y: 0, width: w, height: h, format: "RGBA", type: "UNSIGNED_BYTE", dstData: data, dstOffset: 0 }); -WebGL.runReadPixels(renderingContext, { +webgl.runReadPixels({ frameBuffer, attachmentPoint: "COLOR_ATTACHMENT1", x: 0, y: 0, width: w, height: h, format: "RGBA", type: "UNSIGNED_BYTE", dstData: data, dstOffset: w * h * 4 }); -WebGL.runReadPixels(renderingContext, { +webgl.runReadPixels({ frameBuffer, attachmentPoint: "COLOR_ATTACHMENT1", x: 0, y: 0, width: w, height: h, format: "RGBA", type: "UNSIGNED_BYTE", dstData: data, dstOffset: w * h * 4 * 2 }); @@ -187,12 +188,12 @@ WebGL.runReadPixels(renderingContext, { console.log(data); // Clean up -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteBuffer(renderingContext, vertexTexBuffer); -WebGL.deleteVertexArray(renderingContext, multipleOutputVertexArray); -WebGL.deleteVertexArray(renderingContext, layerVertexArray); -WebGL.deleteFramebuffer(renderingContext, frameBuffer); -WebGL.deleteTexture(renderingContext, texture); -WebGL.deleteProgram(renderingContext, multipleOutputProgram); -WebGL.deleteProgram(renderingContext, layerProgram); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(vertexTexBuffer); +webgl.deleteVertexArray(multipleOutputVertexArray); +webgl.deleteVertexArray(layerVertexArray); +webgl.deleteFramebuffer(frameBuffer); +webgl.deleteTexture(texture); +webgl.deleteProgram(multipleOutputProgram); +webgl.deleteProgram(layerProgram); diff --git a/examples/src/WebGL2Samples/fbo_rtt_depth_texture.ts b/examples/src/WebGL2Samples/fbo_rtt_depth_texture.ts index 469244952cf5697cfc60e52e86332e2170bf8ccc..2edc8da3559a7a36716de7eb4e8d40438b9a69af 100644 --- a/examples/src/WebGL2Samples/fbo_rtt_depth_texture.ts +++ b/examples/src/WebGL2Samples/fbo_rtt_depth_texture.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IFramebuffer, IRenderPass, IRenderPipeline, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLFramebuffer, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,25 +7,25 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; -const gl = canvas.getContext("webgl2", { antialias: false }); +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; +const webgl = new WebGL(renderingContext); const windowSize = { - x: gl.drawingBufferWidth, - y: gl.drawingBufferHeight + x: canvas.width, + y: canvas.height }; // -- Initialize program // Depth shaders -const depthProgram: IRenderPipeline = { +const depthProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-depth") }, fragment: { code: getShaderSource("fs-depth") }, depthStencil: { depth: { depthtest: true } }, primitive: { topology: "TRIANGLES" }, }; // Draw shaders -const drawProgram: IRenderPipeline = { +const drawProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-draw") }, fragment: { code: getShaderSource("fs-draw") }, primitive: { topology: "TRIANGLES" }, }; @@ -37,7 +37,7 @@ const triPositions = new Float32Array([ 0.5, -0.5, -1.0, 0.0, 0.5, 1.0 ]); -const triVertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: triPositions, usage: "STATIC_DRAW" }; +const triVertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: triPositions, usage: "STATIC_DRAW" }; const quadPositions = new Float32Array([ -1.0, -1.0, @@ -47,7 +47,7 @@ const quadPositions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const quadVertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: quadPositions, usage: "STATIC_DRAW" }; +const quadVertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: quadPositions, usage: "STATIC_DRAW" }; const quadTexcoords = new Float32Array([ 0.0, 0.0, @@ -57,17 +57,17 @@ const quadTexcoords = new Float32Array([ 0.0, 1.0, 0.0, 0.0 ]); -const quadVertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: quadTexcoords, usage: "STATIC_DRAW" }; +const quadVertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: quadTexcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const triVertexArray: IVertexArrayObject = { +const triVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: triVertexPosBuffer, numComponents: 3 }, } }; -const quadVertexArray: IVertexArrayObject = { +const quadVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: quadVertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: quadVertexTexBuffer, numComponents: 2 }, @@ -78,17 +78,17 @@ const quadVertexArray: IVertexArrayObject = { // the proper texture format combination can be found here // https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/glTexImage2D.xhtml -const depthTexture: ITexture = { +const depthTexture: IGLTexture = { sources: [{ width: windowSize.x, height: windowSize.y, level: 0 }], internalformat: "DEPTH_COMPONENT16", format: "DEPTH_COMPONENT", type: "UNSIGNED_SHORT", }; -const depthSampler: ISampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; +const depthSampler: IGLSampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; // -- Initialize frame buffer -const frameBuffer: IFramebuffer = { +const frameBuffer: IGLFramebuffer = { colorAttachments: [], depthStencilAttachment: { view: { texture: depthTexture, level: 0 }, depthLoadOp: "clear" }, }; @@ -96,8 +96,8 @@ const frameBuffer: IFramebuffer = { // -- Render // Pass 1: Depth -const renderPass: IRenderPass = { - passDescriptor: frameBuffer, +const renderPass: IGLRenderPass = { + descriptor: frameBuffer, renderObjects: [{ pipeline: depthProgram, vertexArray: triVertexArray, @@ -105,11 +105,11 @@ const renderPass: IRenderPass = { }], }; -WebGL.runRenderPass(renderingContext, renderPass); +webgl.runRenderPass(renderPass); // Pass 2: Draw -const rp2: IRenderPass = { - passDescriptor: { +const rp2: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }], }, renderObjects: [{ @@ -119,16 +119,16 @@ const rp2: IRenderPass = { drawArrays: { vertexCount: 6 }, }], }; -WebGL.runRenderPass(renderingContext, rp2); +webgl.runRenderPass(rp2); // Clean up -WebGL.deleteBuffer(renderingContext, triVertexPosBuffer); -WebGL.deleteBuffer(renderingContext, quadVertexPosBuffer); -WebGL.deleteBuffer(renderingContext, quadVertexTexBuffer); -WebGL.deleteVertexArray(renderingContext, triVertexArray); -WebGL.deleteVertexArray(renderingContext, quadVertexArray); -WebGL.deleteFramebuffer(renderingContext, frameBuffer); -WebGL.deleteTexture(renderingContext, depthTexture); -WebGL.deleteProgram(renderingContext, depthProgram); -WebGL.deleteProgram(renderingContext, drawProgram); +webgl.deleteBuffer(triVertexPosBuffer); +webgl.deleteBuffer(quadVertexPosBuffer); +webgl.deleteBuffer(quadVertexTexBuffer); +webgl.deleteVertexArray(triVertexArray); +webgl.deleteVertexArray(quadVertexArray); +webgl.deleteFramebuffer(frameBuffer); +webgl.deleteTexture(depthTexture); +webgl.deleteProgram(depthProgram); +webgl.deleteProgram(drawProgram); diff --git a/examples/src/WebGL2Samples/fbo_rtt_draw_buffers.ts b/examples/src/WebGL2Samples/fbo_rtt_draw_buffers.ts index 19847f6963ec3289a6e430b76802acf829a48619..146e5b87f34805248463248190bfa7c016a0f474 100644 --- a/examples/src/WebGL2Samples/fbo_rtt_draw_buffers.ts +++ b/examples/src/WebGL2Samples/fbo_rtt_draw_buffers.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IFramebuffer, IRenderPass, IRenderPipeline, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLFramebuffer, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,7 +7,8 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); const windowSize = { x: canvas.width, @@ -17,14 +18,14 @@ const windowSize = { // -- Initialize program // Draw buffer shaders -const drawBufferProgram: IRenderPipeline = { +const drawBufferProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-draw-buffer") }, fragment: { code: getShaderSource("fs-draw-buffer") }, primitive: { topology: "TRIANGLES" }, }; // Draw shaders -const drawProgram: IRenderPipeline = { +const drawProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-draw") }, fragment: { code: getShaderSource("fs-draw") }, primitive: { topology: "TRIANGLES" }, @@ -37,7 +38,7 @@ const triPositions = new Float32Array([ 0.5, -0.5, -1.0, 0.0, 0.5, 1.0 ]); -const triVertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: triPositions, usage: "STATIC_DRAW" }; +const triVertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: triPositions, usage: "STATIC_DRAW" }; const quadPositions = new Float32Array([ -1.0, -1.0, @@ -47,7 +48,7 @@ const quadPositions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const quadVertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: quadPositions, usage: "STATIC_DRAW" }; +const quadVertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: quadPositions, usage: "STATIC_DRAW" }; const quadTexcoords = new Float32Array([ 0.0, 0.0, @@ -57,17 +58,17 @@ const quadTexcoords = new Float32Array([ 0.0, 1.0, 0.0, 0.0 ]); -const quadVertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: quadTexcoords, usage: "STATIC_DRAW" }; +const quadVertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: quadTexcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const triVertexArray: IVertexArrayObject = { +const triVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: triVertexPosBuffer, numComponents: 3 } } }; -const quadVertexArray: IVertexArrayObject = { +const quadVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: quadVertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: quadVertexTexBuffer, numComponents: 2 }, @@ -76,25 +77,25 @@ const quadVertexArray: IVertexArrayObject = { // -- Initialize texture targets -const color1Texture: ITexture = { +const color1Texture: IGLTexture = { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ width: windowSize.x, height: windowSize.y }], }; -const color1Sampler: ISampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; +const color1Sampler: IGLSampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; -const color2Texture: ITexture = { +const color2Texture: IGLTexture = { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ width: windowSize.x, height: windowSize.y }], }; -const color2Sampler: ISampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; +const color2Sampler: IGLSampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "NEAREST", magFilter: "NEAREST" }; // -- Initialize frame buffer -const frameBuffer: IFramebuffer = { +const frameBuffer: IGLFramebuffer = { colorAttachments: [ { view: { texture: color1Texture, level: 0 } }, { view: { texture: color2Texture, level: 0 } }, @@ -103,19 +104,19 @@ const frameBuffer: IFramebuffer = { // -- Render -const renderPass: IRenderPass = { - passDescriptor: frameBuffer, +const renderPass: IGLRenderPass = { + descriptor: frameBuffer, renderObjects: [{ pipeline: drawBufferProgram, vertexArray: triVertexArray, drawArrays: { vertexCount: 3 }, }], }; -WebGL.runRenderPass(renderingContext, renderPass); +webgl.runRenderPass(renderPass); // Pass 2: Draw to screen -const renderPass2: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, +const renderPass2: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [{ pipeline: drawProgram, uniforms: { @@ -126,17 +127,17 @@ const renderPass2: IRenderPass = { drawArrays: { vertexCount: 6 }, }], }; -WebGL.runRenderPass(renderingContext, renderPass2); +webgl.runRenderPass(renderPass2); // Clean up -WebGL.deleteBuffer(renderingContext, triVertexPosBuffer); -WebGL.deleteBuffer(renderingContext, quadVertexPosBuffer); -WebGL.deleteBuffer(renderingContext, quadVertexTexBuffer); -WebGL.deleteVertexArray(renderingContext, triVertexArray); -WebGL.deleteVertexArray(renderingContext, quadVertexArray); -WebGL.deleteFramebuffer(renderingContext, frameBuffer); -WebGL.deleteTexture(renderingContext, color1Texture); -WebGL.deleteTexture(renderingContext, color2Texture); -WebGL.deleteProgram(renderingContext, drawBufferProgram); -WebGL.deleteProgram(renderingContext, drawProgram); +webgl.deleteBuffer(triVertexPosBuffer); +webgl.deleteBuffer(quadVertexPosBuffer); +webgl.deleteBuffer(quadVertexTexBuffer); +webgl.deleteVertexArray(triVertexArray); +webgl.deleteVertexArray(quadVertexArray); +webgl.deleteFramebuffer(frameBuffer); +webgl.deleteTexture(color1Texture); +webgl.deleteTexture(color2Texture); +webgl.deleteProgram(drawBufferProgram); +webgl.deleteProgram(drawProgram); diff --git a/examples/src/WebGL2Samples/fbo_rtt_texture_array.ts b/examples/src/WebGL2Samples/fbo_rtt_texture_array.ts index ceccd0504bf79e7819a5da749b7d6f4e6dd755c6..03583cefc170a427b23c95826508fa82d24c15aa 100644 --- a/examples/src/WebGL2Samples/fbo_rtt_texture_array.ts +++ b/examples/src/WebGL2Samples/fbo_rtt_texture_array.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IFramebuffer, IRenderObject, IRenderPass, IRenderPipeline, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLFramebuffer, IGLRenderObject, IGLRenderPass, IGLRenderPipeline, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,8 +7,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const gl = canvas.getContext("webgl2", { antialias: false }); -const renderingContext: IRenderingContext = { canvasId: "glcanvas" }; +const renderingContext: IGLRenderingContext = { canvasId: "glcanvas" }; +const webgl = new WebGL(renderingContext); // -- Divide viewport @@ -50,13 +50,13 @@ viewport[Textures.BLUE] = { // -- Initialize program // Multiple out shaders -const multipleOutputProgram: IRenderPipeline = { +const multipleOutputProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-multiple-output") }, fragment: { code: getShaderSource("fs-multiple-output") }, primitive: { topology: "TRIANGLES" }, }; // Layer shaders -const layerProgram: IRenderPipeline = { +const layerProgram: IGLRenderPipeline = { vertex: { code: getShaderSource("vs-layer") }, fragment: { code: getShaderSource("fs-layer") }, primitive: { topology: "TRIANGLES" }, }; @@ -71,7 +71,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 0.0, @@ -81,17 +81,17 @@ const texcoords = new Float32Array([ 0.0, 1.0, 0.0, 0.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const multipleOutputVertexArray: IVertexArrayObject = { +const multipleOutputVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, } }; -const layerVertexArray: IVertexArrayObject = { +const layerVertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -103,18 +103,18 @@ const layerVertexArray: IVertexArrayObject = { const w = 16; const h = 16; -const texture: ITexture = { +const texture: IGLTexture = { target: "TEXTURE_2D_ARRAY", internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ level: 0, width: w, height: h, depth: 3 }], }; -const sampler: ISampler = { minFilter: "NEAREST", magFilter: "NEAREST", lodMinClamp: 0, lodMaxClamp: 0 }; +const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST", lodMinClamp: 0, lodMaxClamp: 0 }; // -- Initialize frame buffer -const frameBuffer: IFramebuffer = { +const frameBuffer: IGLFramebuffer = { colorAttachments: [ { view: { texture, level: 0, layer: Textures.RED } }, { view: { texture, level: 0, layer: Textures.GREEN } }, @@ -133,8 +133,8 @@ const matrix = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const renderPass1: IRenderPass = { - passDescriptor: frameBuffer, +const renderPass1: IGLRenderPass = { + descriptor: frameBuffer, renderObjects: [{ pipeline: multipleOutputProgram, uniforms: { mvp: matrix }, @@ -146,14 +146,14 @@ const renderPass1: IRenderPass = { // Pass 2 -const renderPass: IRenderPass = { - passDescriptor: { +const renderPass: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }], }, renderObjects: [], }; -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { pipeline: layerProgram, uniforms: { mvp: matrix, diffuse: { texture, sampler } }, vertexArray: layerVertexArray, @@ -173,15 +173,15 @@ for (let i = 0; i < Textures.MAX; ++i) ); } -WebGL.runRenderPass(renderingContext, renderPass1); -WebGL.runRenderPass(renderingContext, renderPass); +webgl.runRenderPass(renderPass1); +webgl.runRenderPass(renderPass); // Clean up -WebGL.deleteBuffer(renderingContext, vertexPosBuffer); -WebGL.deleteBuffer(renderingContext, vertexTexBuffer); -WebGL.deleteVertexArray(renderingContext, multipleOutputVertexArray); -WebGL.deleteVertexArray(renderingContext, layerVertexArray); -WebGL.deleteFramebuffer(renderingContext, frameBuffer); -WebGL.deleteTexture(renderingContext, texture); -WebGL.deleteProgram(renderingContext, multipleOutputProgram); -WebGL.deleteProgram(renderingContext, layerProgram); \ No newline at end of file +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteBuffer(vertexTexBuffer); +webgl.deleteVertexArray(multipleOutputVertexArray); +webgl.deleteVertexArray(layerVertexArray); +webgl.deleteFramebuffer(frameBuffer); +webgl.deleteTexture(texture); +webgl.deleteProgram(multipleOutputProgram); +webgl.deleteProgram(layerProgram); \ No newline at end of file diff --git a/examples/src/WebGL2Samples/geo_vertex_format.ts b/examples/src/WebGL2Samples/geo_vertex_format.ts index 017d2e016c9e43df13e978276503fca1d1650beb..a70aebbc64791699ea9a7b7d118b9942d45e6fd0 100644 --- a/examples/src/WebGL2Samples/geo_vertex_format.ts +++ b/examples/src/WebGL2Samples/geo_vertex_format.ts @@ -1,5 +1,5 @@ +import { IGLIndexBuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IIndexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; import { HalfFloat } from "./third-party/HalfFloatUtility"; import { getShaderSource, loadImage } from "./utility"; @@ -11,10 +11,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES", cullFace: { enableCullFace: true, cullMode: "BACK" } }, depthStencil: { depth: { depthtest: true } }, @@ -58,7 +59,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, 1.0, -1.0, 1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const normals = HalfFloat.Float16Array([ // Front face @@ -97,7 +98,7 @@ import { getShaderSource, loadImage } from "./utility"; 1, 0, 0, 1, 0, 0 ]); - const vertexNorBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: normals, usage: "STATIC_DRAW" }; + const vertexNorBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: normals, usage: "STATIC_DRAW" }; const texCoords = HalfFloat.Float16Array([ // Front face @@ -136,7 +137,7 @@ import { getShaderSource, loadImage } from "./utility"; 1.0, 1.0, 1.0, 0.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // Element buffer @@ -149,11 +150,11 @@ import { getShaderSource, loadImage } from "./utility"; 20, 21, 22, 20, 22, 23 // left ]; - const indexBuffer: IIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; + const indexBuffer: IGLIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { a_position: { type: "FLOAT", buffer: vertexPosBuffer, numComponents: 3 }, a_normal: { type: "HALF_FLOAT", buffer: vertexNorBuffer, numComponents: 3 }, @@ -165,8 +166,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Init Texture const imageUrl = "../../assets/img/Di-3d.png"; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; loadImage(imageUrl, function (image) { // -- Init 2D Texture @@ -208,7 +209,7 @@ import { getShaderSource, loadImage } from "./utility"; const lightPosition = [0.0, 0.0, 5.0]; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: { @@ -220,8 +221,8 @@ import { getShaderSource, loadImage } from "./utility"; drawElements: { indexCount: 36 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; @@ -241,7 +242,7 @@ import { getShaderSource, loadImage } from "./utility"; ro.uniforms.u_viewProj = viewProj; ro.uniforms.s_tex2D = { texture, sampler }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); diff --git a/examples/src/WebGL2Samples/glsl_centroid.ts b/examples/src/WebGL2Samples/glsl_centroid.ts index 14c8d33ef53ed1139d1619ad990b69f993458021..3d109faa2d617ef0a402cc8bc54359d23793a0f3 100644 --- a/examples/src/WebGL2Samples/glsl_centroid.ts +++ b/examples/src/WebGL2Samples/glsl_centroid.ts @@ -1,5 +1,5 @@ +import { IGLBlitFramebuffer, IGLFramebuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderbuffer, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IVertexBuffer, IBlitFramebuffer, IBuffer, IFramebuffer, IProgram, IRenderObject, IRenderPass, IRenderbuffer, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; import { getShaderSource } from "./utility"; const canvas = document.createElement("canvas"); @@ -8,7 +8,8 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Divide viewport const canvasSize = { @@ -46,7 +47,7 @@ const PROGRAM = { MAX: 3 }; -const programs: IProgram[] = [ +const programs: IGLProgram[] = [ { vertex: { code: getShaderSource("vs-render") }, fragment: { code: getShaderSource("fs-render") }, primitive: { topology: "TRIANGLES" }, @@ -75,9 +76,9 @@ const data = new Float32Array([ ]); // -- Init buffers -const vertexPositionBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPositionBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; -const vertexDataBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data, usage: "STATIC_DRAW" }; +const vertexDataBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data, usage: "STATIC_DRAW" }; // Draw the rect texture // This can be discarded when gl_VertexID is available @@ -89,7 +90,7 @@ const textureVertexPositions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const texVertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: textureVertexPositions, usage: "STATIC_DRAW" }; +const texVertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: textureVertexPositions, usage: "STATIC_DRAW" }; const textureVertexTexCoords = new Float32Array([ 0.0, 1.0, @@ -99,7 +100,7 @@ const textureVertexTexCoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const texVertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: textureVertexTexCoords, usage: "STATIC_DRAW" }; +const texVertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: textureVertexTexCoords, usage: "STATIC_DRAW" }; // -- Init Texture // used for draw framebuffer storage @@ -107,8 +108,8 @@ const FRAMEBUFFER_SIZE = { x: canvas.width, y: canvas.height }; -const textures: ITexture[] = []; -const samplers: ISampler[] = []; +const textures: IGLTexture[] = []; +const samplers: IGLSampler[] = []; for (let i = 0; i < VIEWPORTS.MAX; ++i) { @@ -124,9 +125,9 @@ for (let i = 0; i < VIEWPORTS.MAX; ++i) // -- Init Frame Buffers // non-centroid -const colorRenderbuffer: IRenderbuffer = { samples: 4, internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; +const colorRenderbuffer: IGLRenderbuffer = { internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; // centroid -const colorRenderbufferCentroid: IRenderbuffer = { samples: 4, internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; +const colorRenderbufferCentroid: IGLRenderbuffer = { internalformat: "RGBA8", width: FRAMEBUFFER_SIZE.x, height: FRAMEBUFFER_SIZE.y }; const FRAMEBUFFER = { RENDERBUFFER: 0, @@ -135,15 +136,15 @@ const FRAMEBUFFER = { COLORBUFFER_CENTROID: 3 }; -const framebuffers: IFramebuffer[] = [ - { colorAttachments: [{ view: colorRenderbuffer, clearValue: [0, 0, 0, 1], loadOp: "clear" }] }, - { colorAttachments: [{ view: colorRenderbufferCentroid, clearValue: [0, 0, 0, 1], loadOp: "clear" }] }, +const framebuffers: IGLFramebuffer[] = [ + { colorAttachments: [{ view: colorRenderbuffer, clearValue: [0, 0, 0, 1], loadOp: "clear" }], multisample: 4 }, + { colorAttachments: [{ view: colorRenderbufferCentroid, clearValue: [0, 0, 0, 1], loadOp: "clear" }], multisample: 4 }, { colorAttachments: [{ view: { texture: textures[0], level: 0 }, clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, { colorAttachments: [{ view: { texture: textures[1], level: 0 }, clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, ]; // -- Init VertexArray -const vertexArrays: IVertexArrayObject[] = [ +const vertexArrays: IGLVertexArrayObject[] = [ { vertices: { position: { buffer: vertexPositionBuffer, numComponents: 2 }, @@ -171,8 +172,8 @@ const IDENTITY = mat4.create(); for (let i = 0; i < VIEWPORTS.MAX; ++i) { // render buffers - const rp: IRenderPass = { - passDescriptor: framebuffers[i], + const rp: IGLRenderPass = { + descriptor: framebuffers[i], renderObjects: [{ pipeline: programs[i], vertexArray: vertexArrays[i], @@ -180,11 +181,11 @@ for (let i = 0; i < VIEWPORTS.MAX; ++i) drawArrays: { vertexCount }, }] }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Blit framebuffers, no Multisample texture 2d in WebGL 2 // centroid will only work with multisample - const blit: IBlitFramebuffer = { + const blit: IGLBlitFramebuffer = { read: framebuffers[i], draw: framebuffers[i + 2], blitFramebuffers: [[ @@ -193,14 +194,14 @@ for (let i = 0; i < VIEWPORTS.MAX; ++i) "COLOR_BUFFER_BIT", "NEAREST" ]], }; - WebGL.runBlitFramebuffer(rc, blit); + webgl.runBlitFramebuffer(blit); } // Pass 2 -const rp2: IRenderPass = { +const rp2: IGLRenderPass = { renderObjects: [], }; -const ro: IRenderObject = { +const ro: IGLRenderObject = { pipeline: programs[PROGRAM.SPLASH], vertexArray: vertexArrays[PROGRAM.SPLASH], }; @@ -225,33 +226,33 @@ for (let i = 0; i < VIEWPORTS.MAX; ++i) } ); } -WebGL.runRenderPass(rc, rp2); +webgl.runRenderPass(rp2); // -- Delete WebGL resources -WebGL.deleteBuffer(rc, texVertexPosBuffer); -WebGL.deleteBuffer(rc, texVertexTexBuffer); -WebGL.deleteBuffer(rc, vertexPositionBuffer); -WebGL.deleteBuffer(rc, vertexDataBuffer); +webgl.deleteBuffer(texVertexPosBuffer); +webgl.deleteBuffer(texVertexTexBuffer); +webgl.deleteBuffer(vertexPositionBuffer); +webgl.deleteBuffer(vertexDataBuffer); -WebGL.deleteTexture(rc, textures[PROGRAM.TEXTURE]); -WebGL.deleteTexture(rc, textures[PROGRAM.TEXTURE_CENTROID]); +webgl.deleteTexture(textures[PROGRAM.TEXTURE]); +webgl.deleteTexture(textures[PROGRAM.TEXTURE_CENTROID]); -WebGL.deleteSampler(rc, samplers[PROGRAM.TEXTURE]); -WebGL.deleteSampler(rc, samplers[PROGRAM.TEXTURE_CENTROID]); +webgl.deleteSampler(samplers[PROGRAM.TEXTURE]); +webgl.deleteSampler(samplers[PROGRAM.TEXTURE_CENTROID]); -WebGL.deleteRenderbuffer(rc, colorRenderbuffer); -WebGL.deleteRenderbuffer(rc, colorRenderbufferCentroid); +webgl.deleteRenderbuffer(colorRenderbuffer); +webgl.deleteRenderbuffer(colorRenderbufferCentroid); -WebGL.deleteFramebuffer(rc, framebuffers[FRAMEBUFFER.RENDERBUFFER]); -WebGL.deleteFramebuffer(rc, framebuffers[FRAMEBUFFER.COLORBUFFER]); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.RENDERBUFFER]); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.COLORBUFFER]); -WebGL.deleteFramebuffer(rc, framebuffers[FRAMEBUFFER.RENDERBUFFER_CENTROID]); -WebGL.deleteFramebuffer(rc, framebuffers[FRAMEBUFFER.COLORBUFFER_CENTROID]); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.RENDERBUFFER_CENTROID]); +webgl.deleteFramebuffer(framebuffers[FRAMEBUFFER.COLORBUFFER_CENTROID]); -WebGL.deleteVertexArray(rc, vertexArrays[PROGRAM.TEXTURE]); -WebGL.deleteVertexArray(rc, vertexArrays[PROGRAM.TEXTURE_CENTROID]); -WebGL.deleteVertexArray(rc, vertexArrays[PROGRAM.SPLASH]); +webgl.deleteVertexArray(vertexArrays[PROGRAM.TEXTURE]); +webgl.deleteVertexArray(vertexArrays[PROGRAM.TEXTURE_CENTROID]); +webgl.deleteVertexArray(vertexArrays[PROGRAM.SPLASH]); -WebGL.deleteProgram(rc, programs[PROGRAM.TEXTURE]); -WebGL.deleteProgram(rc, programs[PROGRAM.TEXTURE_CENTROID]); -WebGL.deleteProgram(rc, programs[PROGRAM.SPLASH]); +webgl.deleteProgram(programs[PROGRAM.TEXTURE]); +webgl.deleteProgram(programs[PROGRAM.TEXTURE_CENTROID]); +webgl.deleteProgram(programs[PROGRAM.SPLASH]); diff --git a/examples/src/WebGL2Samples/glsl_flat_smooth_interpolators.ts b/examples/src/WebGL2Samples/glsl_flat_smooth_interpolators.ts index d786c1bfcd01a831ff22d90870e24b9dc34246f4..e93414f6fe21094411300664a1aab808aa11039f 100644 --- a/examples/src/WebGL2Samples/glsl_flat_smooth_interpolators.ts +++ b/examples/src/WebGL2Samples/glsl_flat_smooth_interpolators.ts @@ -1,5 +1,5 @@ +import { IGLIndexBuffer, IGLProgram, IGLRenderPass, IGLRenderingContext, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IVertexBuffer, IBuffer, IIndexBuffer, IProgram, IRenderPass, IRenderingContext, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; import { GlTFLoader, Primitive } from "./third-party/gltf-loader"; import { getShaderSource } from "./utility"; @@ -9,7 +9,8 @@ canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Divide viewport const canvasSize = { @@ -40,7 +41,7 @@ viewport[VIEWPORTS.RIGHT] = { }; // -- Initialize program -const programs: IProgram[] = [ +const programs: IGLProgram[] = [ { vertex: { code: getShaderSource("vs-flat") }, fragment: { code: getShaderSource("fs-flat") }, primitive: { topology: "TRIANGLES" }, @@ -62,7 +63,7 @@ glTFLoader.loadGLTF(gltfUrl, function (glTF) // -- Initialize vertex array const vertexArrayMaps: { - [key: string]: IVertexArrayObject[] + [key: string]: IGLVertexArrayObject[] } = {}; // var in loop @@ -71,9 +72,9 @@ glTFLoader.loadGLTF(gltfUrl, function (glTF) }; let primitive: Primitive; // { matrix: mat4, attributes: { [key: string]: { size: number, type: number, stride: number, offset: number } }, vertexBuffer, indices }; - let vertexBuffer: IVertexBuffer; - let indicesBuffer: IIndexBuffer; - let vertexArray: IVertexArrayObject; + let vertexBuffer: IGLVertexBuffer; + let indicesBuffer: IGLIndexBuffer; + let vertexArray: IGLVertexArrayObject; let i: number; let len: number; @@ -140,8 +141,8 @@ glTFLoader.loadGLTF(gltfUrl, function (glTF) // -- Render loop (function render() { - const rp: IRenderPass = { - passDescriptor: { + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }], depthStencilAttachment: { depthLoadOp: "clear" } }, @@ -181,7 +182,7 @@ glTFLoader.loadGLTF(gltfUrl, function (glTF) } } } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); })(); diff --git a/examples/src/WebGL2Samples/glsl_non_square_matrix.ts b/examples/src/WebGL2Samples/glsl_non_square_matrix.ts index b40921297b76abbba749302b8402557d7323a694..1ba15b94b1e8d558d5a762394f98a8d2dab079bf 100644 --- a/examples/src/WebGL2Samples/glsl_non_square_matrix.ts +++ b/examples/src/WebGL2Samples/glsl_non_square_matrix.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,10 +7,11 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Init program -const program: IProgram = { +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES" }, }; @@ -24,7 +25,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -34,10 +35,10 @@ const texCoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -47,7 +48,7 @@ const vertexArray: IVertexArrayObject = { loadImage("../../assets/img/Di-3d.png", function (image) { // -- Init Texture - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackFlipY: false, @@ -57,7 +58,7 @@ loadImage("../../assets/img/Di-3d.png", function (image) type: "UNSIGNED_BYTE", sources: [{ source: image, level: 0 }] }; - const sampler: ISampler = { minFilter: "NEAREST", magFilter: "NEAREST" }; + const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST" }; // -- Render const matrix = new Float32Array([ @@ -67,8 +68,8 @@ loadImage("../../assets/img/Di-3d.png", function (image) 0.2, -0.2, 0.0 //translation ]); - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [{ pipeline: program, uniforms: { MVP: matrix, diffuse: { texture, sampler } }, @@ -76,12 +77,12 @@ loadImage("../../assets/img/Di-3d.png", function (image) drawArrays: { vertexCount: 6 }, }] }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); }); diff --git a/examples/src/WebGL2Samples/query_occlusion.ts b/examples/src/WebGL2Samples/query_occlusion.ts index 44cc43ec6f5b1062b7c399342f643b047c27f861..0ffc26b9b789dd93e5e8462142bc65845bd2157a 100644 --- a/examples/src/WebGL2Samples/query_occlusion.ts +++ b/examples/src/WebGL2Samples/query_occlusion.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IBuffer, IProgram, IQuery, IRenderObject, IRenderPass, IRenderingContext, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLQuery, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; // -- Init Canvas @@ -9,10 +9,11 @@ canvas.height = window.innerHeight; document.body.appendChild(canvas); // -- Init WebGL Context -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Init Program -const program: IProgram = { +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, depthStencil: { depth: { depthtest: true } }, primitive: { topology: "TRIANGLES" }, @@ -28,27 +29,27 @@ const vertices = new Float32Array([ 0.3, -0.5, 0.5, 0.0, 0.5, 0.5 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }; // -- Init Vertex Array -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { pos: { buffer: vertexPosBuffer, numComponents: 3, normalized: false, vertexSize: 0, offset: 0 }, } }; // -- Init Query -const query: IQuery = {}; +const query: IGLQuery = {}; // -- Render -const rp: IRenderPass = { - passDescriptor: { +const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }], depthStencilAttachment: { depthLoadOp: "clear" }, }, renderObjects: [], }; -const ro: IRenderObject = { +const ro: IGLRenderObject = { vertexArray, pipeline: program, drawArrays: { firstVertex: 0, vertexCount: 3 }, @@ -64,14 +65,14 @@ rp.renderObjects.push({ rp.renderObjects.push({ action: "endQuery", target: "ANY_SAMPLES_PASSED", query }); -WebGL.runRenderPass(rc, rp); +webgl.runRenderPass(rp); -WebGL.getQueryResult(rc, query).then((samplesPassed) => +webgl.getQueryResult(query).then((samplesPassed) => { document.getElementById("samplesPassed").innerHTML = `Any samples passed: ${Number(samplesPassed)}`; }); // -- Delete WebGL resources -WebGL.deleteBuffer(rc, vertexPosBuffer); -WebGL.deleteProgram(rc, program); -WebGL.deleteVertexArray(rc, vertexArray); +webgl.deleteBuffer(vertexPosBuffer); +webgl.deleteProgram(program); +webgl.deleteVertexArray(vertexArray); diff --git a/examples/src/WebGL2Samples/sampler_filter.ts b/examples/src/WebGL2Samples/sampler_filter.ts index 58235daf51d41b8d90ee3f3452164197a30cba91..719df2864a5c09974d6e6f45bf042b60aa39e657 100644 --- a/examples/src/WebGL2Samples/sampler_filter.ts +++ b/examples/src/WebGL2Samples/sampler_filter.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,7 +7,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Divide viewport @@ -56,7 +57,7 @@ viewport[Corners.TOP_LEFT] = { // -- Initialize program -const program: IProgram = { +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES" }, }; @@ -71,7 +72,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 1.0, @@ -81,11 +82,11 @@ const texcoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -94,7 +95,7 @@ const vertexArray: IVertexArrayObject = { // -- Initialize samplers -const samplers: ISampler[] = new Array(Corners.MAX); +const samplers: IGLSampler[] = new Array(Corners.MAX); for (let i = 0; i < Corners.MAX; ++i) { samplers[i] = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", wrapR: "CLAMP_TO_EDGE" }; @@ -115,7 +116,7 @@ samplers[Corners.BOTTOM_LEFT].magFilter = "LINEAR"; // -- Load texture then render const imageUrl = "../../assets/img/Di-3d.png"; -let texture: ITexture; +let texture: IGLTexture; loadImage(imageUrl, function (image) { texture = { @@ -139,12 +140,12 @@ function render() 0.0, 0.0, 0.0, 1.0 ]); - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [] }; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { mvp: matrix }, vertexArray, @@ -166,16 +167,16 @@ function render() }); } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Clean up - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); for (let j = 0; j < samplers.length; ++j) { - WebGL.deleteSampler(rc, samplers[(j + 1) % samplers.length]); + webgl.deleteSampler(samplers[(j + 1) % samplers.length]); } - WebGL.deleteVertexArray(rc, vertexArray); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); + webgl.deleteVertexArray(vertexArray); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); } diff --git a/examples/src/WebGL2Samples/sampler_object.ts b/examples/src/WebGL2Samples/sampler_object.ts index 42f4a9319819e0204a5d2f66cc5d3382966e3309..f8a80190390f040be3fca932550ee6ec8bed0565 100644 --- a/examples/src/WebGL2Samples/sampler_object.ts +++ b/examples/src/WebGL2Samples/sampler_object.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,11 +7,12 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas" }; +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; +const webgl = new WebGL(rc); // -- Initialize program -const program: IProgram = { +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES" }, }; @@ -26,7 +27,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 1.0, @@ -36,11 +37,11 @@ const texcoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -49,13 +50,13 @@ const vertexArray: IVertexArrayObject = { // -- Initialize samplers -const samplerA: ISampler = { +const samplerA: IGLSampler = { minFilter: "NEAREST_MIPMAP_NEAREST", magFilter: "NEAREST", wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", wrapR: "CLAMP_TO_EDGE", lodMinClamp: -1000.0, lodMaxClamp: 1000.0, compareMode: "NONE", compare: "LEQUAL", }; -const samplerB: ISampler = { +const samplerB: IGLSampler = { minFilter: "LINEAR_MIPMAP_LINEAR", magFilter: "LINEAR", wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", wrapR: "CLAMP_TO_EDGE", lodMinClamp: -1000.0, lodMaxClamp: 1000.0, @@ -65,7 +66,7 @@ const samplerB: ISampler = { // -- Load texture then render const imageUrl = "../../assets/img/Di-3d.png"; -let texture: ITexture; +let texture: IGLTexture; loadImage(imageUrl, function (image) { texture = { @@ -88,8 +89,8 @@ function render() 0.0, 0.0, 0.0, 1.0 ]); - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [{ pipeline: program, vertexArray, @@ -105,14 +106,14 @@ function render() drawArrays: { vertexCount: 6, instanceCount: 1 }, }], }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Cleanup - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteSampler(rc, samplerA); - WebGL.deleteSampler(rc, samplerB); - WebGL.deleteVertexArray(rc, vertexArray); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteSampler(samplerA); + webgl.deleteSampler(samplerB); + webgl.deleteVertexArray(vertexArray); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); } \ No newline at end of file diff --git a/examples/src/WebGL2Samples/sampler_wrap.ts b/examples/src/WebGL2Samples/sampler_wrap.ts index 3365a9982f3025f189255e1510dd8ba363695a2b..c0b380cfa7cfdd8d66a78796124ee8684ee821de 100644 --- a/examples/src/WebGL2Samples/sampler_wrap.ts +++ b/examples/src/WebGL2Samples/sampler_wrap.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; const canvas = document.createElement("canvas"); @@ -7,9 +7,8 @@ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; document.body.appendChild(canvas); -const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; - -const gl = canvas.getContext("webgl2", { antialias: false }); +const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; +const webgl = new WebGL(rc); // -- Divide viewport @@ -58,7 +57,7 @@ viewport[Corners.TOP_LEFT] = { // -- Initialize program -const program: IProgram = { +const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, primitive: { topology: "TRIANGLES" }, }; @@ -73,7 +72,7 @@ const positions = new Float32Array([ -1.0, 1.0, -1.0, -1.0 ]); -const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; +const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ -2.0, 2.0, @@ -83,11 +82,11 @@ const texcoords = new Float32Array([ -2.0, -2.0, -2.0, 2.0 ]); -const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; +const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initilize vertex array -const vertexArray: IVertexArrayObject = { +const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -96,7 +95,7 @@ const vertexArray: IVertexArrayObject = { // -- Initialize samplers -const samplers: ISampler[] = new Array(Corners.MAX); +const samplers: IGLSampler[] = new Array(Corners.MAX); for (let i = 0; i < Corners.MAX; ++i) { @@ -116,7 +115,7 @@ samplers[Corners.BOTTOM_LEFT].wrapT = "CLAMP_TO_EDGE"; // -- Load texture then render const imageUrl = "../../assets/img/Di-3d.png"; -let texture: ITexture; +let texture: IGLTexture; loadImage(imageUrl, function (image) { texture = { @@ -132,8 +131,8 @@ loadImage(imageUrl, function (image) function render() { // Clear color buffer - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -144,7 +143,7 @@ function render() 0.0, 0.0, 0.0, 1.0 ]); - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { mvp: matrix }, vertexArray, @@ -162,17 +161,17 @@ function render() drawArrays: { vertexCount: 6, instanceCount: 1 }, }); } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // -- Clean up - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); for (let j = 0; j < samplers.length; ++j) { - WebGL.deleteSampler(rc, samplers[j]); + webgl.deleteSampler(samplers[j]); } - WebGL.deleteVertexArray(rc, vertexArray); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); + webgl.deleteVertexArray(vertexArray); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); } diff --git a/examples/src/WebGL2Samples/texture_2d_array.ts b/examples/src/WebGL2Samples/texture_2d_array.ts index e658fa0c16301908fb12755b6ba50fe8bb8293b9..1f5b317dfae29e052086d96caac14d0407317390 100644 --- a/examples/src/WebGL2Samples/texture_2d_array.ts +++ b/examples/src/WebGL2Samples/texture_2d_array.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,10 +9,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.width = canvas.height * 960 / 540; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -25,7 +26,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -35,18 +36,18 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, } }; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; loadImage("../../assets/img/di-animation-array.jpg", function (image) { const NUM_IMAGES = 3; @@ -83,7 +84,7 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: { @@ -93,8 +94,8 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [1.0, 1.0, 1.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [1.0, 1.0, 1.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; @@ -103,7 +104,7 @@ import { getShaderSource, loadImage } from "./utility"; { // -- Render ro.uniforms.layer = frame; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); frame = (frame + 1) % NUM_IMAGES; diff --git a/examples/src/WebGL2Samples/texture_3d.ts b/examples/src/WebGL2Samples/texture_3d.ts index 5a824451fb8207ff63efb71075007cdd389c971b..dc1fda5958f49437297b51fdf8b895c6c6746d22 100644 --- a/examples/src/WebGL2Samples/texture_3d.ts +++ b/examples/src/WebGL2Samples/texture_3d.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { snoise } from "./third-party/noise3D"; import { getShaderSource } from "./utility"; @@ -10,7 +10,8 @@ import { getShaderSource } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Divide viewport @@ -77,7 +78,7 @@ import { getShaderSource } from "./utility"; } } - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_3D", internalformat: "R8", format: "RED", @@ -85,7 +86,7 @@ import { getShaderSource } from "./utility"; generateMipmap: true, sources: [{ level: 0, width: SIZE, height: SIZE, depth: SIZE, border: 0, pixels: data }], }; - const sampler: ISampler = { + const sampler: IGLSampler = { lodMinClamp: 0, lodMaxClamp: Math.log2(SIZE), minFilter: "LINEAR_MIPMAP_LINEAR", @@ -93,7 +94,7 @@ import { getShaderSource } from "./utility"; }; // -- Initialize program - const program: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; // -- Initialize buffer const positions = new Float32Array([ @@ -104,7 +105,7 @@ import { getShaderSource } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -114,11 +115,11 @@ import { getShaderSource } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Initilize vertex array - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, in_texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -157,7 +158,7 @@ import { getShaderSource } from "./utility"; ]; } - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { diffuse: { texture, sampler }, @@ -166,7 +167,7 @@ import { getShaderSource } from "./utility"; drawArrays: { vertexCount: 6 } }; - const renderObjects: IRenderObject[] = []; + const renderObjects: IGLRenderObject[] = []; for (let i = 0; i < Corners.MAX; ++i) { renderObjects.push({ @@ -175,8 +176,8 @@ import { getShaderSource } from "./utility"; }); } - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects, }; @@ -197,7 +198,7 @@ import { getShaderSource } from "./utility"; renderObjects[i].uniforms.orientation = matrices[i]; } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/texture_derivative.ts b/examples/src/WebGL2Samples/texture_derivative.ts index 9153762836628c5ee3c8ffa8f7235369466a7918..9dc9e300ef8627c80f5b2f2c2a00154947d9d538 100644 --- a/examples/src/WebGL2Samples/texture_derivative.ts +++ b/examples/src/WebGL2Samples/texture_derivative.ts @@ -1,5 +1,5 @@ +import { IGLIndexBuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IVertexBuffer, IIndexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, WebGL } from "@feng3d/webgl-renderer"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -10,10 +10,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs"), targets: [{ @@ -62,7 +63,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, 1.0, -1.0, 1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ // Front face @@ -101,7 +102,7 @@ import { getShaderSource, loadImage } from "./utility"; 1.0, 1.0, 1.0, 0.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // Element buffer @@ -114,10 +115,10 @@ import { getShaderSource, loadImage } from "./utility"; 20, 21, 22, 20, 22, 23 // left ]; - const indexBuffer: IIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; + const indexBuffer: IGLIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 3 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -128,8 +129,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Init Texture const imageUrl = "../../assets/img/Di-3d.png"; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; loadImage(imageUrl, function (image) { // -- Init 2D Texture @@ -211,15 +212,15 @@ import { getShaderSource, loadImage } from "./utility"; lastMouseY = newY; }; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: {}, drawElements: { indexCount: 36 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro] }; @@ -238,7 +239,7 @@ import { getShaderSource, loadImage } from "./utility"; ro.uniforms.pMatrix = perspectiveMatrix; ro.uniforms.diffuse = { texture, sampler }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/texture_fetch.ts b/examples/src/WebGL2Samples/texture_fetch.ts index d9a1e5249e0f468108b5d2cef9f3f46abe09676c..bc2eddbc06c088ab49e1ad1be5810c01a6527984 100644 --- a/examples/src/WebGL2Samples/texture_fetch.ts +++ b/examples/src/WebGL2Samples/texture_fetch.ts @@ -1,4 +1,4 @@ -import { IVertexBuffer, IProgram, IRenderingContext, IVertexArrayObject, ITexture, ISampler, IRenderPass, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,10 +9,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; // -- Init buffers: vec2 Position, vec2 Texcoord const positions = new Float32Array([ @@ -23,7 +24,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -33,10 +34,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -46,7 +47,7 @@ import { getShaderSource, loadImage } from "./utility"; loadImage("../../assets/img/Di-3d.png", function (image) { // -- Init Texture - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackFlipY: false, @@ -56,7 +57,7 @@ import { getShaderSource, loadImage } from "./utility"; type: "UNSIGNED_BYTE", sources: [{ level: 0, source: image }], }; - const sampler: ISampler = { + const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST", }; @@ -70,8 +71,8 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ { pipeline: program, @@ -85,13 +86,13 @@ import { getShaderSource, loadImage } from "./utility"; ], }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); }); })(); diff --git a/examples/src/WebGL2Samples/texture_format.ts b/examples/src/WebGL2Samples/texture_format.ts index ae29b39a373310a8b49cc3ad2f3d7d35c415d006..95453fd14f565575d30e7a402c0011600f5cd7c5 100644 --- a/examples/src/WebGL2Samples/texture_format.ts +++ b/examples/src/WebGL2Samples/texture_format.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ISampler, ITexture, ITextureDataType, ITextureFormat, ITextureInternalFormat, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLTextureDataType, IGLTextureFormat, IGLTextureInternalFormat, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,7 +9,8 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Viewport @@ -46,9 +47,9 @@ import { getShaderSource, loadImage } from "./utility"; } // -- Init program - const programUint: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-uint") } }; + const programUint: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-uint") } }; - const programNormalized: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-normalized") } }; + const programNormalized: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-normalized") } }; // -- Init buffers: vec2 Position, vec2 Texcoord const positions = new Float32Array([ @@ -59,7 +60,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -69,10 +70,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -94,7 +95,7 @@ import { getShaderSource, loadImage } from "./utility"; MAX: 9 }; - const textureFormats: { internalFormat: ITextureInternalFormat, format: ITextureFormat, type: ITextureDataType }[] = new Array(TextureTypes.MAX); + const textureFormats: { internalFormat: IGLTextureInternalFormat, format: IGLTextureFormat, type: IGLTextureDataType }[] = new Array(TextureTypes.MAX); textureFormats[TextureTypes.RGB] = { internalFormat: "RGB", @@ -152,8 +153,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Init Texture - const textures: ITexture[] = new Array(TextureTypes.MAX); - const samplers: ISampler[] = new Array(TextureTypes.MAX); + const textures: IGLTexture[] = new Array(TextureTypes.MAX); + const samplers: IGLSampler[] = new Array(TextureTypes.MAX); let i = 0; for (i = 0; i < TextureTypes.MAX; ++i) { @@ -183,8 +184,8 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [] }; @@ -216,17 +217,17 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }); } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); for (i = 0; i < TextureTypes.MAX; ++i) { - WebGL.deleteTexture(rc, textures[i]); + webgl.deleteTexture(textures[i]); } - WebGL.deleteProgram(rc, programUint); - WebGL.deleteProgram(rc, programNormalized); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteProgram(programUint); + webgl.deleteProgram(programNormalized); + webgl.deleteVertexArray(vertexArray); }); })(); diff --git a/examples/src/WebGL2Samples/texture_grad.ts b/examples/src/WebGL2Samples/texture_grad.ts index e49f183af8786e4e6aaf168fd351ff4176efacf7..17d74c5b97723cad126d3a1b8f716cfec3a9f62f 100644 --- a/examples/src/WebGL2Samples/texture_grad.ts +++ b/examples/src/WebGL2Samples/texture_grad.ts @@ -1,5 +1,5 @@ +import { IGLIndexBuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IIndexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -10,11 +10,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; - const gl = canvas.getContext("webgl2", { antialias: false }); + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, depthStencil: { depth: { depthtest: true } }, primitive: { cullFace: { enableCullFace: true, cullMode: "BACK" } }, @@ -59,7 +59,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, 1.0, -1.0, 1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ // Front face @@ -98,7 +98,7 @@ import { getShaderSource, loadImage } from "./utility"; 1.0, 1.0, 1.0, 0.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // Element buffer const cubeVertexIndices = [ @@ -109,10 +109,10 @@ import { getShaderSource, loadImage } from "./utility"; 16, 17, 18, 16, 18, 19, // right 20, 21, 22, 20, 22, 23 // left ]; - const indexBuffer: IIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; + const indexBuffer: IGLIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", data: new Uint16Array(cubeVertexIndices), usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 3 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -123,8 +123,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Init Texture const imageUrl = "../../assets/img/Di-3d.png"; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; loadImage(imageUrl, function (image) { // -- Init 2D Texture @@ -202,25 +202,20 @@ import { getShaderSource, loadImage } from "./utility"; lastMouseY = newY; }; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: {}, drawElements: { indexCount: 36 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; function render() { - // -- Render - gl.enable(gl.DEPTH_TEST); - gl.enable(gl.CULL_FACE); - gl.cullFace(gl.BACK); - orientation[0] = 0.00020; // yaw orientation[1] = 0.00010; // pitch orientation[2] = 0.00005; // roll @@ -233,7 +228,7 @@ import { getShaderSource, loadImage } from "./utility"; ro.uniforms.pMatrix = perspectiveMatrix; ro.uniforms.diffuse = { texture, sampler }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/texture_immutable.ts b/examples/src/WebGL2Samples/texture_immutable.ts index db88d91e9f7aa11240f3e7122653a3ff2347a1d1..17a240c1798f01465488c9ac27187754b7c0c1da 100644 --- a/examples/src/WebGL2Samples/texture_immutable.ts +++ b/examples/src/WebGL2Samples/texture_immutable.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { snoise } from "./third-party/noise3D"; import { getShaderSource, loadImage } from "./utility"; @@ -10,7 +10,8 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2" }; + const webgl = new WebGL(rc); const Corners = { LEFT: 0, @@ -35,9 +36,9 @@ import { getShaderSource, loadImage } from "./utility"; }; // -- Init program - const program: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") } }; - const program3D: IProgram = { vertex: { code: getShaderSource("vs-3d") }, fragment: { code: getShaderSource("fs-3d") } }; + const program3D: IGLProgram = { vertex: { code: getShaderSource("vs-3d") }, fragment: { code: getShaderSource("fs-3d") } }; // -- Init buffers: vec2 Position, vec2 Texcoord const positions = new Float32Array([ @@ -48,7 +49,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -58,10 +59,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, in_texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -82,7 +83,7 @@ import { getShaderSource, loadImage } from "./utility"; ]); // -- Init 2D Texture - const texture2D: ITexture = { + const texture2D: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackFlipY: false, @@ -93,7 +94,7 @@ import { getShaderSource, loadImage } from "./utility"; storage: { levels: 1, width: 512, height: 512 }, writeTextures: [{ level: 0, xoffset: 0, yoffset: 0, source: image }], }; - const sampler2D: ISampler = { + const sampler2D: IGLSampler = { minFilter: "NEAREST", magFilter: "LINEAR", wrapS: "CLAMP_TO_EDGE", @@ -101,7 +102,7 @@ import { getShaderSource, loadImage } from "./utility"; }; // -- Render - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, vertexArray, uniforms: { @@ -110,8 +111,8 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [] }; @@ -136,16 +137,16 @@ import { getShaderSource, loadImage } from "./utility"; viewport: { x: viewports[Corners.RIGHT].x, y: viewports[Corners.RIGHT].y, width: viewports[Corners.RIGHT].z, height: viewports[Corners.RIGHT].w } }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture2D); - WebGL.deleteTexture(rc, texture3D); - WebGL.deleteProgram(rc, program); - WebGL.deleteProgram(rc, program3D); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture2D); + webgl.deleteTexture(texture3D); + webgl.deleteProgram(program); + webgl.deleteProgram(program3D); + webgl.deleteVertexArray(vertexArray); }); function create3DTexture() @@ -168,7 +169,7 @@ import { getShaderSource, loadImage } from "./utility"; } } - const texture3D: ITexture = { + const texture3D: IGLTexture = { target: "TEXTURE_3D", internalformat: "R8", format: "RED", @@ -177,7 +178,7 @@ import { getShaderSource, loadImage } from "./utility"; storage: { levels: Math.log2(SIZE), width: SIZE, height: SIZE, depth: SIZE }, writeTextures: [{ level: 0, xoffset: 0, yoffset: 0, zoffset: 0, width: SIZE, height: SIZE, depth: SIZE, srcData: data }], }; - const sampler3D: ISampler = { + const sampler3D: IGLSampler = { lodMinClamp: 0, lodMaxClamp: Math.log2(SIZE), minFilter: "LINEAR_MIPMAP_LINEAR", diff --git a/examples/src/WebGL2Samples/texture_integer.ts b/examples/src/WebGL2Samples/texture_integer.ts index d82d099e99c0153d85bec804680401b94f6d6a0e..1086e8f88107dad20b3905099cc9bd9290ea5e6e 100644 --- a/examples/src/WebGL2Samples/texture_integer.ts +++ b/examples/src/WebGL2Samples/texture_integer.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,11 +9,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; - const gl = canvas.getContext("webgl2", { antialias: false }); + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -26,7 +26,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -36,10 +36,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -49,7 +49,7 @@ import { getShaderSource, loadImage } from "./utility"; loadImage("../../assets/img/Di-3d.png", function (image) { // -- Init Texture - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackFlipY: false, @@ -59,7 +59,7 @@ import { getShaderSource, loadImage } from "./utility"; type: "UNSIGNED_BYTE", sources: [{ level: 0, source: image }], }; - const sampler: ISampler = { + const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST", }; @@ -72,7 +72,7 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { MVP: matrix, @@ -82,18 +82,18 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); }); })(); diff --git a/examples/src/WebGL2Samples/texture_lod.ts b/examples/src/WebGL2Samples/texture_lod.ts index 784602d6f74d1499f2244fd190ffce005972bfff..eff387984b5dac54b21f76ecf1996773ca3f8e32 100644 --- a/examples/src/WebGL2Samples/texture_lod.ts +++ b/examples/src/WebGL2Samples/texture_lod.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,7 +9,8 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Mouse Behaviour let scale = 1.0; @@ -84,7 +85,7 @@ import { getShaderSource, loadImage } from "./utility"; }; // -- Initialize program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -97,7 +98,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 1.0, @@ -107,10 +108,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -119,8 +120,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Load texture then render const imageUrl = "../../assets/img/Di-3d.png"; - const textures: ITexture[] = new Array(Corners.MAX); - const samplers: ISampler[] = new Array(Corners.MAX); + const textures: IGLTexture[] = new Array(Corners.MAX); + const samplers: IGLSampler[] = new Array(Corners.MAX); loadImage(imageUrl, function (image) { textures[Corners.TOP_LEFT] = { @@ -187,8 +188,8 @@ import { getShaderSource, loadImage } from "./utility"; function render() { // Clear color buffer - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -199,7 +200,7 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { mvp: matrix, @@ -224,7 +225,7 @@ import { getShaderSource, loadImage } from "./utility"; }); } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/texture_offset.ts b/examples/src/WebGL2Samples/texture_offset.ts index 00bac7ec74ec10fb16b2cc9faa85fec2da4ada56..0b21a626b7b0154980b71545f8de3013aa56f779 100644 --- a/examples/src/WebGL2Samples/texture_offset.ts +++ b/examples/src/WebGL2Samples/texture_offset.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,8 +9,8 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; - const gl = canvas.getContext("webgl2", { antialias: false }); + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); const Corners = { LEFT: 0, @@ -35,9 +35,9 @@ import { getShaderSource, loadImage } from "./utility"; }; // -- Init program - const programBicubic: IProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-bicubic") } }; + const programBicubic: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-bicubic") } }; - const programOffsetBicubic: IProgram = { + const programOffsetBicubic: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs-offset-bicubic") }, }; @@ -50,7 +50,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -60,10 +60,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -73,7 +73,7 @@ import { getShaderSource, loadImage } from "./utility"; loadImage("../../assets/img/Di-3d.png", function (image) { // -- Init Texture - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackFlipY: false, @@ -83,7 +83,7 @@ import { getShaderSource, loadImage } from "./utility"; type: "UNSIGNED_BYTE", sources: [{ level: 0, source: image }], }; - const sampler: ISampler = { + const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST", wrapS: "CLAMP_TO_EDGE", @@ -91,8 +91,8 @@ import { getShaderSource, loadImage } from "./utility"; }; // -- Render - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [] }; @@ -104,7 +104,7 @@ import { getShaderSource, loadImage } from "./utility"; ]); // No offset - const ro: IRenderObject = { + const ro: IGLRenderObject = { vertexArray, pipeline: programBicubic, uniforms: { @@ -131,14 +131,14 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, programOffsetBicubic); - WebGL.deleteProgram(rc, programBicubic); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture); + webgl.deleteProgram(programOffsetBicubic); + webgl.deleteProgram(programBicubic); + webgl.deleteVertexArray(vertexArray); }); })(); diff --git a/examples/src/WebGL2Samples/texture_pixel_store.ts b/examples/src/WebGL2Samples/texture_pixel_store.ts index b18c87d979e476ed448f0e559fd2b0c0d10c3127..59292f90a3dd9ea6fc58026421d57e5ea2d730c1 100644 --- a/examples/src/WebGL2Samples/texture_pixel_store.ts +++ b/examples/src/WebGL2Samples/texture_pixel_store.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,10 +9,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -25,7 +26,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texCoords = new Float32Array([ 0.0, 1.0, @@ -35,10 +36,10 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texCoords, usage: "STATIC_DRAW" }; // -- Init VertexArray - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, texcoord: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -57,7 +58,7 @@ import { getShaderSource, loadImage } from "./utility"; const pixels = new Uint8Array(imageData.data.buffer); // -- Init Texture - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", pixelStore: { unpackAlignment: 1, @@ -70,14 +71,14 @@ import { getShaderSource, loadImage } from "./utility"; format: "RGBA", sources: [{ level: 0, width: image.width / 2, height: image.height / 2, pixels }] }; - const sampler: ISampler = { + const sampler: IGLSampler = { minFilter: "NEAREST", magFilter: "NEAREST", }; // -- Render - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -98,13 +99,13 @@ import { getShaderSource, loadImage } from "./utility"; drawArrays: { vertexCount: 6 }, }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Delete WebGL resources - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); - WebGL.deleteVertexArray(rc, vertexArray); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); + webgl.deleteVertexArray(vertexArray); }); })(); diff --git a/examples/src/WebGL2Samples/texture_srgb.ts b/examples/src/WebGL2Samples/texture_srgb.ts index e83085bae7710bc7ca71b9a639eae9c800a60638..ab999a4bf21c16c5a6778d9e6b2172d36799c6e8 100644 --- a/examples/src/WebGL2Samples/texture_srgb.ts +++ b/examples/src/WebGL2Samples/texture_srgb.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource, loadImage } from "./utility"; (function () @@ -9,11 +9,12 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Initialize program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, }; @@ -27,7 +28,7 @@ import { getShaderSource, loadImage } from "./utility"; -1.0, 1.0, -1.0, -1.0 ]); - const vertexPosBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; + const vertexPosBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }; const texcoords = new Float32Array([ 0.0, 1.0, @@ -37,11 +38,11 @@ import { getShaderSource, loadImage } from "./utility"; 0.0, 0.0, 0.0, 1.0 ]); - const vertexTexBuffer: IVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; + const vertexTexBuffer: IGLVertexBuffer = { target: "ARRAY_BUFFER", data: texcoords, usage: "STATIC_DRAW" }; // -- Initialize vertex array - const vertexArray: IVertexArrayObject = { + const vertexArray: IGLVertexArrayObject = { vertices: { position: { buffer: vertexPosBuffer, numComponents: 2 }, textureCoordinates: { buffer: vertexTexBuffer, numComponents: 2 }, @@ -51,8 +52,8 @@ import { getShaderSource, loadImage } from "./utility"; // -- Load texture then render const imageUrl = "../../assets/img/Di-3d.png"; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; loadImage(imageUrl, function (image) { texture = { @@ -70,8 +71,8 @@ import { getShaderSource, loadImage } from "./utility"; function render() { // Clear color buffer - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -90,13 +91,13 @@ import { getShaderSource, loadImage } from "./utility"; }, drawArrays: { vertexCount: 6 }, }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Cleanup - WebGL.deleteBuffer(rc, vertexPosBuffer); - WebGL.deleteBuffer(rc, vertexTexBuffer); - WebGL.deleteVertexArray(rc, vertexArray); - WebGL.deleteTexture(rc, texture); - WebGL.deleteProgram(rc, program); + webgl.deleteBuffer(vertexPosBuffer); + webgl.deleteBuffer(vertexTexBuffer); + webgl.deleteVertexArray(vertexArray); + webgl.deleteTexture(texture); + webgl.deleteProgram(program); } })(); diff --git a/examples/src/WebGL2Samples/texture_vertex.ts b/examples/src/WebGL2Samples/texture_vertex.ts index 29ec0496c42db786cc415a0ffa0d8140313ba0be..edc7d0d2768e251cb7b76e90bc3cac950b7bd662 100644 --- a/examples/src/WebGL2Samples/texture_vertex.ts +++ b/examples/src/WebGL2Samples/texture_vertex.ts @@ -1,5 +1,5 @@ +import { IGLIndexBuffer, IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLSampler, IGLTexture, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { mat4, vec3 } from "gl-matrix"; -import { IIndexBuffer, IProgram, IRenderObject, IRenderPass, IRenderingContext, ISampler, ITexture, IVertexArrayObject, IVertexBuffer, VertexAttributeTypes, WebGL } from "@feng3d/webgl-renderer"; import { GlTFLoader, Primitive } from "./third-party/gltf-loader"; import { getShaderSource, loadImage } from "./utility"; @@ -34,10 +34,11 @@ import { getShaderSource, loadImage } from "./utility"; canvas.height = canvas.width; document.body.appendChild(canvas); - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init program - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs") }, fragment: { code: getShaderSource("fs") }, depthStencil: { depth: { depthtest: true, depthCompare: "LESS" } }, }; @@ -47,14 +48,14 @@ import { getShaderSource, loadImage } from "./utility"; // var in loop let mesh; let primitive: Primitive; - let vertexBuffer: IVertexBuffer; - let indicesBuffer: IIndexBuffer; - let vertexArray: IVertexArrayObject; + let vertexBuffer: IGLVertexBuffer; + let indicesBuffer: IGLIndexBuffer; + let vertexArray: IGLVertexArrayObject; - let texture: ITexture; - let sampler: ISampler; + let texture: IGLTexture; + let sampler: IGLSampler; - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, }; @@ -189,8 +190,8 @@ import { getShaderSource, loadImage } from "./utility"; function render() { // -- Render - const rp: IRenderPass = { - passDescriptor: { + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }], depthStencilAttachment: { depthLoadOp: "clear" } }, @@ -232,7 +233,7 @@ import { getShaderSource, loadImage } from "./utility"; }); } } - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/transform_feedback_instanced.ts b/examples/src/WebGL2Samples/transform_feedback_instanced.ts index 24d7a9843b62a4d006dc914e8989356276953f7d..f3c3ca3e15722921ccb7bb66d57d16c37eb94588 100644 --- a/examples/src/WebGL2Samples/transform_feedback_instanced.ts +++ b/examples/src/WebGL2Samples/transform_feedback_instanced.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ITransformFeedback, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLTransformFeedback, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,7 +11,8 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // -- Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); canvas.addEventListener("webglcontextlost", function (event) { @@ -63,12 +64,12 @@ import { getShaderSource } from "./utility"; const COLOR_LOCATION = 3; const NUM_LOCATIONS = 4; - const vertexArrays: IVertexArrayObject[][] = []; + const vertexArrays: IGLVertexArrayObject[][] = []; // Transform feedback objects track output buffer state - const transformFeedbacks: ITransformFeedback[] = []; + const transformFeedbacks: IGLTransformFeedback[] = []; - const vertexBuffers: IVertexBuffer[][] = new Array(vertexArrays.length); + const vertexBuffers: IGLVertexBuffer[][] = new Array(vertexArrays.length); for (let va = 0; va < 2; ++va) { @@ -103,7 +104,7 @@ import { getShaderSource } from "./utility"; }; } - const transformRO: IRenderObject = { + const transformRO: IGLRenderObject = { pipeline: programs[PROGRAM_TRANSFORM], vertexArray: null, transformFeedback: null, @@ -111,14 +112,14 @@ import { getShaderSource } from "./utility"; drawArrays: { vertexCount: NUM_INSTANCES }, }; - const renderRO: IRenderObject = { + const renderRO: IGLRenderObject = { pipeline: programs[PROGRAM_DRAW], uniforms: {}, drawArrays: { vertexCount: 3, instanceCount: NUM_INSTANCES }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [transformRO, renderRO], }; @@ -126,7 +127,7 @@ import { getShaderSource } from "./utility"; function initPrograms() { - const programTransform: IProgram = { + const programTransform: IGLProgram = { vertex: { code: getShaderSource("vs-emit") }, fragment: { code: getShaderSource("fs-emit") }, transformFeedbackVaryings: { varyings: ["v_offset", "v_rotation"], bufferMode: "SEPARATE_ATTRIBS" }, rasterizerDiscard: true, @@ -134,7 +135,7 @@ import { getShaderSource } from "./utility"; }; // Setup program for draw shader - const programDraw: IProgram = { + const programDraw: IGLProgram = { vertex: { code: getShaderSource("vs-draw") }, fragment: { code: getShaderSource("fs-draw"), targets: [{ @@ -179,7 +180,7 @@ import { getShaderSource } from "./utility"; renderRO.viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height - 10 }; renderRO.vertexArray = vertexArrays[currentSourceIdx][1]; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); requestAnimationFrame(render); } diff --git a/examples/src/WebGL2Samples/transform_feedback_interleaved.ts b/examples/src/WebGL2Samples/transform_feedback_interleaved.ts index bd1e6ca1953296ee2682e8b3346b1e207e8f4c59..8cadd253bdef0a84a53a5d49ec0e9a8f26eee2a2 100644 --- a/examples/src/WebGL2Samples/transform_feedback_interleaved.ts +++ b/examples/src/WebGL2Samples/transform_feedback_interleaved.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ITransformFeedback, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLProgram, IGLRenderPass, IGLRenderingContext, IGLTransformFeedback, IGLVertexArrayObject, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,7 +11,8 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // -- Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init Program const PROGRAM_TRANSFORM = 0; @@ -19,7 +20,7 @@ import { getShaderSource } from "./utility"; const programTransform = (function (vertexShaderSourceTransform, fragmentShaderSourceTransform) { - const programTransform: IProgram = { + const programTransform: IGLProgram = { vertex: { code: vertexShaderSourceTransform }, fragment: { code: fragmentShaderSourceTransform }, transformFeedbackVaryings: { varyings: ["gl_Position", "v_color"], bufferMode: "INTERLEAVED_ATTRIBS" }, @@ -29,7 +30,7 @@ import { getShaderSource } from "./utility"; return programTransform; })(getShaderSource("vs-transform"), getShaderSource("fs-transform")); - const programFeedback: IProgram = { + const programFeedback: IGLProgram = { vertex: { code: getShaderSource("vs-feedback") }, fragment: { code: getShaderSource("fs-feedback") }, }; @@ -47,7 +48,7 @@ import { getShaderSource } from "./utility"; -1.0, -1.0, 0.0, 1.0 ]); - const buffers: IVertexBuffer[] = [ + const buffers: IGLVertexBuffer[] = [ // Transform buffer { target: "ARRAY_BUFFER", data: vertices, usage: "STATIC_DRAW" }, // Feedback empty buffer @@ -55,7 +56,7 @@ import { getShaderSource } from "./utility"; ]; // -- Init Vertex Array - const vertexArrays: IVertexArrayObject[] = [ + const vertexArrays: IGLVertexArrayObject[] = [ { vertices: { position: { buffer: buffers[PROGRAM_TRANSFORM], numComponents: 4 }, @@ -70,15 +71,15 @@ import { getShaderSource } from "./utility"; ]; // -- Init TransformFeedback - const transformFeedback: ITransformFeedback = { + const transformFeedback: IGLTransformFeedback = { bindBuffers: [ { index: 0, buffer: buffers[PROGRAM_FEEDBACK] } ] }; // -- Render - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -107,14 +108,14 @@ import { getShaderSource } from "./utility"; drawArrays: { vertexCount: VERTEX_COUNT }, }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // -- Delete WebGL resources - WebGL.deleteTransformFeedback(rc, transformFeedback); - WebGL.deleteBuffer(rc, buffers[PROGRAM_TRANSFORM]); - WebGL.deleteBuffer(rc, buffers[PROGRAM_FEEDBACK]); - WebGL.deleteProgram(rc, programs[PROGRAM_TRANSFORM]); - WebGL.deleteProgram(rc, programs[PROGRAM_FEEDBACK]); - WebGL.deleteVertexArray(rc, vertexArrays[PROGRAM_TRANSFORM]); - WebGL.deleteVertexArray(rc, vertexArrays[PROGRAM_FEEDBACK]); + webgl.deleteTransformFeedback(transformFeedback); + webgl.deleteBuffer(buffers[PROGRAM_TRANSFORM]); + webgl.deleteBuffer(buffers[PROGRAM_FEEDBACK]); + webgl.deleteProgram(programs[PROGRAM_TRANSFORM]); + webgl.deleteProgram(programs[PROGRAM_FEEDBACK]); + webgl.deleteVertexArray(vertexArrays[PROGRAM_TRANSFORM]); + webgl.deleteVertexArray(vertexArrays[PROGRAM_FEEDBACK]); })(); diff --git a/examples/src/WebGL2Samples/transform_feedback_separated.ts b/examples/src/WebGL2Samples/transform_feedback_separated.ts index 807b9813c783bb8da30686a8d7f54e153b502ffc..8122b2d107a7e49575e5bb60b833330606c07e0c 100644 --- a/examples/src/WebGL2Samples/transform_feedback_separated.ts +++ b/examples/src/WebGL2Samples/transform_feedback_separated.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderPass, IRenderingContext, ITransformFeedback, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderPass, IGLRenderingContext, IGLTransformFeedback, IGLVertexArrayObject, IGLProgram, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,12 +11,13 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // -- Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); // -- Init Program const programTransform = (function (vertexShaderSourceTransform, fragmentShaderSourceTransform) { - const programTransform: IProgram = { + const programTransform: IGLProgram = { vertex: { code: vertexShaderSourceTransform }, fragment: { code: fragmentShaderSourceTransform }, transformFeedbackVaryings: { varyings: ["gl_Position", "v_color"], bufferMode: "SEPARATE_ATTRIBS" }, @@ -26,7 +27,7 @@ import { getShaderSource } from "./utility"; return programTransform; })(getShaderSource("vs-transform"), getShaderSource("fs-transform")); - const programFeedback: IProgram = { + const programFeedback: IGLProgram = { vertex: { code: getShaderSource("vs-feedback") }, fragment: { code: getShaderSource("fs-feedback") }, }; @@ -53,7 +54,7 @@ import { getShaderSource } from "./utility"; MAX: 3 }; - const buffers: IVertexBuffer[] = [ + const buffers: IGLVertexBuffer[] = [ // Transform buffer { target: "ARRAY_BUFFER", data: positions, usage: "STATIC_DRAW" }, // Feedback empty buffers @@ -64,7 +65,7 @@ import { getShaderSource } from "./utility"; ]; // -- Init Transform Vertex Array - const vertexArrays: IVertexArrayObject[] = [ + const vertexArrays: IGLVertexArrayObject[] = [ { vertices: { position: { buffer: buffers[BufferType.VERTEX], numComponents: 4 }, @@ -79,7 +80,7 @@ import { getShaderSource } from "./utility"; ]; // -- Init TransformFeedback - const transformFeedback: ITransformFeedback = { + const transformFeedback: IGLTransformFeedback = { bindBuffers: [ { index: 0, buffer: buffers[BufferType.POSITION] }, { index: 1, buffer: buffers[BufferType.COLOR] }, @@ -87,8 +88,8 @@ import { getShaderSource } from "./utility"; }; // -- Render - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [], }; @@ -117,7 +118,7 @@ import { getShaderSource } from "./utility"; drawArrays: { vertexCount: VERTEX_COUNT }, }); - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // -- Delete WebGL resources // gl.deleteTransformFeedback(transformFeedback); diff --git a/examples/src/WebGL2Samples/transform_feedback_separated_2.ts b/examples/src/WebGL2Samples/transform_feedback_separated_2.ts index a74f7955df7aedf686b068ea2c7b4653e8de9c43..c91e46835f6d10a236b69315f5183329b4b8fce3 100644 --- a/examples/src/WebGL2Samples/transform_feedback_separated_2.ts +++ b/examples/src/WebGL2Samples/transform_feedback_separated_2.ts @@ -1,4 +1,4 @@ -import { IProgram, IRenderObject, IRenderPass, IRenderingContext, ITransformFeedback, IVertexArrayObject, IVertexBuffer, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderObject, IGLRenderPass, IGLRenderingContext, IGLTransformFeedback, IGLVertexArrayObject, IGLProgram, IGLVertexBuffer, WebGL } from "@feng3d/webgl"; import { getShaderSource } from "./utility"; (function () @@ -11,7 +11,8 @@ import { getShaderSource } from "./utility"; document.body.appendChild(canvas); // -- Init WebGL Context - const rc: IRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const rc: IGLRenderingContext = { canvasId: "glcanvas", contextId: "webgl2", antialias: false }; + const webgl = new WebGL(rc); canvas.addEventListener("webglcontextlost", function (event) { @@ -55,12 +56,12 @@ import { getShaderSource } from "./utility"; } // -- Init Vertex Arrays and Buffers - const particleVAOs: IVertexArrayObject[] = []; + const particleVAOs: IGLVertexArrayObject[] = []; // Transform feedback objects track output buffer state - const particleTransformFeedbacks: ITransformFeedback[] = []; + const particleTransformFeedbacks: IGLTransformFeedback[] = []; - const particleVBOs: IVertexBuffer[][] = new Array(particleVAOs.length); + const particleVBOs: IGLVertexBuffer[][] = new Array(particleVAOs.length); for (let i = 0; i < 2; ++i) { @@ -100,7 +101,7 @@ import { getShaderSource } from "./utility"; function initProgram() { - const program: IProgram = { + const program: IGLProgram = { vertex: { code: getShaderSource("vs-draw") }, fragment: { code: getShaderSource("fs-draw"), @@ -118,7 +119,7 @@ import { getShaderSource } from "./utility"; return program; } - const ro: IRenderObject = { + const ro: IGLRenderObject = { pipeline: program, uniforms: { u_color: [0.0, 1.0, 1.0, 1.0], @@ -128,8 +129,8 @@ import { getShaderSource } from "./utility"; drawArrays: { vertexCount: NUM_PARTICLES }, }; - const rp: IRenderPass = { - passDescriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, + const rp: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear" }] }, renderObjects: [ro], }; @@ -147,7 +148,7 @@ import { getShaderSource } from "./utility"; ro.uniforms.u_time = time; - WebGL.runRenderPass(rc, rp); + webgl.runRenderPass(rp); // Ping pong the buffers currentSourceIdx = (currentSourceIdx + 1) % 2; diff --git a/examples/src/regl-examples/basic.ts b/examples/src/regl-examples/basic.ts index bdc273327d8c08e0f6ced4a146dd2456c3b41da3..187b4c7368054ed5df0638886631e110ae3564cb 100644 --- a/examples/src/regl-examples/basic.ts +++ b/examples/src/regl-examples/basic.ts @@ -1,4 +1,4 @@ -import { IRenderObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderObject, WebGL } from "@feng3d/webgl"; /** * 让T中以及所有键值中的所有键都是可选的 @@ -16,7 +16,9 @@ webglcanvas.style.width = "100%"; webglcanvas.style.height = "100%"; document.body.appendChild(webglcanvas); -const renderObject: IRenderObject = { +const webgl = new WebGL({ canvasId: "glcanvas" }); + +const renderObject: IGLRenderObject = { vertexArray: { vertices: { position: { @@ -60,7 +62,7 @@ function draw() webglcanvas.width = webglcanvas.clientWidth; webglcanvas.height = webglcanvas.clientHeight; - WebGL.runRenderPass({ canvasId: "glcanvas" }, { + webgl.runRenderPass({ renderObjects: [renderObject] }); diff --git a/examples/src/regl-examples/batch.ts b/examples/src/regl-examples/batch.ts index 39b2ef21350a2d505a23e10dc16ca60dbb93e029..61ea0aa2e225bf738d2e4d0ff3f0b9da9845071a 100644 --- a/examples/src/regl-examples/batch.ts +++ b/examples/src/regl-examples/batch.ts @@ -1,4 +1,4 @@ -import { IRenderObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderObject, IGLRenderPipeline, IGLVertexArrayObject, WebGL } from "@feng3d/webgl"; const webglcanvas = document.createElement("canvas"); webglcanvas.id = "glcanvas"; @@ -9,6 +9,8 @@ webglcanvas.style.width = "100%"; webglcanvas.style.height = "100%"; document.body.appendChild(webglcanvas); +const webgl = new WebGL({ canvasId: "glcanvas" }); + let batchId = 0; let tick = 0; const offsets = [{ offset: [-1, -1] }, @@ -21,63 +23,75 @@ const offsets = [{ offset: [-1, -1] }, { offset: [1, 0] }, { offset: [1, 1] }]; -const renderObject: IRenderObject = { - vertexArray: { - vertices: { - position: { - buffer: { - target: "ARRAY_BUFFER", - data: new Float32Array([ - 0.5, 0, - 0, 0.5, - 1, 1 - ]) - }, numComponents: 2 - }, - } - }, - uniforms: { - color: () => [ - Math.sin(0.02 * ((0.1 + Math.sin(batchId)) * tick + 3.0 * batchId)), - Math.cos(0.02 * (0.02 * tick + 0.1 * batchId)), - Math.sin(0.02 * ((0.3 + Math.cos(2.0 * batchId)) * tick + 0.8 * batchId)), - 1], - angle: () => 0.01 * tick, - offset: () => offsets[batchId].offset, - }, - pipeline: { - vertex: { - code: `precision mediump float; - attribute vec2 position; - uniform float angle; - uniform vec2 offset; - void main() { - gl_Position = vec4( - cos(angle) * position.x + sin(angle) * position.y + offset.x, - -sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1); - }` }, - fragment: { - code: `precision mediump float; - uniform vec4 color; - void main() { - gl_FragColor = color; - }` }, - depthStencil: { depth: { depthtest: true } }, +const pipeline: IGLRenderPipeline = { + vertex: { + code: `precision mediump float; + attribute vec2 position; + uniform float angle; + uniform vec2 offset; + void main() { + gl_Position = vec4( + cos(angle) * position.x + sin(angle) * position.y + offset.x, + -sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1); + }` }, + fragment: { + code: `precision mediump float; + uniform vec4 color; + void main() { + gl_FragColor = color; + }` }, + depthStencil: { depth: { depthtest: true } }, +}; + +const vertexArray: IGLVertexArrayObject = { + vertices: { + position: { + buffer: { + target: "ARRAY_BUFFER", + data: new Float32Array([ + 0.5, 0, + 0, 0.5, + 1, 1 + ]) + }, numComponents: 2 + }, } }; +function getRenderObject(tick: number, batchId: number) +{ + const renderObject: IGLRenderObject = { + vertexArray, + uniforms: { + color: () => [ + Math.sin(0.02 * ((0.1 + Math.sin(batchId)) * tick + 3.0 * batchId)), + Math.cos(0.02 * (0.02 * tick + 0.1 * batchId)), + Math.sin(0.02 * ((0.3 + Math.cos(2.0 * batchId)) * tick + 0.8 * batchId)), + 1], + angle: () => 0.01 * tick, + offset: () => offsets[batchId].offset, + }, + pipeline, + }; + + return renderObject; +} + function draw() { webglcanvas.width = webglcanvas.clientWidth; webglcanvas.height = webglcanvas.clientHeight; tick++; + const renderObjects: IGLRenderObject[] = []; for (let i = 0; i < offsets.length; i++) { batchId = i; - WebGL.runRenderObject({ canvasId: "glcanvas" }, renderObject); + renderObjects.push(getRenderObject(tick, batchId)); } + webgl.runRenderPass({ renderObjects }); + requestAnimationFrame(draw); } draw(); diff --git a/examples/src/regl-examples/blur.ts b/examples/src/regl-examples/blur.ts index cc118755247ede8415da6a1d4159ea32520adae7..f4c048de3540e797938d333748c6caa9113599ea 100644 --- a/examples/src/regl-examples/blur.ts +++ b/examples/src/regl-examples/blur.ts @@ -1,12 +1,14 @@ +import { IGLRenderObject, IGLRenderPipeline, IGLVertexArrayObject, WebGL } from "@feng3d/webgl"; + import { fit } from "./hughsk/canvas-fit"; import { attachCamera } from "./hughsk/canvas-orbit-camera"; -import { IRenderObject, WebGL } from "@feng3d/webgl-renderer"; - const canvas = document.body.appendChild(document.createElement("canvas")); canvas.id = "glcanvas"; window.addEventListener("resize", fit(canvas), false); +const webgl = new WebGL({ canvasId: "glcanvas" }); + const camera = attachCamera(canvas); // increase and decrease the blur amount by modifying this value. @@ -28,65 +30,77 @@ const offsets = [{ offset: [-1, -1] }, { offset: [1, 0] }, { offset: [1, 1] }]; -const renderObject: IRenderObject = { - vertexArray: { - vertices: { - position: { - buffer: { - target: "ARRAY_BUFFER", - data: new Float32Array([ - 0.5, 0, - 0, 0.5, - 1, 1 - ]) - }, numComponents: 2 - }, - } - }, - uniforms: { - color: () => [ - Math.sin(0.02 * ((0.1 + Math.sin(batchId)) * tick + 3.0 * batchId)), - Math.cos(0.02 * (0.02 * tick + 0.1 * batchId)), - Math.sin(0.02 * ((0.3 + Math.cos(2.0 * batchId)) * tick + 0.8 * batchId)), - 1], - angle: () => 0.01 * tick, - offset: () => offsets[batchId].offset, - }, - pipeline: { - vertex: { - code: `precision mediump float; - attribute vec2 position; - uniform float angle; - uniform vec2 offset; - void main() { - gl_Position = vec4( - cos(angle) * position.x + sin(angle) * position.y + offset.x, - -sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1); - }` }, - fragment: { - code: `precision mediump float; - uniform vec4 color; - void main() { - gl_FragColor = color; - }`, - targets: [{ blend: {} }], +const vertexArray: IGLVertexArrayObject = { + vertices: { + position: { + buffer: { + target: "ARRAY_BUFFER", + data: new Float32Array([ + 0.5, 0, + 0, 0.5, + 1, 1 + ]) + }, numComponents: 2 }, - depthStencil: { depth: { depthtest: true } }, } }; +const pipeline: IGLRenderPipeline = { + vertex: { + code: `precision mediump float; + attribute vec2 position; + uniform float angle; + uniform vec2 offset; + void main() { + gl_Position = vec4( + cos(angle) * position.x + sin(angle) * position.y + offset.x, + -sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1); + }` }, + fragment: { + code: `precision mediump float; + uniform vec4 color; + void main() { + gl_FragColor = color; + }`, + targets: [{ blend: {} }], + }, + depthStencil: { depth: { depthtest: true } }, +}; + +function getRenderObject(tick: number, batchId: number) +{ + const renderObject: IGLRenderObject = { + vertexArray, + uniforms: { + color: () => [ + Math.sin(0.02 * ((0.1 + Math.sin(batchId)) * tick + 3.0 * batchId)), + Math.cos(0.02 * (0.02 * tick + 0.1 * batchId)), + Math.sin(0.02 * ((0.3 + Math.cos(2.0 * batchId)) * tick + 0.8 * batchId)), + 1], + angle: () => 0.01 * tick, + offset: () => offsets[batchId].offset, + }, + pipeline, + }; + + return renderObject; +} + function draw() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; tick++; + const renderObjects: IGLRenderObject[] = []; for (let i = 0; i < offsets.length; i++) { batchId = i; - WebGL.runRenderObject({ canvasId: "glcanvas" }, renderObject); + renderObjects.push(getRenderObject(tick, batchId)); } + webgl.runRenderPass({ renderObjects }); + requestAnimationFrame(draw); } draw(); diff --git a/examples/src/regl-examples/bunny.ts b/examples/src/regl-examples/bunny.ts index c316d7f7e8017513600b3da9e86ee2c82427056d..f0474ce34328ce69fb392b26854d9f62ac07cb67 100644 --- a/examples/src/regl-examples/bunny.ts +++ b/examples/src/regl-examples/bunny.ts @@ -1,4 +1,5 @@ -import { IRenderObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderObject, WebGL } from "@feng3d/webgl"; + import * as bunny from "./mikolalysenko/bunny"; import * as mat4 from "./stackgl/gl-mat4"; @@ -11,6 +12,8 @@ webglcanvas.style.width = "100%"; webglcanvas.style.height = "100%"; document.body.appendChild(webglcanvas); +const webgl = new WebGL({ canvasId: "glcanvas", antialias: true }); + const positions = bunny.positions.reduce((pv: number[], cv: number[]) => { cv.forEach((v) => { pv.push(v); }); @@ -29,7 +32,7 @@ let tick = 0; let viewportWidth = webglcanvas.clientWidth; let viewportHeight = webglcanvas.clientHeight; -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { vertexArray: { vertices: { position: { buffer: { target: "ARRAY_BUFFER", data: new Float32Array(positions) }, numComponents: 3 }, @@ -79,7 +82,7 @@ function draw() viewportHeight = webglcanvas.height = webglcanvas.clientHeight; tick++; - WebGL.runRenderObject({ canvasId: "glcanvas", antialias: true }, renderObject); + webgl.runRenderPass({ renderObjects: [renderObject] }); requestAnimationFrame(draw); } diff --git a/examples/src/regl-examples/camera.ts b/examples/src/regl-examples/camera.ts index 6134199cce542bb629738bf779ee601e2515d69a..ee0069b1e320cde5bebe84d87bdadc3c635e8f50 100644 --- a/examples/src/regl-examples/camera.ts +++ b/examples/src/regl-examples/camera.ts @@ -1,4 +1,5 @@ -import { IRenderObject, WebGL } from "@feng3d/webgl-renderer"; +import { IGLRenderObject, WebGL } from "@feng3d/webgl"; + import { angleNormals } from "./mikolalysenko/angle-normals"; import * as bunny from "./mikolalysenko/bunny"; import { createCamera } from "./util/camera"; @@ -12,6 +13,8 @@ webglcanvas.style.width = "100%"; webglcanvas.style.height = "100%"; document.body.appendChild(webglcanvas); +const webgl = new WebGL({ canvasId: "glcanvas", antialias: true }); + const camera = createCamera({ center: [0, 2.5, 0] }); @@ -37,7 +40,7 @@ const normals = angleNormals(bunny.cells, bunny.positions).reduce((pv: number[], return pv; }, []); -const renderObject: IRenderObject = { +const renderObject: IGLRenderObject = { vertexArray: { vertices: { position: { buffer: { target: "ARRAY_BUFFER", data: new Float32Array(positions) }, numComponents: 3 }, @@ -75,7 +78,7 @@ function draw() camera(renderObject, webglcanvas.width, webglcanvas.height); - WebGL.runRenderObject({ canvasId: "glcanvas", antialias: true }, renderObject); + webgl.runRenderPass({ renderObjects: [renderObject] }); requestAnimationFrame(draw); } diff --git a/examples/src/regl-examples/cloth.ts b/examples/src/regl-examples/cloth.ts index 5fc60fecaaa2a84e64dc92ab7be7e9250af42a20..ba5792b6e9c9dae5c935eddf3a0a4dae0afb6c23 100644 --- a/examples/src/regl-examples/cloth.ts +++ b/examples/src/regl-examples/cloth.ts @@ -1,9 +1,10 @@ +import { IGLRenderObject, IGLSamplerTexture, WebGL } from "@feng3d/webgl"; + import { fit } from "./hughsk/canvas-fit"; import { attachCamera } from "./hughsk/canvas-orbit-camera"; import * as mat4 from "./stackgl/gl-mat4"; import * as vec3 from "./stackgl/gl-vec3"; -import { IRenderObject, ISamplerTexture, WebGL } from "@feng3d/webgl-renderer"; (async () => { const canvas = document.createElement("canvas"); @@ -15,6 +16,8 @@ import { IRenderObject, ISamplerTexture, WebGL } from "@feng3d/webgl-renderer"; canvas.style.height = "100%"; document.body.appendChild(canvas); + const webgl = new WebGL({ canvasId: "glcanvas" }); + const camera = attachCamera(canvas); window.addEventListener("resize", fit(canvas), false); @@ -163,7 +166,7 @@ import { IRenderObject, ISamplerTexture, WebGL } from "@feng3d/webgl-renderer"; let viewportWidth = 1; let viewportHeight = 1; - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { vertexArray: { vertices: { position: { buffer: { target: "ARRAY_BUFFER", data: new Float32Array(positions) }, numComponents: 3 }, @@ -368,7 +371,8 @@ import { IRenderObject, ISamplerTexture, WebGL } from "@feng3d/webgl-renderer"; camera.tick(); - WebGL.runRenderObject({ canvasId: "glcanvas" }, renderObject); + webgl.runRenderPass({ renderObjects: [renderObject] }); + requestAnimationFrame(draw); } @@ -376,7 +380,7 @@ import { IRenderObject, ISamplerTexture, WebGL } from "@feng3d/webgl-renderer"; img.src = "../../assets/cloth.png"; await img.decode(); - const diffuse: ISamplerTexture = { texture: { generateMipmap: true, sources: [{ source: img }] }, sampler: { minFilter: "LINEAR_MIPMAP_LINEAR", wrapS: "REPEAT", wrapT: "REPEAT" } }; + const diffuse: IGLSamplerTexture = { texture: { generateMipmap: true, sources: [{ source: img }] }, sampler: { minFilter: "LINEAR_MIPMAP_LINEAR", wrapS: "REPEAT", wrapT: "REPEAT" } }; draw(); })(); \ No newline at end of file diff --git a/examples/src/regl-examples/cube.ts b/examples/src/regl-examples/cube.ts index 87cfb69da75edaca26ea4456acf6a7b5e20010bb..854a4c5d5f3d752bb0a4849e8dfe8327f8634ef3 100644 --- a/examples/src/regl-examples/cube.ts +++ b/examples/src/regl-examples/cube.ts @@ -1,5 +1,4 @@ -import { IRenderObject, ITexture, WebGL } from "@feng3d/webgl-renderer"; -import { ISamplerTexture } from "../../../src/data/ISamplerTexture"; +import { IGLRenderObject, IGLSamplerTexture, WebGL } from "@feng3d/webgl"; import * as mat4 from "./stackgl/gl-mat4"; (async () => @@ -13,6 +12,8 @@ import * as mat4 from "./stackgl/gl-mat4"; webglcanvas.style.height = "100%"; document.body.appendChild(webglcanvas); + const webgl = new WebGL({ canvasId: "glcanvas" }); + const cubePosition = [ [-0.5, +0.5, +0.5], [+0.5, +0.5, +0.5], [+0.5, -0.5, +0.5], [-0.5, -0.5, +0.5], // positive z face. [+0.5, +0.5, +0.5], [+0.5, +0.5, -0.5], [+0.5, -0.5, -0.5], [+0.5, -0.5, +0.5], // positive x face @@ -65,7 +66,7 @@ import * as mat4 from "./stackgl/gl-mat4"; let viewportWidth = 1; let viewportHeight = 1; - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { vertexArray: { vertices: { position: { buffer: { target: "ARRAY_BUFFER", data: new Float32Array(positions) }, numComponents: 3 }, @@ -122,7 +123,7 @@ import * as mat4 from "./stackgl/gl-mat4"; viewportWidth = webglcanvas.width = webglcanvas.clientWidth; viewportHeight = webglcanvas.height = webglcanvas.clientHeight; - WebGL.runRenderObject({ canvasId: "glcanvas" }, renderObject); + webgl.runRenderPass({ renderObjects: [renderObject] }); requestAnimationFrame(draw); } @@ -130,7 +131,7 @@ import * as mat4 from "./stackgl/gl-mat4"; img.src = "../../assets/peppers.png"; await img.decode(); - const diffuse: ISamplerTexture = { texture: { sources: [{ source: img }] }, sampler: { minFilter: "LINEAR" } }; + const diffuse: IGLSamplerTexture = { texture: { sources: [{ source: img }] }, sampler: { minFilter: "LINEAR" } }; draw(); })(); \ No newline at end of file diff --git a/examples/src/regl-examples/util/camera.ts b/examples/src/regl-examples/util/camera.ts index 91f3bea671e84061e9a1a272afa54f075146d888..ac1fdfd696820d77d1b63a3885f17a1245c1f7ca 100644 --- a/examples/src/regl-examples/util/camera.ts +++ b/examples/src/regl-examples/util/camera.ts @@ -1,4 +1,5 @@ -import { IRenderObject } from "../../../../src"; +import { IGLRenderObject } from "@feng3d/webgl"; + import { mouseListen as mouseChange } from "../mikolalysenko/mouse-change"; import { mouseWheelListen as mouseWheel } from "../mikolalysenko/mouse-wheel"; import { identity, lookAt, perspective } from "../stackgl/gl-mat4"; @@ -100,7 +101,7 @@ export function createCamera(props) lookAt(cameraState.view, eye, center, up); } - const injectContext = (renderObject: IRenderObject, viewportWidth: number, viewportHeight: number) => + const injectContext = (renderObject: IGLRenderObject, viewportWidth: number, viewportHeight: number) => { Object.keys(cameraState).forEach(function (name) { @@ -115,7 +116,7 @@ export function createCamera(props) 1000.0); }; - function setupCamera(renderObject: IRenderObject, viewportWidth: number, viewportHeight: number) + function setupCamera(renderObject: IGLRenderObject, viewportWidth: number, viewportHeight: number) { updateCamera(); injectContext(renderObject, viewportWidth, viewportHeight); diff --git a/examples/src/webgl-examples/sample1.ts b/examples/src/webgl-examples/sample1.ts index 259181f3951112bb73834560a8e097447409bfba..b9a171d21efc473c5a09bba6d8d4aa01e30049a0 100644 --- a/examples/src/webgl-examples/sample1.ts +++ b/examples/src/webgl-examples/sample1.ts @@ -1,12 +1,13 @@ // see https://github.com/mdn/dom-examples/blob/main/webgl-examples/tutorial/sample1/webgl-demo.js // https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/ -import { WebGL } from "@feng3d/webgl-renderer"; +import { WebGL } from "@feng3d/webgl"; function main() { - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, { - passDescriptor: { + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + webgl.runRenderPass({ + descriptor: { colorAttachments: [{ clearValue: [1, 0, 0, 0.5], loadOp: "clear", diff --git a/examples/src/webgl-examples/sample2.ts b/examples/src/webgl-examples/sample2.ts index 406183f22fd608dbddf863d34c77364967ee6332..c1e0c1738780f35c0e07c756803911d71b9f36c3 100644 --- a/examples/src/webgl-examples/sample2.ts +++ b/examples/src/webgl-examples/sample2.ts @@ -1,6 +1,5 @@ +import { IGLRenderPass, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { WebGL } from "@feng3d/webgl-renderer"; -import { IRenderPass } from "../../../src/data/IRenderPass"; main(); @@ -10,8 +9,10 @@ function main() const { projectionMatrix, modelViewMatrix } = drawScene(canvas); - const renderPasss: IRenderPass = { - passDescriptor: { + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0, 0, 0, 1], loadOp: "clear", @@ -65,7 +66,7 @@ function main() }], }; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); } function drawScene(canvas: HTMLCanvasElement) diff --git a/examples/src/webgl-examples/sample3.ts b/examples/src/webgl-examples/sample3.ts index bd8e389304d2d0488bdfd002ad0d05d3b8a86c25..2a15a711770f9cea89a1327b0ef3f619ad05e386 100644 --- a/examples/src/webgl-examples/sample3.ts +++ b/examples/src/webgl-examples/sample3.ts @@ -1,5 +1,5 @@ +import { IGLRenderPass, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderPass, WebGL } from "@feng3d/webgl-renderer"; main(); @@ -13,8 +13,10 @@ function main() // Draw the scene const { projectionMatrix, modelViewMatrix } = drawScene(canvas); - const renderPasss: IRenderPass = { - passDescriptor: { + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -92,7 +94,7 @@ function main() }], }; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); } // diff --git a/examples/src/webgl-examples/sample4.ts b/examples/src/webgl-examples/sample4.ts index f90cb58fb3efcd0d61dacc337fd7dcb7e45bb602..b3629e6f58470fc16f6f8cbe195fbafdb7364365 100644 --- a/examples/src/webgl-examples/sample4.ts +++ b/examples/src/webgl-examples/sample4.ts @@ -1,5 +1,5 @@ +import { IGLRenderObject, IGLRenderPass, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderObject, IRenderPass, WebGL } from "@feng3d/webgl-renderer"; let squareRotation = 0.0; @@ -12,7 +12,9 @@ function main() { const canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; - const renderObject: IRenderObject = { + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + + const renderObject: IGLRenderObject = { pipeline: { primitive: { topology: "TRIANGLE_STRIP" }, vertex: { @@ -76,8 +78,8 @@ function main() drawArrays: { firstVertex: 0, vertexCount: 4 }, }; - const renderPasss: IRenderPass = { - passDescriptor: { + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -104,7 +106,7 @@ function main() renderObject.uniforms.uProjectionMatrix = projectionMatrix; renderObject.uniforms.uModelViewMatrix = modelViewMatrix; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); requestAnimationFrame(render); } diff --git a/examples/src/webgl-examples/sample5.ts b/examples/src/webgl-examples/sample5.ts index df0ff7c6246a13dd1c43982017e5f908b4619abf..c9f96337842e4483a6e4c89501392e6e4f58500a 100644 --- a/examples/src/webgl-examples/sample5.ts +++ b/examples/src/webgl-examples/sample5.ts @@ -1,5 +1,5 @@ +import { IGLRenderObject, IGLRenderPass, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderObject, IRenderPass, WebGL } from "@feng3d/webgl-renderer"; let cubeRotation = 0.0; @@ -12,11 +12,13 @@ function main() { const canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + // Here's where we call the routine that builds all the // objects we'll be drawing. const buffers = initBuffers(); - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: { primitive: { topology: "TRIANGLES" }, vertex: { @@ -72,8 +74,8 @@ function main() drawElements: { firstIndex: 0, indexCount: 36 }, }; - const renderPasss: IRenderPass = { - passDescriptor: { + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -100,7 +102,7 @@ function main() renderObject.uniforms.uProjectionMatrix = projectionMatrix; renderObject.uniforms.uModelViewMatrix = modelViewMatrix; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); requestAnimationFrame(render); } diff --git a/examples/src/webgl-examples/sample6.ts b/examples/src/webgl-examples/sample6.ts index 39c0891bc66534e8824851ff84b9c118f7172cdf..f16c76fa75ba2fecb3f22c4a57c0a3571a726530 100644 --- a/examples/src/webgl-examples/sample6.ts +++ b/examples/src/webgl-examples/sample6.ts @@ -1,5 +1,5 @@ +import { IGLRenderObject, IGLRenderPass, IGLSampler, IGLTexture, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderObject, ITexture, IRenderPass, WebGL, ISampler } from "@feng3d/webgl-renderer"; let cubeRotation = 0.0; @@ -12,13 +12,15 @@ async function main() { const canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + // Here's where we call the routine that builds all the // objects we'll be drawing. const buffers = initBuffers(); const texture = await loadTexture("../../cubetexture.png"); - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: { primitive: { topology: "TRIANGLES" }, vertex: { @@ -76,8 +78,8 @@ async function main() drawElements: { firstIndex: 0, indexCount: 36 }, }; - const renderPasss: IRenderPass = { - passDescriptor: { + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -104,7 +106,7 @@ async function main() renderObject.uniforms.uProjectionMatrix = projectionMatrix; renderObject.uniforms.uModelViewMatrix = modelViewMatrix; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); requestAnimationFrame(render); } @@ -231,12 +233,12 @@ async function loadTexture(url: string) const generateMipmap = isPowerOf2(img.width) && isPowerOf2(img.height); - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ source: img }], }; - let sampler: ISampler = {}; + let sampler: IGLSampler = {}; if (generateMipmap) { texture.generateMipmap = generateMipmap; diff --git a/examples/src/webgl-examples/sample7.ts b/examples/src/webgl-examples/sample7.ts index 00385f0f15955d5517c3d880fe898c1466707d4d..9d8c13d7f1edbbb25f9d46607d6e452dbfc8f83b 100644 --- a/examples/src/webgl-examples/sample7.ts +++ b/examples/src/webgl-examples/sample7.ts @@ -1,6 +1,5 @@ +import { IGLRenderObject, IGLRenderPass, IGLSampler, IGLSamplerTexture, IGLTexture, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderObject, IRenderPass, ISampler, ITexture, WebGL } from "@feng3d/webgl-renderer"; -import { ISamplerTexture } from "../../../src/data/ISamplerTexture"; let cubeRotation = 0.0; @@ -13,13 +12,15 @@ async function main() { const canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + // Here's where we call the routine that builds all the // objects we'll be drawing. const buffers = initBuffers(); const texture = await loadTexture("../../cubetexture.png"); - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: { primitive: { topology: "TRIANGLES" }, vertex: { @@ -104,8 +105,8 @@ async function main() drawElements: { firstIndex: 0, indexCount: 36 }, }; - const renderPasss: IRenderPass = { - passDescriptor: { + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -133,7 +134,7 @@ async function main() renderObject.uniforms.uModelViewMatrix = modelViewMatrix; renderObject.uniforms.uNormalMatrix = normalMatrix; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); requestAnimationFrame(render); } @@ -306,12 +307,12 @@ async function loadTexture(url: string) const generateMipmap = isPowerOf2(img.width) && isPowerOf2(img.height); - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ source: img }], }; - let sampler: ISampler = {}; + let sampler: IGLSampler = {}; if (generateMipmap) { @@ -322,7 +323,7 @@ async function loadTexture(url: string) sampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "LINEAR" }; } - return { texture, sampler } as ISamplerTexture; + return { texture, sampler } as IGLSamplerTexture; } function isPowerOf2(value: number) diff --git a/examples/src/webgl-examples/sample8.ts b/examples/src/webgl-examples/sample8.ts index 3c97de89f6209d7f085f9bb3c29e15866ef36b03..8b12c3e906af8352c6b185842357fc062ff93719 100644 --- a/examples/src/webgl-examples/sample8.ts +++ b/examples/src/webgl-examples/sample8.ts @@ -1,6 +1,5 @@ +import { IGLRenderObject, IGLRenderPass, IGLSampler, IGLSamplerTexture, IGLTexture, WebGL } from "@feng3d/webgl"; import { mat4 } from "gl-matrix"; -import { IRenderObject, IRenderPass, ISampler, ITexture, WebGL } from "@feng3d/webgl-renderer"; -import { ISamplerTexture } from "../../../src/data/ISamplerTexture"; let cubeRotation = 0.0; // will set to true when video can be copied to texture @@ -15,6 +14,8 @@ function main() { const canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); + // Here's where we call the routine that builds all the // objects we'll be drawing. const buffers = initBuffers(); @@ -23,7 +24,7 @@ function main() const video = setupVideo("../../Firefox.mp4"); - const renderObject: IRenderObject = { + const renderObject: IGLRenderObject = { pipeline: { primitive: { topology: "TRIANGLES" }, vertex: { @@ -108,8 +109,8 @@ function main() drawElements: { firstIndex: 0, indexCount: 36 }, }; - const renderPasss: IRenderPass = { - passDescriptor: { + const renderPasss: IGLRenderPass = { + descriptor: { colorAttachments: [{ clearValue: [0.0, 0.0, 0.0, 1.0], loadOp: "clear", @@ -142,7 +143,7 @@ function main() renderObject.uniforms.uModelViewMatrix = modelViewMatrix; renderObject.uniforms.uNormalMatrix = normalMatrix; - WebGL.runRenderPass({ canvasId: "glcanvas", contextId: "webgl" }, renderPasss); + webgl.runRenderPass(renderPasss); requestAnimationFrame(render); } @@ -336,13 +337,13 @@ function initBuffers() // // Initialize a texture. // -function initTexture(): ISamplerTexture +function initTexture(): IGLSamplerTexture { - const texture: ITexture = { + const texture: IGLTexture = { target: "TEXTURE_2D", internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE", sources: [{ width: 1, height: 1, pixels: new Uint8Array([0, 0, 255, 255]) }], }; - const sampler: ISampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "LINEAR" }; + const sampler: IGLSampler = { wrapS: "CLAMP_TO_EDGE", wrapT: "CLAMP_TO_EDGE", minFilter: "LINEAR" }; return { texture, sampler }; } @@ -350,7 +351,7 @@ function initTexture(): ISamplerTexture // // copy the video texture // -function updateTexture(texture: ITexture, video: HTMLVideoElement) +function updateTexture(texture: IGLTexture, video: HTMLVideoElement) { texture.sources = [{ source: video }]; } diff --git a/package.json b/package.json index 9407766dcfa2931ea178d9f79157bfb98ecf3031..ebaad3b5fd2adc5068412dcd3159f3c8f643f381 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@feng3d/webgl-renderer", - "version": "0.0.1", + "name": "@feng3d/webgl", + "version": "0.0.2", "description": "渲染库", "author": "feng", "license": "MIT", diff --git a/src/WebGL.ts b/src/WebGL.ts index a3e020e557a240625c71eaed57f9292894ff2341..9f19c71e8dda1f1c2124dc8fd521c488746b968a 100644 --- a/src/WebGL.ts +++ b/src/WebGL.ts @@ -6,21 +6,21 @@ import { deleteSampler } from "./caches/getSampler"; import { deleteTexture } from "./caches/getTexture"; import { deleteBuffer } from "./caches/getWebGLBuffer"; import { deleteTransformFeedback } from "./caches/getWebGLTransformFeedback"; -import { IBlitFramebuffer } from "./data/IBlitFramebuffer"; -import { IBuffer } from "./data/IBuffer"; -import { ICopyBuffer } from "./data/ICopyBuffer"; -import { IPassDescriptor } from "./data/IPassDescriptor"; -import { IQuery } from "./data/IQueryAction"; -import { IReadPixels } from "./data/IReadPixels"; -import { IRenderObject } from "./data/IRenderObject"; -import { IRenderPass } from "./data/IRenderPass"; -import { IRenderPipeline } from "./data/IRenderPipeline"; -import { IRenderbuffer } from "./data/IRenderbuffer"; -import { IRenderingContext } from "./data/IRenderingContext"; -import { ISampler } from "./data/ISampler"; -import { ITexture } from "./data/ITexture"; -import { ITransformFeedback } from "./data/ITransformFeedback"; -import { IVertexArrayObject } from "./data/IVertexArrayObject"; +import { IGLBlitFramebuffer } from "./data/IGLBlitFramebuffer"; +import { IGLBuffer } from "./data/IGLBuffer"; +import { IGLCopyBuffer } from "./data/IGLCopyBuffer"; +import { IGLRenderPassDescriptor } from "./data/IGLPassDescriptor"; +import { IGLQuery } from "./data/IGLQueryAction"; +import { IGLReadPixels } from "./data/IGLReadPixels"; +import { IGLRenderObject } from "./data/IGLRenderObject"; +import { IGLRenderPass } from "./data/IGLRenderPass"; +import { IGLRenderPipeline } from "./data/IGLRenderPipeline"; +import { IGLRenderbuffer } from "./data/IGLRenderbuffer"; +import { IGLRenderingContext } from "./data/IGLRenderingContext"; +import { IGLSampler } from "./data/IGLSampler"; +import { IGLTexture } from "./data/IGLTexture"; +import { IGLTransformFeedback } from "./data/IGLTransformFeedback"; +import { IGLVertexArrayObject } from "./data/IGLVertexArrayObject"; import { runBlitFramebuffer } from "./runs/runBlitFramebuffer"; import { runCopyBuffer } from "./runs/runCopyBuffer"; import { getQueryResult } from "./runs/runQueryAction"; @@ -36,6 +36,15 @@ import { deleteVertexArray } from "./runs/runVertexArray"; */ export class WebGL { + private _renderingContext: IGLRenderingContext; + private _gl: WebGLRenderingContext; + + constructor(renderingContext: IGLRenderingContext) + { + this._renderingContext = renderingContext; + this._gl = getRenderingContext(this._renderingContext); + } + /** * 提交一次渲染通道数据。 * @@ -43,12 +52,9 @@ export class WebGL * @param renderPass 渲染通道数据。 * @returns */ - static runRenderPass(renderingContext: IRenderingContext, renderPass: IRenderPass) + runRenderPass(renderPass: IGLRenderPass) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - runRenderPass(gl, renderPass); + runRenderPass(this._gl, renderPass); } /** @@ -56,107 +62,68 @@ export class WebGL * * @param renderObject 渲染原子，包含渲染所需的所有数据。 */ - static runRenderObject(renderingContext: IRenderingContext, renderObject: IRenderObject) + runRenderObject(renderObject: IGLRenderObject) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - runRenderObject(gl, renderObject); + runRenderObject(this._gl, renderObject); } - static runBlitFramebuffer(renderingContext: IRenderingContext, blitFramebuffer: IBlitFramebuffer) + runBlitFramebuffer(blitFramebuffer: IGLBlitFramebuffer) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - runBlitFramebuffer(gl, blitFramebuffer); + runBlitFramebuffer(this._gl, blitFramebuffer); } - static runCopyBuffer(renderingContext: IRenderingContext, copyBuffer: ICopyBuffer) + runCopyBuffer(copyBuffer: IGLCopyBuffer) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - runCopyBuffer(gl, copyBuffer); + runCopyBuffer(this._gl, copyBuffer); } - static runReadPixels(renderingContext: IRenderingContext, readPixels: IReadPixels) + runReadPixels(readPixels: IGLReadPixels) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - runReadPixels(gl, readPixels); + runReadPixels(this._gl, readPixels); } - static deleteFramebuffer(renderingContext: IRenderingContext, passDescriptor: IPassDescriptor) + deleteFramebuffer(passDescriptor: IGLRenderPassDescriptor) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteFramebuffer(gl, passDescriptor); + deleteFramebuffer(this._gl, passDescriptor); } - static deleteRenderbuffer(renderingContext: IRenderingContext, renderbuffer: IRenderbuffer) + deleteRenderbuffer(renderbuffer: IGLRenderbuffer) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteRenderbuffer(gl, renderbuffer); + deleteRenderbuffer(this._gl, renderbuffer); } - static deleteBuffer(renderingContext: IRenderingContext, buffer: IBuffer) + deleteBuffer(buffer: IGLBuffer) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteBuffer(gl, buffer); + deleteBuffer(this._gl, buffer); } - static deleteTexture(renderingContext: IRenderingContext, texture: ITexture) + deleteTexture(texture: IGLTexture) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteTexture(gl, texture); + deleteTexture(this._gl, texture); } - static deleteSampler(renderingContext: IRenderingContext, sampler: ISampler) + deleteSampler(sampler: IGLSampler) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteSampler(gl, sampler); + deleteSampler(this._gl, sampler); } - static deleteProgram(renderingContext: IRenderingContext, pipeline: IRenderPipeline) + deleteProgram(pipeline: IGLRenderPipeline) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteProgram(gl, pipeline); + deleteProgram(this._gl, pipeline); } - static deleteVertexArray(renderingContext: IRenderingContext, vertexArray: IVertexArrayObject) + deleteVertexArray(vertexArray: IGLVertexArrayObject) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteVertexArray(gl, vertexArray); + deleteVertexArray(this._gl, vertexArray); } - static deleteTransformFeedback(renderingContext: IRenderingContext, transformFeedback: ITransformFeedback) + deleteTransformFeedback(transformFeedback: IGLTransformFeedback) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - deleteTransformFeedback(gl, transformFeedback); + deleteTransformFeedback(this._gl, transformFeedback); } - static getQueryResult(renderingContext: IRenderingContext, query: IQuery) + getQueryResult(query: IGLQuery) { - const gl = getRenderingContext(renderingContext); - if (!gl || gl.isContextLost()) return; - - return getQueryResult(gl, query); + return getQueryResult(this._gl, query); } } diff --git a/src/caches/getCapabilities.ts b/src/caches/getCapabilities.ts index f4640c3b55f277317bb3f4685f1c02b6096f01c5..7df01830af90b3150db598ef551b309b3ff79e8e 100644 --- a/src/caches/getCapabilities.ts +++ b/src/caches/getCapabilities.ts @@ -1,8 +1,8 @@ -import { ICapabilities } from "../data/ICapabilities"; +import { IGLCapabilities } from "../data/IGLCapabilities"; export function getCapabilities(gl: WebGLRenderingContext, precision: "highp" | "mediump" | "lowp" = "highp") { - const capabilities: ICapabilities = {} as any; + const capabilities: IGLCapabilities = {} as any; gl._capabilities = capabilities; // capabilities.maxAnisotropy = gl.getExtension("EXT_texture_filter_anisotropic") ? gl.getParameter(gl.getExtension("EXT_texture_filter_anisotropic").MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 0; diff --git a/src/caches/getFramebuffer.ts b/src/caches/getFramebuffer.ts index 9481d3bdba174001b892ba1c1c5c65a7c7b565b6..c4df381272c2c751e77385af08bf3b4019ec1401 100644 --- a/src/caches/getFramebuffer.ts +++ b/src/caches/getFramebuffer.ts @@ -1,6 +1,6 @@ -import { IPassDescriptor } from "../data/IPassDescriptor"; -import { IRenderbuffer } from "../data/IRenderbuffer"; -import { ITextureView } from "../data/ITexture"; +import { IGLRenderPassDescriptor } from "../data/IGLPassDescriptor"; +import { IGLRenderbuffer } from "../data/IGLRenderbuffer"; +import { IGLTextureView } from "../data/IGLTexture"; import { getRenderbuffer } from "./getRenderbuffer"; import { getTexture } from "./getTexture"; @@ -8,16 +8,16 @@ declare global { interface WebGLRenderingContext { - _framebuffers: Map; + _framebuffers: Map; } } -const defaultTextureView: Partial = { level: 0, layer: 0 }; +const defaultTextureView: Partial = { level: 0, layer: 0 }; /** * 获取帧缓冲区 */ -export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassDescriptor) +export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IGLRenderPassDescriptor) { const view = passDescriptor?.colorAttachments?.[0]?.view || passDescriptor?.depthStencilAttachment?.view; if (!view) return null; @@ -25,6 +25,8 @@ export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassD let webGLFramebuffer = gl._framebuffers.get(passDescriptor); if (webGLFramebuffer) return webGLFramebuffer; + const multisample = passDescriptor.multisample; + webGLFramebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, webGLFramebuffer); gl._framebuffers.set(passDescriptor, webGLFramebuffer); @@ -61,7 +63,7 @@ export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassD } else { - const renderbuffer = getRenderbuffer(gl, view as IRenderbuffer); + const renderbuffer = getRenderbuffer(gl, view as IGLRenderbuffer, multisample); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, renderbuffer); } }); @@ -104,7 +106,7 @@ export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassD } else { - const renderbuffer = getRenderbuffer(gl, view as IRenderbuffer); + const renderbuffer = getRenderbuffer(gl, view as IGLRenderbuffer); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer); } } @@ -112,7 +114,7 @@ export function getFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassD return webGLFramebuffer; } -export function deleteFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassDescriptor) +export function deleteFramebuffer(gl: WebGLRenderingContext, passDescriptor: IGLRenderPassDescriptor) { const webGLFramebuffer = gl._framebuffers.get(passDescriptor); gl._framebuffers.delete(passDescriptor); diff --git a/src/caches/getIGLTextureSize.ts b/src/caches/getIGLTextureSize.ts new file mode 100644 index 0000000000000000000000000000000000000000..a79b381fe915db0104fdaac6fca97d2fba3819f8 --- /dev/null +++ b/src/caches/getIGLTextureSize.ts @@ -0,0 +1,23 @@ +import { IGLTexture } from "@feng3d/webgl"; +import { getIGLTextureSourceSize } from "./getIGLTextureSourceSize"; + +export function getIGLTextureSize(glTexture: IGLTexture) +{ + let size: [width: number, height?: number, depthOrArrayLayers?: number]; + if (glTexture.storage) + { + size = [glTexture.storage.width, glTexture.storage.height]; + if (glTexture.storage.depth) + { + size.push(glTexture.storage.depth); + } + } + + // + if (glTexture.sources) + { + size = getIGLTextureSourceSize(glTexture.sources[0]); + } + + return size; +} \ No newline at end of file diff --git a/src/caches/getIGLTextureSourceSize.ts b/src/caches/getIGLTextureSourceSize.ts new file mode 100644 index 0000000000000000000000000000000000000000..72583a636e983babf8652601ab324449da6c3479 --- /dev/null +++ b/src/caches/getIGLTextureSourceSize.ts @@ -0,0 +1,30 @@ +import { IGLBufferSource, IGLImageSource, IGLTextureSource } from "../data/IGLTexture"; +import { getTexImageSourceSize } from "./getTexImageSourceSize"; + +export function getIGLTextureSourceSize(glTextureSource: IGLTextureSource) +{ + const size: [width: number, height?: number, depthOrArrayLayers?: number] = [] as any; + + // + const glImageSource = glTextureSource as IGLImageSource; + const glBufferSource = glTextureSource as IGLBufferSource; + const source = glImageSource.source; + if (source) + { + const texImageSourceSize = getTexImageSourceSize(source); + size[0] = texImageSourceSize.width; + size[1] = texImageSourceSize.height; + } + else + { + size[0] = glBufferSource.width; + size[1] = glBufferSource.height; + } + + if (glTextureSource.depth) + { + size[2] = glTextureSource.depth; + } + + return size; +} diff --git a/src/caches/getProgram.ts b/src/caches/getProgram.ts index e1f5d207fc165baae71047a03b8a5878c91649c8..ab18d3d4922a52b69cb11739a315260a72a751d0 100644 --- a/src/caches/getProgram.ts +++ b/src/caches/getProgram.ts @@ -1,7 +1,7 @@ import { getWebGLUniformType, isWebGLUniformTextureType } from "../const/WebGLUniformType"; -import { IAttributeInfo } from "../data/IAttributeInfo"; -import { IRenderPipeline, ITransformFeedbackVaryings } from "../data/IRenderPipeline"; -import { IUniformInfo, IUniformItemInfo } from "../data/IUniformInfo"; +import { IGLAttributeInfo } from "../data/IGLAttributeInfo"; +import { IGLRenderPipeline, ITransformFeedbackVaryings } from "../data/IGLRenderPipeline"; +import { IGLUniformInfo, IUniformItemInfo } from "../data/IGLUniformInfo"; import { getWebGLAttributeValueType } from "./getWebGLAttributeType"; declare global @@ -19,11 +19,11 @@ declare global /** * 属性信息列表 */ - attributes: IAttributeInfo[]; + attributes: IGLAttributeInfo[]; /** * uniform信息列表 */ - uniforms: IUniformInfo[]; + uniforms: IGLUniformInfo[]; /** * 统一变量块信息列表。 @@ -37,7 +37,7 @@ declare global /** * 激活渲染程序 */ -export function getProgram(gl: WebGLRenderingContext, pipeline: IRenderPipeline) +export function getProgram(gl: WebGLRenderingContext, pipeline: IGLRenderPipeline) { const shaderKey = getKey(pipeline); let result = gl._programs[shaderKey]; @@ -53,7 +53,7 @@ export function getProgram(gl: WebGLRenderingContext, pipeline: IRenderPipeline) return result; } -export function deleteProgram(gl: WebGLRenderingContext, pipeline: IRenderPipeline) +export function deleteProgram(gl: WebGLRenderingContext, pipeline: IGLRenderPipeline) { const vertex = pipeline.vertex.code; const fragment = pipeline.fragment.code; @@ -67,7 +67,7 @@ export function deleteProgram(gl: WebGLRenderingContext, pipeline: IRenderPipeli } } -function getKey(pipeline: IRenderPipeline) +function getKey(pipeline: IGLRenderPipeline) { const vertex = pipeline.vertex.code; const fragment = pipeline.fragment.code; @@ -89,7 +89,7 @@ function getWebGLProgram(gl: WebGLRenderingContext, vshader: string, fshader: st // 获取属性信息 const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES); - const attributes: IAttributeInfo[] = []; + const attributes: IGLAttributeInfo[] = []; for (let i = 0; i < numAttributes; i++) { const activeInfo = gl.getActiveAttrib(program, i); @@ -100,7 +100,7 @@ function getWebGLProgram(gl: WebGLRenderingContext, vshader: string, fshader: st } // 获取uniform信息 const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); - const uniforms: IUniformInfo[] = []; + const uniforms: IGLUniformInfo[] = []; let textureID = 0; for (let i = 0; i < numUniforms; i++) { @@ -156,7 +156,7 @@ function getWebGLProgram(gl: WebGLRenderingContext, vshader: string, fshader: st gl.uniformBlockBinding(program, i, i); // 获取包含的统一变量列表。 const uniformIndices: Uint32Array = gl.getActiveUniformBlockParameter(program, i, gl.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES); - const uniformList: IUniformInfo[] = []; + const uniformList: IGLUniformInfo[] = []; for (let i = 0; i < uniformIndices.length; i++) { const unifrom = uniforms[uniformIndices[i]]; @@ -209,7 +209,7 @@ export interface IUniformBlockInfo /** * 包含的统一变量列表。 */ - uniforms: IUniformInfo[]; + uniforms: IGLUniformInfo[]; } /** diff --git a/src/caches/getRenderbuffer.ts b/src/caches/getRenderbuffer.ts index 64254803a64660b9721b63a4e7444436b9cef32c..3180b8b7cafc73568b2536c34aadb0bf2e1e4f8b 100644 --- a/src/caches/getRenderbuffer.ts +++ b/src/caches/getRenderbuffer.ts @@ -1,14 +1,14 @@ -import { IRenderbuffer } from "../data/IRenderbuffer"; +import { IGLRenderbuffer } from "../data/IGLRenderbuffer"; declare global { interface WebGLRenderingContext { - _renderbuffers: Map; + _renderbuffers: Map; } } -export function getRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IRenderbuffer) +export function getRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IGLRenderbuffer, multisample?: 4) { let webGLRenderbuffer = gl._renderbuffers.get(renderbuffer); if (webGLRenderbuffer) return webGLRenderbuffer; @@ -16,12 +16,12 @@ export function getRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IRender webGLRenderbuffer = gl.createRenderbuffer(); gl._renderbuffers.set(renderbuffer, webGLRenderbuffer); - const { samples, internalformat, width, height } = renderbuffer; + const { internalformat, width, height } = renderbuffer; gl.bindRenderbuffer(gl.RENDERBUFFER, webGLRenderbuffer); - if (samples && gl instanceof WebGL2RenderingContext) + if (multisample === 4 && gl instanceof WebGL2RenderingContext) { - gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl[internalformat], width, height); + gl.renderbufferStorageMultisample(gl.RENDERBUFFER, multisample, gl[internalformat], width, height); } else { @@ -31,7 +31,7 @@ export function getRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IRender return webGLRenderbuffer; } -export function deleteRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IRenderbuffer) +export function deleteRenderbuffer(gl: WebGLRenderingContext, renderbuffer: IGLRenderbuffer) { const webGLRenderbuffer = gl._renderbuffers.get(renderbuffer); gl._renderbuffers.delete(renderbuffer); diff --git a/src/caches/getRenderingContext.ts b/src/caches/getRenderingContext.ts index 53d6bf17d3381015b3c7499c45cadb4f45c8bcf8..969f0a2b4f378075fbb320e284ecff255c8ca6e3 100644 --- a/src/caches/getRenderingContext.ts +++ b/src/caches/getRenderingContext.ts @@ -1,4 +1,4 @@ -import { IRenderingContext } from "../data/IRenderingContext"; +import { IGLRenderingContext } from "../data/IGLRenderingContext"; import { defaults } from "../defaults/defaults"; import { getCapabilities } from "./getCapabilities"; @@ -8,7 +8,7 @@ import { getCapabilities } from "./getCapabilities"; * @param renderingContext * @returns */ -export function getRenderingContext(renderingContext: IRenderingContext) +export function getRenderingContext(renderingContext: IGLRenderingContext) { const key = renderingContext.canvasId; let value = canvasContextMap.get(key); @@ -72,7 +72,7 @@ function autoCreateCanvas(canvasId: string) return canvas; } -function getCanvas(canvasContext: IRenderingContext) +function getCanvas(canvasContext: IGLRenderingContext) { let canvas = document.getElementById(canvasContext.canvasId) as HTMLCanvasElement; if (!canvas || !(canvas instanceof HTMLCanvasElement)) @@ -83,7 +83,7 @@ function getCanvas(canvasContext: IRenderingContext) return canvas; } -function getWebGLContext(canvas: HTMLCanvasElement, canvasContext: IRenderingContext) +function getWebGLContext(canvas: HTMLCanvasElement, canvasContext: IGLRenderingContext) { const contextAttributes = Object.assign({}, defaults.webGLCanvasContext, canvasContext); diff --git a/src/caches/getSampler.ts b/src/caches/getSampler.ts index c362103dda03ded7dd68fb645fe392b0b54c3545..55adf857931d7362ca48829d12afb5b4d2ace36b 100644 --- a/src/caches/getSampler.ts +++ b/src/caches/getSampler.ts @@ -1,15 +1,15 @@ -import { ISampler } from "../data/ISampler"; -import { defaultSampler } from "../runs/runSampler"; +import { IGLSampler } from "../data/IGLSampler"; +import { defaultGLSampler } from "../runs/runSampler"; declare global { interface WebGLRenderingContext { - _samplers: Map; + _samplers: Map; } } -export function getSampler(gl: WebGLRenderingContext, sampler?: ISampler) +export function getSampler(gl: WebGLRenderingContext, sampler?: IGLSampler) { let webGLSampler = gl._samplers.get(sampler); if (webGLSampler) return webGLSampler; @@ -19,7 +19,7 @@ export function getSampler(gl: WebGLRenderingContext, sampler?: ISampler) webGLSampler = gl.createSampler(); gl._samplers.set(sampler, webGLSampler); - const { minFilter, magFilter, wrapS, wrapT, wrapR, lodMinClamp, lodMaxClamp, compareMode, compare } = { ...defaultSampler, ...sampler }; + const { minFilter, magFilter, wrapS, wrapT, wrapR, lodMinClamp, lodMaxClamp, compareMode, compare } = { ...defaultGLSampler, ...sampler }; gl.samplerParameteri(webGLSampler, gl.TEXTURE_MIN_FILTER, gl[minFilter]); gl.samplerParameteri(webGLSampler, gl.TEXTURE_MAG_FILTER, gl[magFilter]); @@ -35,7 +35,7 @@ export function getSampler(gl: WebGLRenderingContext, sampler?: ISampler) return webGLSampler; } -export function deleteSampler(gl: WebGLRenderingContext, sampler?: ISampler) +export function deleteSampler(gl: WebGLRenderingContext, sampler?: IGLSampler) { if (gl instanceof WebGL2RenderingContext) { diff --git a/src/caches/getTexImageSourceSize.ts b/src/caches/getTexImageSourceSize.ts new file mode 100644 index 0000000000000000000000000000000000000000..235ae20cd6924f8f2cbd72537f2711751115cb77 --- /dev/null +++ b/src/caches/getTexImageSourceSize.ts @@ -0,0 +1,21 @@ +export function getTexImageSourceSize(texImageSource: TexImageSource) +{ + let width: number; + let height: number; + if (texImageSource instanceof VideoFrame) + { + width = texImageSource.codedWidth; + height = texImageSource.codedHeight; + } + else if (texImageSource instanceof HTMLVideoElement) + { + width = texImageSource.videoWidth; + height = texImageSource.videoHeight; + } + else + { + width = texImageSource.width; + height = texImageSource.height; + } + return { width, height }; +} \ No newline at end of file diff --git a/src/caches/getTexture.ts b/src/caches/getTexture.ts index e4d918b025bee6284f65729e94ed311e248002f2..caa96236bf32fba03dbb6794477b6e16bff43dda 100644 --- a/src/caches/getTexture.ts +++ b/src/caches/getTexture.ts @@ -1,12 +1,13 @@ import { watcher } from "@feng3d/watcher"; -import { ITexture, ITexturePixelStore, ITextureTarget } from "../data/ITexture"; +import { GLTextureTarget, IGLTexture } from "../data/IGLTexture"; +import { IGLTexturePixelStore } from "../data/IGLTexturePixelStore"; import { defaultBufferSource, defaultImageSource, defaultTexture } from "../runs/runTexture"; declare global { interface WebGLRenderingContext { - _textures: Map + _textures: Map } interface WebGLTexture @@ -16,7 +17,7 @@ declare global * * 默认"TEXTURE_2D"。 */ - textureTarget: ITextureTarget; + textureTarget: GLTextureTarget; /** * 销毁WebGL纹理。 @@ -25,7 +26,7 @@ declare global } } -const defaultTexturePixelStore: ITexturePixelStore = { +export const defaultTexturePixelStore: IGLTexturePixelStore = { packAlignment: 4, unpackAlignment: 4, unpackFlipY: false, @@ -41,7 +42,7 @@ const defaultTexturePixelStore: ITexturePixelStore = { unpackSkipImages: 0, }; -export function getTexture(gl: WebGLRenderingContext, texture: ITexture) +export function getTexture(gl: WebGLRenderingContext, texture: IGLTexture) { let webGLTexture = gl._textures.get(texture); if (webGLTexture) return webGLTexture; @@ -95,13 +96,27 @@ export function getTexture(gl: WebGLRenderingContext, texture: ITexture) if ("source" in sourceItem) { - const { level, source } = { ...defaultImageSource, ...sourceItem }; - gl.texImage2D(gl[bindTarget], level, gl[internalformat], gl[format], gl[type], source); + const { level, source, width, height, border } = { ...defaultImageSource, ...sourceItem }; + if (width && height) + { + (gl as any as WebGL2RenderingContext).texImage2D(gl[bindTarget], level, gl[internalformat], width, height, border, gl[format], gl[type], source); + } + else + { + gl.texImage2D(gl[bindTarget], level, gl[internalformat], gl[format], gl[type], source); + } } else { - const { level, width, height, border, pixels } = { ...defaultBufferSource, ...sourceItem }; - gl.texImage2D(gl[bindTarget], level, gl[internalformat], width, height, border, gl[format], gl[type], pixels); + const { level, width, height, border, pixels, srcOffset } = { ...defaultBufferSource, ...sourceItem }; + if (srcOffset) + { + (gl as any as WebGL2RenderingContext).texImage2D(gl[bindTarget], level, gl[internalformat], width, height, border, gl[format], gl[type], pixels, srcOffset); + } + else + { + gl.texImage2D(gl[bindTarget], level, gl[internalformat], width, height, border, gl[format], gl[type], pixels); + } } } else if (target === "TEXTURE_2D_ARRAY" || target === "TEXTURE_3D") @@ -115,8 +130,15 @@ export function getTexture(gl: WebGLRenderingContext, texture: ITexture) } else { - const { level, width, height, depth, border, pixels } = { ...defaultBufferSource, ...sourceItem }; - gl.texImage3D(gl[target], level, gl[internalformat], width, height, depth, border, gl[format], gl[type], pixels); + const { level, width, height, depth, border, pixels, srcOffset } = { ...defaultBufferSource, ...sourceItem }; + if (srcOffset) + { + gl.texImage3D(gl[target], level, gl[internalformat], width, height, depth, border, gl[format], gl[type], pixels, srcOffset); + } + else + { + gl.texImage3D(gl[target], level, gl[internalformat], width, height, depth, border, gl[format], gl[type], pixels); + } } } } @@ -229,7 +251,7 @@ export function getTexture(gl: WebGLRenderingContext, texture: ITexture) return webGLTexture; } -export function deleteTexture(gl: WebGLRenderingContext, texture: ITexture) +export function deleteTexture(gl: WebGLRenderingContext, texture: IGLTexture) { const webGLTexture = gl._textures.get(texture); if (!webGLTexture) return; @@ -247,7 +269,7 @@ export function deleteTexture(gl: WebGLRenderingContext, texture: ITexture) * @param gl * @param pixelStore 像素解包打包时参数。 */ -function setTexturePixelStore(gl: WebGLRenderingContext, pixelStore: ITexturePixelStore) +function setTexturePixelStore(gl: WebGLRenderingContext, pixelStore: IGLTexturePixelStore) { const { packAlignment, diff --git a/src/caches/getWebGLBuffer.ts b/src/caches/getWebGLBuffer.ts index 44ad6eddf5734a8cb03afb77a2be66981a8f3f79..5003fba4a6a109fa54f337ad94004bbf2f53b8f9 100644 --- a/src/caches/getWebGLBuffer.ts +++ b/src/caches/getWebGLBuffer.ts @@ -1,75 +1,23 @@ import { watcher } from "@feng3d/watcher"; -import { IAttributeBufferSourceTypes, IBuffer } from "../data/IBuffer"; +import { IAttributeBufferSourceTypes, IGLBuffer } from "../data/IGLBuffer"; declare global { interface WebGLRenderingContext { - _buffers: Map + _buffers: Map } interface WebGLBuffer { - data: IAttributeBufferSourceTypes; - /** * 销毁。 */ destroy: () => void; } - - interface Float32Array - { - bufferType: "FLOAT"; - } - interface Uint32Array - { - bufferType: "UNSIGNED_INT"; - } - interface Int32Array - { - bufferType: "INT"; - } - interface Uint16Array - { - bufferType: "UNSIGNED_SHORT"; - } - interface Int16Array - { - bufferType: "SHORT"; - } - interface Uint8Array - { - bufferType: "UNSIGNED_BYTE"; - } - interface Int8Array - { - bufferType: "BYTE"; - } - interface Uint8ClampedArray - { - bufferType: "BYTE"; - } } -// eslint-disable-next-line no-extend-native -Float32Array.prototype.bufferType = "FLOAT"; -// eslint-disable-next-line no-extend-native -Uint32Array.prototype.bufferType = "UNSIGNED_INT"; -// eslint-disable-next-line no-extend-native -Int32Array.prototype.bufferType = "INT"; -// eslint-disable-next-line no-extend-native -Uint16Array.prototype.bufferType = "UNSIGNED_SHORT"; -// eslint-disable-next-line no-extend-native -Int16Array.prototype.bufferType = "SHORT"; -// eslint-disable-next-line no-extend-native -Uint8Array.prototype.bufferType = "UNSIGNED_BYTE"; -// eslint-disable-next-line no-extend-native -Int8Array.prototype.bufferType = "BYTE"; -// eslint-disable-next-line no-extend-native -Uint8ClampedArray.prototype.bufferType = "BYTE"; - -export function getWebGLBuffer(gl: WebGLRenderingContext, buffer: IBuffer) +export function getWebGLBuffer(gl: WebGLRenderingContext, buffer: IGLBuffer) { let webGLBuffer = gl._buffers.get(buffer); if (webGLBuffer) return webGLBuffer; @@ -101,9 +49,6 @@ export function getWebGLBuffer(gl: WebGLRenderingContext, buffer: IBuffer) { console.log(`初始化缓冲区时必须提供数据或者尺寸！`); } - - // - webGLBuffer.data = data; }; const writeBuffer = () => @@ -147,7 +92,7 @@ export function getWebGLBuffer(gl: WebGLRenderingContext, buffer: IBuffer) return webGLBuffer; } -export function deleteBuffer(gl: WebGLRenderingContext, buffer: IBuffer) +export function deleteBuffer(gl: WebGLRenderingContext, buffer: IGLBuffer) { const webGLBuffer = gl._buffers.get(buffer); if (webGLBuffer) @@ -159,3 +104,19 @@ export function deleteBuffer(gl: WebGLRenderingContext, buffer: IBuffer) gl.deleteBuffer(webGLBuffer); } } + +export function getBufferType(data?: IAttributeBufferSourceTypes) +{ + return bufferTypeMap[data?.constructor.name]; +} + +const bufferTypeMap = { + Float32Array: "FLOAT", + Uint32Array: "UNSIGNED_INT", + Int32Array: "INT", + Uint16Array: "UNSIGNED_SHORT", + Int16Array: "SHORT", + Uint8Array: "UNSIGNED_BYTE", + Int8Array: "BYTE", + Uint8ClampedArray: "BYTE", +}; diff --git a/src/caches/getWebGLQuery.ts b/src/caches/getWebGLQuery.ts index d816e8de763a3045f8f42a052f1210c1c4c33760..32e71be564d9afe5d9c4aa15422662ef005a43a7 100644 --- a/src/caches/getWebGLQuery.ts +++ b/src/caches/getWebGLQuery.ts @@ -1,14 +1,14 @@ -import { IQuery } from "../data/IQueryAction"; +import { IGLQuery } from "../data/IGLQueryAction"; declare global { interface WebGLRenderingContext { - _querys: Map + _querys: Map } } -export function getWebGLQuery(gl: WebGLRenderingContext, query: IQuery) +export function getWebGLQuery(gl: WebGLRenderingContext, query: IGLQuery) { if (gl instanceof WebGL2RenderingContext) { @@ -24,7 +24,7 @@ export function getWebGLQuery(gl: WebGLRenderingContext, query: IQuery) return null; } -export function deleteWebGLQuery(gl: WebGLRenderingContext, query: IQuery) +export function deleteWebGLQuery(gl: WebGLRenderingContext, query: IGLQuery) { if (gl instanceof WebGL2RenderingContext) { diff --git a/src/caches/getWebGLTransformFeedback.ts b/src/caches/getWebGLTransformFeedback.ts index 81c7a28d934adb2be2b26f7472d987489e84674d..1fde8baa5911b97a5446d011b1674a76efbdf1bb 100644 --- a/src/caches/getWebGLTransformFeedback.ts +++ b/src/caches/getWebGLTransformFeedback.ts @@ -1,15 +1,15 @@ -import { ITransformFeedback } from "../data/ITransformFeedback"; +import { IGLTransformFeedback } from "../data/IGLTransformFeedback"; import { getWebGLBuffer } from "./getWebGLBuffer"; declare global { interface WebGLRenderingContext { - _transforms: Map; + _transforms: Map; } } -export function getWebGLTransformFeedback(gl: WebGLRenderingContext, transformFeedback: ITransformFeedback) +export function getWebGLTransformFeedback(gl: WebGLRenderingContext, transformFeedback: IGLTransformFeedback) { let webGLTransformFeedback = gl._transforms.get(transformFeedback); if (webGLTransformFeedback) return webGLTransformFeedback; @@ -34,7 +34,7 @@ export function getWebGLTransformFeedback(gl: WebGLRenderingContext, transformFe return webGLTransformFeedback; } -export function deleteTransformFeedback(gl: WebGLRenderingContext, transformFeedback: ITransformFeedback) +export function deleteTransformFeedback(gl: WebGLRenderingContext, transformFeedback: IGLTransformFeedback) { const webGLTransformFeedback = gl._transforms.get(transformFeedback); if (!webGLTransformFeedback) return; diff --git a/src/const/WebGLUniformType.ts b/src/const/WebGLUniformType.ts index 01ee6639ad066a99f8145d6680cd5ce97fefc8d1..da831af27a1bdc3ccce90e9ffbe758dff96d7298 100644 --- a/src/const/WebGLUniformType.ts +++ b/src/const/WebGLUniformType.ts @@ -1,17 +1,17 @@ /** * WebGL中Uniform类型 */ -export type IWebGLUniformType = keyof typeof webGLUniformTypeValue; +export type IGLUniformType = keyof typeof webGLUniformTypeValue; /** * WebGL中Uniform纹理类型 */ -export type IWebGLUniformTextureType = keyof typeof webGLUniformTextureTypeValue; +export type IGLUniformTextureType = keyof typeof webGLUniformTextureTypeValue; /** * WebGL中Uniform缓冲区类型 */ -export type IWebGLUniformBufferType = keyof typeof webGLUniformBufferTypeValue; +export type IGLUniformBufferType = keyof typeof webGLUniformBufferTypeValue; /** * 获取Unifrom类型名称 @@ -19,7 +19,7 @@ export type IWebGLUniformBufferType = keyof typeof webGLUniformBufferTypeValue; * @param value WebGL中Unifrom类型对应的值。 * @returns Unifrom类型名称 */ -export function getWebGLUniformType(value: number): IWebGLUniformType +export function getWebGLUniformType(value: number): IGLUniformType { const result = webGLUniformValueType[value]; console.assert(!!result); @@ -33,7 +33,7 @@ export function getWebGLUniformType(value: number): IWebGLUniformType * @param type Unifrom类型名称 * @returns 是否为纹理Unifrom类型。 */ -export function isWebGLUniformTextureType(type: IWebGLUniformType): boolean +export function isWebGLUniformTextureType(type: IGLUniformType): boolean { return webGLUniformTextureTypeValue[type] !== undefined; } diff --git a/src/data/IAttributeInfo.ts b/src/data/IGLAttributeInfo.ts similarity index 72% rename from src/data/IAttributeInfo.ts rename to src/data/IGLAttributeInfo.ts index 5eec9c199737c20959540a7458a8497297e296fe..9b98d900fb5ee17fa0bae2e050c0dd39152db8a3 100644 --- a/src/data/IAttributeInfo.ts +++ b/src/data/IGLAttributeInfo.ts @@ -1,6 +1,6 @@ -import { VertexAttributeTypes } from "./IVertexAttribute"; +import { VertexAttributeTypes } from "./IGLVertexAttribute"; -export interface IAttributeInfo +export interface IGLAttributeInfo { /** * 名称。 diff --git a/src/data/IBlendState.ts b/src/data/IGLBlendState.ts similarity index 84% rename from src/data/IBlendState.ts rename to src/data/IGLBlendState.ts index f7831ff6bd0909a85d5b6a275c84c17d22fa1f2f..928f35bfc87cd0dbde9c5c0adb86d2c305230d8c 100644 --- a/src/data/IBlendState.ts +++ b/src/data/IGLBlendState.ts @@ -1,46 +1,46 @@ /** * 混合状态。 */ -export interface IBlendState +export interface IGLBlendState { /** * 为颜色通道定义相应渲染目标的混合行为。 */ - color?: IBlendComponent; + color?: IGLBlendComponent; /** * 为alpha通道定义相应渲染目标的混合行为。 */ - alpha?: IBlendComponent; + alpha?: IGLBlendComponent; } /** * 为颜色或alpha通道定义相应渲染目标的混合行为。 */ -export interface IBlendComponent +export interface IGLBlendComponent { /** * 混合方式，默认 FUNC_ADD，源 + 目标。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquation */ - operation?: BlendEquation; + operation?: GLBlendEquation; /** * 源混合因子，默认 SRC_ALPHA，将所有颜色乘以源alpha值。 * - * @see BlendFactor + * @see GLBlendFactor * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc */ - srcFactor?: BlendFactor; + srcFactor?: GLBlendFactor; /** * 目标混合因子，默认 ONE_MINUS_SRC_ALPHA，将所有颜色乘以1减去源alpha值。 * - * @see BlendFactor + * @see GLBlendFactor * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc */ - dstFactor?: BlendFactor; + dstFactor?: GLBlendFactor; } /** @@ -68,7 +68,7 @@ export interface IBlendComponent * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc */ -export type BlendFactor = "ZERO" | "ONE" | "SRC_COLOR" | "ONE_MINUS_SRC_COLOR" | "DST_COLOR" | "ONE_MINUS_DST_COLOR" | "SRC_ALPHA" | "ONE_MINUS_SRC_ALPHA" | "DST_ALPHA" | "ONE_MINUS_DST_ALPHA" | "SRC_ALPHA_SATURATE"; +export type GLBlendFactor = "ZERO" | "ONE" | "SRC_COLOR" | "ONE_MINUS_SRC_COLOR" | "DST_COLOR" | "ONE_MINUS_DST_COLOR" | "SRC_ALPHA" | "ONE_MINUS_SRC_ALPHA" | "DST_ALPHA" | "ONE_MINUS_DST_ALPHA" | "SRC_ALPHA_SATURATE" | "CONSTANT_COLOR" | "ONE_MINUS_CONSTANT_COLOR" | "CONSTANT_ALPHA" | "ONE_MINUS_CONSTANT_ALPHA"; /** * 混合方法 @@ -97,4 +97,4 @@ export type BlendFactor = "ZERO" | "ONE" | "SRC_COLOR" | "ONE_MINUS_SRC_COLOR" | * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquation */ -export type BlendEquation = "FUNC_ADD" | "FUNC_SUBTRACT" | "FUNC_REVERSE_SUBTRACT" | "MIN" | "MAX"; +export type GLBlendEquation = "FUNC_ADD" | "FUNC_SUBTRACT" | "FUNC_REVERSE_SUBTRACT" | "MIN" | "MAX"; diff --git a/src/data/IBlitFramebuffer.ts b/src/data/IGLBlitFramebuffer.ts similarity index 53% rename from src/data/IBlitFramebuffer.ts rename to src/data/IGLBlitFramebuffer.ts index ca06acea1978210369077637d36df5efc3e46938..fa4fdef9613822bf88a629ed9be5976257c128fe 100644 --- a/src/data/IBlitFramebuffer.ts +++ b/src/data/IGLBlitFramebuffer.ts @@ -1,16 +1,16 @@ -import { IPassDescriptor } from "./IPassDescriptor"; +import { IGLRenderPassDescriptor } from "./IGLPassDescriptor"; /** * 拷贝渲染缓冲与纹理直接拷贝数据。 */ -export interface IBlitFramebuffer +export interface IGLBlitFramebuffer { - read: IPassDescriptor; - draw: IPassDescriptor; - blitFramebuffers: IBlitFramebufferItem[]; + read: IGLRenderPassDescriptor; + draw: IGLRenderPassDescriptor; + blitFramebuffers: IGLBlitFramebufferItem[]; } -export type IBlitFramebufferItem = [ +export type IGLBlitFramebufferItem = [ srcX0: number, srcY0: number, srcX1: number, srcY1: number, dstX0: number, dstY0: number, dstX1: number, dstY1: number, mask: "COLOR_BUFFER_BIT" | "DEPTH_BUFFER_BIT" | "STENCIL_BUFFER_BIT", filter: "NEAREST" | "LINEAR"]; \ No newline at end of file diff --git a/src/data/IBuffer.ts b/src/data/IGLBuffer.ts similarity index 83% rename from src/data/IBuffer.ts rename to src/data/IGLBuffer.ts index 66df1332d438a3738888ec193a5ad9a88a1fa20c..720cde95e3129254b226afc559923b5b3ec64c33 100644 --- a/src/data/IBuffer.ts +++ b/src/data/IGLBuffer.ts @@ -3,15 +3,21 @@ * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData */ -export interface IBuffer +export interface IGLBuffer { - // target: BufferTarget; - target: "ARRAY_BUFFER" | "ELEMENT_ARRAY_BUFFER" | "UNIFORM_BUFFER"; + target: GLBufferTarget; + + /** + * 被bindBuffer多次绑定到不同位置时，需要填入多个值。 + * + * [MDN Reference](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/bindBuffer) + */ + targets?: GLBufferTarget[]; /** * 缓冲区数据。 */ - data?: IAttributeBufferSourceTypes; + data?: BufferSource; /** * 创建指定尺寸的空缓冲区。 @@ -23,22 +29,26 @@ export interface IBuffer * * 默认为 "STATIC_DRAW"。 */ - usage?: BufferUsage; + usage?: GLBufferUsage; /** * 写缓冲区。 */ - writeBuffers?: IWriteBuffer[]; + writeBuffers?: IGLWriteBuffer[]; } -export interface IWriteBuffer +export interface IGLWriteBuffer { bufferOffset?: number; /** * 写入缓冲区数据。 */ - data: IAttributeBufferSourceTypes; + data: BufferSource; + + dataOffset?: number + + size?: number } /** @@ -71,7 +81,7 @@ export type IAttributeBufferSourceTypes = * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData */ -export type BufferUsage = "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW" // WebGL1 +export type GLBufferUsage = "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW" // WebGL1 | "STATIC_READ" | "DYNAMIC_READ" | "STREAM_READ" | "STATIC_COPY" | "DYNAMIC_COPY" | "STREAM_COPY" // WebGL2 ; @@ -90,6 +100,7 @@ export type BufferUsage = "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW" // WebG * * gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations. * */ -export type BufferTarget = "ARRAY_BUFFER" | "ELEMENT_ARRAY_BUFFER" // WebGL1 +export type GLBufferTarget = "ARRAY_BUFFER" | "ELEMENT_ARRAY_BUFFER" // WebGL1 | "COPY_READ_BUFFER" | "COPY_WRITE_BUFFER" | "TRANSFORM_FEEDBACK_BUFFER"// WebGL2 | "UNIFORM_BUFFER" | "PIXEL_PACK_BUFFER" | "PIXEL_UNPACK_BUFFER"; // WebGL2 +// export type GLBufferTarget = "ARRAY_BUFFER" | "ELEMENT_ARRAY_BUFFER" | "UNIFORM_BUFFER"; \ No newline at end of file diff --git a/src/data/ICapabilities.ts b/src/data/IGLCapabilities.ts similarity index 95% rename from src/data/ICapabilities.ts rename to src/data/IGLCapabilities.ts index 62e93ff108524a363ae3f3a170e46001c28b42b6..630abf61fc3f6a28f5123959f31ad89e477bc68b 100644 --- a/src/data/ICapabilities.ts +++ b/src/data/IGLCapabilities.ts @@ -5,7 +5,7 @@ declare global /** * WEBGL支持功能 */ - _capabilities: ICapabilities; + _capabilities: IGLCapabilities; } } @@ -15,7 +15,7 @@ declare global * @see https://webglreport.com * @see http://html5test.com */ -export interface ICapabilities +export interface IGLCapabilities { /** * 纹理各向异性过滤最大值 diff --git a/src/data/IColorTargetState.ts b/src/data/IGLColorTargetState.ts similarity index 57% rename from src/data/IColorTargetState.ts rename to src/data/IGLColorTargetState.ts index 9be94506e82c47e99817cf208dc25841dfc54f67..cfab0e7346a0ea100269bab006363b98ad1357d2 100644 --- a/src/data/IColorTargetState.ts +++ b/src/data/IGLColorTargetState.ts @@ -1,11 +1,11 @@ -import { IBlendState } from "./IBlendState"; +import { IGLBlendState } from "./IGLBlendState"; -export interface IColorTargetState +export interface IGLColorTargetState { /** * 混合状态。 */ - blend?: IBlendState; + blend?: IGLBlendState; /** * 控制那些颜色分量是否可以被写入到帧缓冲器。 @@ -14,7 +14,7 @@ export interface IColorTargetState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/colorMask */ - writeMask?: IWriteMask; + writeMask?: IGLWriteMask; } -export type IWriteMask = [red: boolean, green: boolean, blue: boolean, alpha: boolean]; \ No newline at end of file +export type IGLWriteMask = [red: boolean, green: boolean, blue: boolean, alpha: boolean]; \ No newline at end of file diff --git a/src/data/ICopyBuffer.ts b/src/data/IGLCopyBuffer.ts similarity index 37% rename from src/data/ICopyBuffer.ts rename to src/data/IGLCopyBuffer.ts index 81f0f48e5ca1187e12aa2749c5cc8bbfc5cc908b..6fc683113a2b6a56e24b923957403a2c5cda88ad 100644 --- a/src/data/ICopyBuffer.ts +++ b/src/data/IGLCopyBuffer.ts @@ -1,9 +1,9 @@ -import { IBuffer } from "./IBuffer"; +import { IGLBuffer } from "./IGLBuffer"; -export interface ICopyBuffer +export interface IGLCopyBuffer { - read: IBuffer, - write: IBuffer, + read: IGLBuffer, + write: IGLBuffer, readOffset: number writeOffset: number size: number diff --git a/src/data/ICullFace.ts b/src/data/IGLCullFace.ts similarity index 88% rename from src/data/ICullFace.ts rename to src/data/IGLCullFace.ts index e2f2a619e40a1be0832177e919b837a4cb5a58ea..4ffee6e28da1c38e11da242c28540001a1039367 100644 --- a/src/data/ICullFace.ts +++ b/src/data/IGLCullFace.ts @@ -3,7 +3,7 @@ * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/cullFace */ -export interface ICullFace +export interface IGLCullFace { /** * 是否开启面剔除。 @@ -25,14 +25,14 @@ export interface ICullFace * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/cullFace */ - cullMode?: CullFace; + cullMode?: GLCullFace; /** * 正向方向，默认 CCW。三角形逆时针方向为正面。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/frontFace */ - frontFace?: FrontFace; + frontFace?: GLFrontFace; } /** @@ -43,7 +43,7 @@ export interface ICullFace * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/frontFace */ -export type FrontFace = "CW" | "CCW"; +export type GLFrontFace = "CW" | "CCW"; /** * 剔除面，默认 BACK，剔除背面。 @@ -58,4 +58,4 @@ export type FrontFace = "CW" | "CCW"; * @see http://www.jianshu.com/p/ee04165f2a02 * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/cullFace */ -export type CullFace = "FRONT" | "BACK" | "FRONT_AND_BACK"; \ No newline at end of file +export type GLCullFace = "FRONT" | "BACK" | "FRONT_AND_BACK"; \ No newline at end of file diff --git a/src/data/IDepthStencilState.ts b/src/data/IGLDepthStencilState.ts similarity index 91% rename from src/data/IDepthStencilState.ts rename to src/data/IGLDepthStencilState.ts index 2f3140b05e575e0521075d98a84cff57de45b621..18f0a9a5d7e23c01c61999ae8bf3deb440ece687 100644 --- a/src/data/IDepthStencilState.ts +++ b/src/data/IGLDepthStencilState.ts @@ -1,23 +1,23 @@ /** * 深度模板状态。 */ -export interface IDepthStencilState +export interface IGLDepthStencilState { /** * 深度状态。 */ - depth?: IDepthState; + depth?: IGLDepthState; /** * 模板状态。 */ - stencil?: IStencilState; + stencil?: IGLStencilState; } /** * 深度状态。 */ -export interface IDepthState +export interface IGLDepthState { /** * 是否开启深度检查，默认 true，开启深度检测。 @@ -40,10 +40,10 @@ export interface IDepthState * * A GLenum specifying the depth comparison function, which sets the conditions under which the pixel will be drawn. The default value is gl.LESS. * - * @see CompareFunction + * @see GLCompareFunction * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/depthFunc */ - depthCompare?: CompareFunction; + depthCompare?: GLCompareFunction; /** * 深度偏移。 @@ -82,7 +82,7 @@ export interface IDepthBias /** * 模板状态。 */ -export interface IStencilState +export interface IGLStencilState { /** * 是否开启模板测试与更新模板缓冲。 @@ -116,7 +116,7 @@ export interface IStencilFaceState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilFunc */ - stencilFunc?: StencilFunc; + stencilFunc?: GLStencilFunc; /** * 一个为模板测试指定参考值。这个值被限制在0到2^n -1的范围内，其中n是模板缓冲区中的位数。默认0。 @@ -143,7 +143,7 @@ export interface IStencilFaceState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilOp */ - stencilOpFail?: StencilOp; + stencilOpFail?: GLStencilOp; /** * 指定在模板测试通过但深度测试失败时使用的函数枚举。默认KEEP，保持当前值。 @@ -152,7 +152,7 @@ export interface IStencilFaceState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilOp */ - stencilOpZFail?: StencilOp; + stencilOpZFail?: GLStencilOp; /** * 指定在模板测试和深度测试通过时使用的函数枚举，或在模板测试通过且没有深度缓冲或禁用深度测试时使用的函数枚举。默认KEEP，保持当前值。 @@ -161,7 +161,7 @@ export interface IStencilFaceState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilOp */ - stencilOpZPass?: StencilOp; + stencilOpZPass?: GLStencilOp; /** * 指定位掩码以启用或禁用在模板平面中写入单个位的正整数。默认全为1（0b11111111）。 @@ -189,7 +189,7 @@ export interface IStencilFaceState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/depthFunc */ -export type CompareFunction = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" | "NOTEQUAL" | "GEQUAL" | "ALWAYS"; +export type GLCompareFunction = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" | "NOTEQUAL" | "GEQUAL" | "ALWAYS"; /** * A GLenum specifying the test function. The default function is gl.ALWAYS. @@ -205,7 +205,7 @@ export type CompareFunction = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" * * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilFunc */ -export type StencilFunc = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" | "NOTEQUAL" | "GEQUAL" | "ALWAYS"; +export type GLStencilFunc = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" | "NOTEQUAL" | "GEQUAL" | "ALWAYS"; /** * The WebGLRenderingContext.stencilOp() method of the WebGL API sets both the front and back-facing stencil test actions. @@ -221,4 +221,4 @@ export type StencilFunc = "NEVER" | "LESS" | "EQUAL" | "LEQUAL" | "GREATER" | "N * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/stencilOp */ -export type StencilOp = "KEEP" | "ZERO" | "REPLACE" | "INCR" | "INCR_WRAP" | "DECR" | "DECR_WRAP" | "INVERT"; +export type GLStencilOp = "KEEP" | "ZERO" | "REPLACE" | "INCR" | "INCR_WRAP" | "DECR" | "DECR_WRAP" | "INVERT"; diff --git a/src/data/IDrawArrays.ts b/src/data/IGLDrawArrays.ts similarity index 91% rename from src/data/IDrawArrays.ts rename to src/data/IGLDrawArrays.ts index 7dc397f1c1d8129bcd912ff49883d09136cda6cc..cb5ee596a14d7bcecb549626f95fab30cf0c9a0e 100644 --- a/src/data/IDrawArrays.ts +++ b/src/data/IGLDrawArrays.ts @@ -3,7 +3,7 @@ * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawArrays */ -export interface IDrawArrays +export interface IGLDrawArrays { /** * 绘制顶点数量。 diff --git a/src/data/IDrawElements.ts b/src/data/IGLDrawElements.ts similarity index 80% rename from src/data/IDrawElements.ts rename to src/data/IGLDrawElements.ts index 3f36403bf67cb11b7adf9194c4e6ca26515b2b00..6ee9363090f6234388c7a302f5147e4e4f353e5d 100644 --- a/src/data/IDrawElements.ts +++ b/src/data/IGLDrawElements.ts @@ -1,4 +1,4 @@ -export interface IDrawElements +export interface IGLDrawElements { /** * 默认渲染所有顶点索引。 diff --git a/src/data/IFramebuffer.ts b/src/data/IGLFramebuffer.ts similarity index 59% rename from src/data/IFramebuffer.ts rename to src/data/IGLFramebuffer.ts index f4631caf4195b93f6a138b740fe93f0b5634b18f..f4043ca08fc5fd1f60968901080ddd4116fee3b4 100644 --- a/src/data/IFramebuffer.ts +++ b/src/data/IGLFramebuffer.ts @@ -1,4 +1,4 @@ -import { IPassDescriptor } from "./IPassDescriptor"; +import { IGLRenderPassDescriptor } from "./IGLPassDescriptor"; /** * 等价于 IPassDescriptor 。 @@ -7,4 +7,4 @@ import { IPassDescriptor } from "./IPassDescriptor"; * * @deprecated 请使用 IPassDescriptor 。 */ -export interface IFramebuffer extends IPassDescriptor { } +export interface IGLFramebuffer extends IGLRenderPassDescriptor { } diff --git a/src/data/IIndexBuffer.ts b/src/data/IGLIndexBuffer.ts similarity index 62% rename from src/data/IIndexBuffer.ts rename to src/data/IGLIndexBuffer.ts index f8447b7a4ff710b6f78dfb63a5ef8165496c30ae..632586bba54b04ea4812e567090756cf21131f01 100644 --- a/src/data/IIndexBuffer.ts +++ b/src/data/IGLIndexBuffer.ts @@ -1,4 +1,4 @@ -import { BufferUsage } from "./IBuffer"; +import { IGLBuffer } from "./IGLBuffer"; /** * WebGL元素缓冲，顶点索引缓冲。 @@ -8,7 +8,7 @@ import { BufferUsage } from "./IBuffer"; * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindBuffer * */ -export interface IIndexBuffer +export interface IGLIndexBuffer extends IGLBuffer { target: "ELEMENT_ARRAY_BUFFER"; @@ -16,15 +16,6 @@ export interface IIndexBuffer * 顶点索引数据。 */ data: IElementBufferSourceTypes; - - /** - * A GLenum specifying the intended usage pattern of the data store for optimization purposes. - * - * 为优化目的指定数据存储的预期使用模式的GLenum。 - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData - */ - usage?: BufferUsage; } /** @@ -46,4 +37,4 @@ export type IElementBufferSourceTypes = Uint16Array | Uint32Array | Uint8Array; * * @see https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/drawElements */ -export type IDrawElementType = "UNSIGNED_BYTE" | "UNSIGNED_SHORT" | "UNSIGNED_INT"; +export type IGLDrawElementType = "UNSIGNED_BYTE" | "UNSIGNED_SHORT" | "UNSIGNED_INT"; diff --git a/src/data/IGLPassDescriptor.ts b/src/data/IGLPassDescriptor.ts new file mode 100644 index 0000000000000000000000000000000000000000..8abc5ed10f92ea9be5a5864a59ef2dcf9ae7a88a --- /dev/null +++ b/src/data/IGLPassDescriptor.ts @@ -0,0 +1,27 @@ +import { IGLRenderPassColorAttachment } from "./IGLRenderPassColorAttachment"; +import { IGLRenderPassDepthStencilAttachment } from "./IGLRenderPassDepthStencilAttachment"; + +/** + * WebGL渲染通道描述 + */ +export interface IGLRenderPassDescriptor +{ + /** + * 颜色附件 + */ + colorAttachments?: IGLRenderPassColorAttachment[]; + + /** + * 深度模板附件。 + */ + depthStencilAttachment?: IGLRenderPassDepthStencilAttachment; + + /** + * 采用次数。 + * + * 注意： WebGL2 支持。 + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/renderbufferStorageMultisample + */ + multisample?: 4; +} \ No newline at end of file diff --git a/src/data/IPrimitiveState.ts b/src/data/IGLPrimitiveState.ts similarity index 85% rename from src/data/IPrimitiveState.ts rename to src/data/IGLPrimitiveState.ts index 8da9ae5f3a1e96e7e1f69442814181635b9ee0d5..1d508ffa97e8383860e1df6d425971cce35a6461 100644 --- a/src/data/IPrimitiveState.ts +++ b/src/data/IGLPrimitiveState.ts @@ -1,6 +1,6 @@ -import { ICullFace } from "./ICullFace"; +import { IGLCullFace } from "./IGLCullFace"; -export interface IPrimitiveState +export interface IGLPrimitiveState { /** * 图形拓扑结构。 @@ -18,9 +18,9 @@ export interface IPrimitiveState * A GLenum specifying the type primitive to render. Possible values are: * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawArrays */ - topology?: IDrawMode; + topology?: IGLDrawMode; - cullFace?: ICullFace; + cullFace?: IGLCullFace; } /** @@ -46,4 +46,4 @@ export interface IPrimitiveState * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements */ -export type IDrawMode = "POINTS" | "LINE_STRIP" | "LINE_LOOP" | "LINES" | "TRIANGLE_STRIP" | "TRIANGLE_FAN" | "TRIANGLES"; +export type IGLDrawMode = "POINTS" | "LINE_STRIP" | "LINE_LOOP" | "LINES" | "TRIANGLE_STRIP" | "TRIANGLE_FAN" | "TRIANGLES"; diff --git a/src/data/IQueryAction.ts b/src/data/IGLQueryAction.ts similarity index 92% rename from src/data/IQueryAction.ts rename to src/data/IGLQueryAction.ts index 7fabbabd84b739977de24628466b4d4ed38bd7b7..a6efb33881b637df959f305c6212e8a9d0d4e065 100644 --- a/src/data/IQueryAction.ts +++ b/src/data/IGLQueryAction.ts @@ -3,7 +3,7 @@ * * 仅 WebGL2 支持。 */ -export interface IQueryAction +export interface IGLQueryAction { /** * 开始查询或者结束查询。 @@ -20,7 +20,7 @@ export interface IQueryAction * * 通过该对象获取查询结果。 */ - query: IQuery; + query: IGLQuery; } /** @@ -30,7 +30,7 @@ export interface IQueryAction * * 仅 WebGL2 支持。 */ -export interface IQuery +export interface IGLQuery { /** * 当前状态。 diff --git a/src/data/IReadPixels.ts b/src/data/IGLReadPixels.ts similarity index 58% rename from src/data/IReadPixels.ts rename to src/data/IGLReadPixels.ts index 78bac4fe7f14a7c5f5ce2cd553392ddd15cc522c..615dc181891b839a9f610537e98fc29df365de55 100644 --- a/src/data/IReadPixels.ts +++ b/src/data/IGLReadPixels.ts @@ -1,20 +1,20 @@ -import { AttachmentPoint } from "../gl/WebGLEnums"; -import { IFramebuffer } from "./IFramebuffer"; -import { ITextureDataType, ITextureFormat } from "./ITexture"; +import { GLAttachmentPoint } from "../gl/WebGLEnums"; +import { IGLFramebuffer } from "./IGLFramebuffer"; +import { IGLTextureDataType, IGLTextureFormat } from "./IGLTexture"; /** * 读取渲染缓冲区或者纹理视图中的像素值。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels */ -export interface IReadPixels +export interface IGLReadPixels { - frameBuffer: IFramebuffer; + frameBuffer: IGLFramebuffer; /** * 读取那个附件。 */ - attachmentPoint: AttachmentPoint; + attachmentPoint: GLAttachmentPoint; x: number, y: number, @@ -26,14 +26,14 @@ export interface IReadPixels * * 默认 "RGBA"。 */ - format?: ITextureFormat; + format?: IGLTextureFormat; /** * 数据类型。 * * 默认 "UNSIGNED_BYTE"。 */ - type?: ITextureDataType; + type?: IGLTextureDataType; dstData: ArrayBufferView, dstOffset: number diff --git a/src/data/IRenderObject.ts b/src/data/IGLRenderObject.ts similarity index 62% rename from src/data/IRenderObject.ts rename to src/data/IGLRenderObject.ts index aaa33e4f523373deae3e358d2e254fc327efbb3c..91bbbd6f5afbe3ac6a6e47e5dcd6eee7305febc8 100644 --- a/src/data/IRenderObject.ts +++ b/src/data/IGLRenderObject.ts @@ -1,46 +1,46 @@ import { LazyObject } from "../types"; -import { IDrawArrays } from "./IDrawArrays"; -import { IDrawElements } from "./IDrawElements"; -import { IRenderPipeline } from "./IRenderPipeline"; -import { IScissor } from "./IScissor"; -import { ITransformFeedback } from "./ITransformFeedback"; -import { IUniforms } from "./IUniforms"; -import { IVertexArrayObject } from "./IVertexArrayObject"; -import { IViewport } from "./IViewport"; +import { IGLDrawArrays } from "./IGLDrawArrays"; +import { IGLDrawElements } from "./IGLDrawElements"; +import { IGLRenderPipeline } from "./IGLRenderPipeline"; +import { IGLScissor } from "./IGLScissor"; +import { IGLTransformFeedback } from "./IGLTransformFeedback"; +import { IGLUniforms } from "./IGLUniforms"; +import { IGLVertexArrayObject } from "./IGLVertexArrayObject"; +import { IGLViewport } from "./IGLViewport"; /** * 渲染原子（该对象会收集一切渲染所需数据以及参数） */ -export interface IRenderObject +export interface IGLRenderObject { /** * 渲染程序 */ - pipeline: IRenderPipeline; + pipeline: IGLRenderPipeline; /** * 顶点属性以及索引数据。 */ - vertexArray?: IVertexArrayObject; + vertexArray?: IGLVertexArrayObject; /** * Uniform渲染数据 */ - uniforms?: LazyObject; + uniforms?: LazyObject; /** * 绘制一定数量顶点。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawArrays */ - drawArrays?: IDrawArrays; + drawArrays?: IGLDrawArrays; /** * 绘制一定数量顶点索引。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements */ - drawElements?: IDrawElements; + drawElements?: IGLDrawElements; /** * 视窗，显示在画布上的区域。 @@ -49,7 +49,7 @@ export interface IRenderObject * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport */ - viewport?: IViewport; + viewport?: IGLViewport; /** * 剪刀盒。 @@ -58,12 +58,12 @@ export interface IRenderObject * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/scissor */ - scissor?: IScissor; + scissor?: IGLScissor; /** * 回写顶点着色器中输出到缓冲区。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/bindTransformFeedback */ - transformFeedback?: ITransformFeedback; + transformFeedback?: IGLTransformFeedback; } diff --git a/src/data/IRenderPass.ts b/src/data/IGLRenderPass.ts similarity index 41% rename from src/data/IRenderPass.ts rename to src/data/IGLRenderPass.ts index e8a8e96d73744942c3b728827ce10b33361cf695..6c79e4a916cf8cad04f800dbc1b22f3fa775ec0d 100644 --- a/src/data/IRenderPass.ts +++ b/src/data/IGLRenderPass.ts @@ -1,21 +1,21 @@ -import { IPassDescriptor } from "./IPassDescriptor"; -import { IQueryAction } from "./IQueryAction"; -import { IRenderObject } from "./IRenderObject"; +import { IGLRenderPassDescriptor } from "./IGLPassDescriptor"; +import { IGLQueryAction } from "./IGLQueryAction"; +import { IGLRenderObject } from "./IGLRenderObject"; /** * WebGL渲染通道 * * 包含渲染通道描述以及需要渲染的对象列表。 */ -export class IRenderPass +export interface IGLRenderPass { /** * WebGL渲染通道描述 */ - passDescriptor?: IPassDescriptor; + descriptor?: IGLRenderPassDescriptor; /** * 渲染对象列表，默认为 []。 */ - renderObjects?: (IRenderObject | IQueryAction)[]; + renderObjects?: (IGLRenderObject | IGLQueryAction)[]; } diff --git a/src/data/IRenderPassColorAttachment.ts b/src/data/IGLRenderPassColorAttachment.ts similarity index 77% rename from src/data/IRenderPassColorAttachment.ts rename to src/data/IGLRenderPassColorAttachment.ts index f0c2557f74d6a49fbf06a731d67b45a47147808a..b9d43b4526dfac49c1ee35f8f6b5ebca3414e9f4 100644 --- a/src/data/IRenderPassColorAttachment.ts +++ b/src/data/IGLRenderPassColorAttachment.ts @@ -1,7 +1,7 @@ -import { IRenderbuffer } from "./IRenderbuffer"; -import { ITextureView } from "./ITexture"; +import { IGLRenderbuffer } from "./IGLRenderbuffer"; +import { IGLTextureView } from "./IGLTexture"; -export interface IRenderPassColorAttachment +export interface IGLRenderPassColorAttachment { /** * 颜色附件视图。 @@ -11,7 +11,7 @@ export interface IRenderPassColorAttachment * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/framebufferRenderbuffer * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/framebufferTexture2D */ - view?: IAttachmentView; + view?: IGLAttachmentView; /** * 清除后填充值。 @@ -32,4 +32,4 @@ export interface IRenderPassColorAttachment loadOp?: "load" | "clear"; } -export type IAttachmentView = IRenderbuffer | ITextureView; +export type IGLAttachmentView = IGLRenderbuffer | IGLTextureView; diff --git a/src/data/IRenderPassDepthStencilAttachment.ts b/src/data/IGLRenderPassDepthStencilAttachment.ts similarity index 89% rename from src/data/IRenderPassDepthStencilAttachment.ts rename to src/data/IGLRenderPassDepthStencilAttachment.ts index 9b3457f7a04df62530ab3a92dd10b18000707824..00d342739e44e0a9a8d3646c4ecbb6078a37c3e9 100644 --- a/src/data/IRenderPassDepthStencilAttachment.ts +++ b/src/data/IGLRenderPassDepthStencilAttachment.ts @@ -1,9 +1,9 @@ -import { IAttachmentView } from "./IRenderPassColorAttachment"; +import { IGLAttachmentView } from "./IGLRenderPassColorAttachment"; /** * 深度模板附件。 */ -export interface IRenderPassDepthStencilAttachment +export interface IGLRenderPassDepthStencilAttachment { /** * 深度附件视图。 @@ -13,7 +13,7 @@ export interface IRenderPassDepthStencilAttachment * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/framebufferRenderbuffer * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/framebufferTexture2D */ - view?: IAttachmentView; + view?: IGLAttachmentView; /** * 清除后填充深度值。 diff --git a/src/data/IRenderPipeline.ts b/src/data/IGLRenderPipeline.ts similarity index 75% rename from src/data/IRenderPipeline.ts rename to src/data/IGLRenderPipeline.ts index aca7ff2d82db155ca50056b85cbe11cc1acf2d80..50c19bc7023acf58eaa78cc51aaae82df61a157d 100644 --- a/src/data/IRenderPipeline.ts +++ b/src/data/IGLRenderPipeline.ts @@ -1,16 +1,16 @@ -import { IColorTargetState } from "./IColorTargetState"; -import { IDepthStencilState } from "./IDepthStencilState"; -import { IPrimitiveState } from "./IPrimitiveState"; +import { IGLColorTargetState } from "./IGLColorTargetState"; +import { IGLDepthStencilState } from "./IGLDepthStencilState"; +import { IGLPrimitiveState } from "./IGLPrimitiveState"; /** * @deprecated 请使用 `IRenderPipeline` 。 */ -export type IProgram = IRenderPipeline; +export type IGLProgram = IGLRenderPipeline; /** - * shader + * 渲染管线。 */ -export interface IRenderPipeline +export interface IGLRenderPipeline { /** * 顶点着色器代码 @@ -32,12 +32,12 @@ export interface IRenderPipeline /** * 图元拓扑结构。 */ - primitive?: IPrimitiveState; + primitive?: IGLPrimitiveState; /** * 描述可选的深度模板的测试、运算以及偏差。 */ - depthStencil?: IDepthStencilState; + depthStencil?: IGLDepthStencilState; /** * 是否丢弃后续光栅化阶段。 @@ -81,5 +81,5 @@ export interface IFragmentState /** * 定义了该管道写入的颜色目标的格式和行为。 */ - targets?: IColorTargetState[] + targets?: IGLColorTargetState[] } \ No newline at end of file diff --git a/src/data/IRenderbuffer.ts b/src/data/IGLRenderbuffer.ts similarity index 85% rename from src/data/IRenderbuffer.ts rename to src/data/IGLRenderbuffer.ts index 451453f9d3041fb3ac3c907f1a4deacb01af5fbc..798c790b76cc7a3788a46a6ca8c4c8a3e3d6bba6 100644 --- a/src/data/IRenderbuffer.ts +++ b/src/data/IGLRenderbuffer.ts @@ -4,21 +4,12 @@ * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/renderbufferStorage * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/renderbufferStorageMultisample */ -export interface IRenderbuffer +export interface IGLRenderbuffer { - /** - * 采用次数。 - * - * 注意： WebGL2 支持。 - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/renderbufferStorageMultisample - */ - samples?: number; - /** * 渲染缓冲区内部格式。 */ - internalformat: RenderbufferInternalformat, + internalformat: GLRenderbufferInternalformat, /** * 宽度。 @@ -94,7 +85,7 @@ export interface IRenderbuffer * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/renderbufferStorage */ -export type RenderbufferInternalformat = "RGBA4" | "RGB565" | "RGB5_A1" | "DEPTH_COMPONENT16" | "STENCIL_INDEX8" | "DEPTH_STENCIL" // WebGL1 +export type GLRenderbufferInternalformat = "RGBA4" | "RGB565" | "RGB5_A1" | "DEPTH_COMPONENT16" | "STENCIL_INDEX8" | "DEPTH_STENCIL" // WebGL1 | "R8" | "R8UI" | "R8I" | "R16UI" | "R16I" | "R32UI" | "R32I" | "RG8" | "RG8UI" | "RG8I" // WebGL2 | "RG16UI" | "RG16I" | "RG32UI" | "RG32I" | "RGB8" | "RGBA8" | "SRGB8_ALPHA8" | "RGB10_A2" // WebGL2 | "RGBA8UI" | "RGBA8I" | "RGB10_A2UI" | "RGBA16UI" | "RGBA16I" | "RGBA32I" | "RGBA32UI" // WebGL2 diff --git a/src/data/IRenderingContext.ts b/src/data/IGLRenderingContext.ts similarity index 79% rename from src/data/IRenderingContext.ts rename to src/data/IGLRenderingContext.ts index e69bd9a27dc68de940fcf1c7252ef51dab9e659f..5eefa50fb47e5880dfefc4238c4a21b8bbc1a44c 100644 --- a/src/data/IRenderingContext.ts +++ b/src/data/IGLRenderingContext.ts @@ -3,7 +3,7 @@ * * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext */ -export interface IRenderingContext extends WebGLContextAttributes +export interface IGLRenderingContext extends WebGLContextAttributes { /** * 画布编号。 diff --git a/src/data/ISampler.ts b/src/data/IGLSampler.ts similarity index 73% rename from src/data/ISampler.ts rename to src/data/IGLSampler.ts index 4b91e5a8d7a65d81a695a64d50a5f90312f5f563..31a080bcda7ff73fb2b92a9e54fbf115f8040f3a 100644 --- a/src/data/ISampler.ts +++ b/src/data/IGLSampler.ts @@ -1,26 +1,26 @@ -import { CompareFunction } from "./IDepthStencilState"; +import { GLCompareFunction } from "./IGLDepthStencilState"; -export interface ISampler +export interface IGLSampler { - minFilter?: TextureMinFilter; + minFilter?: GLTextureMinFilter; magFilter?: TextureMagFilter; /** * 表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的时候，平面剩下的部分应该p以何种方式贴图的问题。 */ - wrapS?: TextureWrap; + wrapS?: GLTextureWrap; /** * 表示y轴的纹理回环方式。 magFilter和minFilter表示过滤的方式。 */ - wrapT?: TextureWrap; + wrapT?: GLTextureWrap; /** * 表示y轴的纹理回环方式。 magFilter和minFilter表示过滤的方式。 */ - wrapR?: TextureWrap; + wrapR?: GLTextureWrap; /** * 各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间。默认为1。 @@ -37,13 +37,15 @@ export interface ISampler */ lodMaxClamp?: number; - compareMode?: "NONE"; + compareMode?: GLSamplerCompareMode; /** * 比较函数。 */ - compare?: CompareFunction; + compare?: GLCompareFunction; } +export type GLSamplerCompareMode = "NONE" | "COMPARE_REF_TO_TEXTURE"; + /** * 纹理放大滤波器 * Texture magnification filter @@ -68,7 +70,7 @@ export type TextureMagFilter = "LINEAR" | "NEAREST"; * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter */ -export type TextureMinFilter = "LINEAR" | "NEAREST" | "NEAREST_MIPMAP_NEAREST" | "LINEAR_MIPMAP_NEAREST" | "NEAREST_MIPMAP_LINEAR" | "LINEAR_MIPMAP_LINEAR"; +export type GLTextureMinFilter = "LINEAR" | "NEAREST" | "NEAREST_MIPMAP_NEAREST" | "LINEAR_MIPMAP_NEAREST" | "NEAREST_MIPMAP_LINEAR" | "LINEAR_MIPMAP_LINEAR"; /** * 纹理坐标s包装函数枚举 @@ -80,4 +82,4 @@ export type TextureMinFilter = "LINEAR" | "NEAREST" | "NEAREST_MIPMAP_NEAREST" | * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter */ -export type TextureWrap = "REPEAT" | "CLAMP_TO_EDGE" | "MIRRORED_REPEAT"; \ No newline at end of file +export type GLTextureWrap = "REPEAT" | "CLAMP_TO_EDGE" | "MIRRORED_REPEAT"; \ No newline at end of file diff --git a/src/data/ISamplerTexture.ts b/src/data/IGLSamplerTexture.ts similarity index 35% rename from src/data/ISamplerTexture.ts rename to src/data/IGLSamplerTexture.ts index 62664007966b2bfb8c580fc6302de727f5e37b1e..253635842eaa0ada587a11d4fdf4ad59edda794d 100644 --- a/src/data/ISamplerTexture.ts +++ b/src/data/IGLSamplerTexture.ts @@ -1,17 +1,17 @@ -import { ISampler } from "./ISampler"; -import { ITexture } from "./ITexture"; +import { IGLSampler } from "./IGLSampler"; +import { IGLTexture } from "./IGLTexture"; /** * 采样纹理。 * * 采样器与纹理。 */ -export interface ISamplerTexture +export interface IGLSamplerTexture { - texture: ITexture; + texture: IGLTexture; /** * 采样器。 */ - sampler?: ISampler; + sampler?: IGLSampler; } \ No newline at end of file diff --git a/src/data/IScissor.ts b/src/data/IGLScissor.ts similarity index 85% rename from src/data/IScissor.ts rename to src/data/IGLScissor.ts index 5a8ebdeab05f09816c8413265fd7d3708084dc59..0f0b3f3fe5b82044fa30d461dede154e5e6b417e 100644 --- a/src/data/IScissor.ts +++ b/src/data/IGLScissor.ts @@ -5,8 +5,13 @@ * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/scissor */ -export interface IScissor +export interface IGLScissor { + /** + * 是否开启 + */ + enable?: boolean; + /** * 剪刀盒X轴最小值（像素）。 */ diff --git a/src/data/ITexture.ts b/src/data/IGLTexture.ts similarity index 65% rename from src/data/ITexture.ts rename to src/data/IGLTexture.ts index 2bd23695352a10e18ef1d711951ae1bfd42eac06..ed06c313df5d7a113b1cb85f75ab3c45e5dcfe41 100644 --- a/src/data/ITexture.ts +++ b/src/data/IGLTexture.ts @@ -1,12 +1,15 @@ +import { IGLTexturePixelStore } from "./IGLTexturePixelStore"; +import { IGLTextureStorage } from "./IGLTextureStorage"; + /** * 纹理视图。 */ -export interface ITextureView +export interface IGLTextureView { /** * 纹理。 */ - texture: ITexture, + texture: IGLTexture, /** * mipmap级别。 @@ -22,21 +25,21 @@ export interface ITextureView /** * 纹理 */ -export interface ITexture +export interface IGLTexture { /** * 纹理绑定点。 * * 默认"TEXTURE_2D"。 */ - target?: ITextureTarget; + target?: GLTextureTarget; /** * 纹理资源。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D */ - sources?: ITextureSource[]; + sources?: IGLTextureSource[]; /** * 初始纹理时指定纹理存储的各个级别。 @@ -44,14 +47,14 @@ export interface ITexture * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage2D * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage3D */ - storage?: ITextureStorage; + storage?: IGLTextureStorage; /** * 写入纹理。 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D */ - writeTextures?: IWriteTexture[]; + writeTextures?: IGLWriteTexture[]; /** * 是否生成mipmap @@ -63,34 +66,34 @@ export interface ITexture * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/pixelStorei */ - pixelStore?: ITexturePixelStore; + pixelStore?: IGLTexturePixelStore; /** * 内部纹理格式。 * * 默认 "RGBA"。 */ - internalformat?: ITextureInternalFormat, + internalformat?: IGLTextureInternalFormat, /** * 纹理格式。 * * 默认 "RGBA"。 */ - format?: ITextureFormat; + format?: IGLTextureFormat; /** * 数据类型。 * * 默认 "UNSIGNED_BYTE"。 */ - type?: ITextureDataType; + type?: IGLTextureDataType; } /** * 纹理资源。 */ -export type ITextureSource = IImageSource | IBufferSource; +export type IGLTextureSource = IGLImageSource | IGLBufferSource; /** * 纹理图片资源。 @@ -98,7 +101,7 @@ export type ITextureSource = IImageSource | IBufferSource; * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D */ -export interface IImageSource +export interface IGLImageSource { /** * 当上传CubeMap纹理数据时指定位置。 @@ -116,6 +119,28 @@ export interface IImageSource * 纹理图片资源。 */ source: TexImageSource + + /** + * WebGL2支持 + */ + width?: number; + + /** + * WebGL2支持 + */ + height?: number; + + /** + * 纹理深度，默认为 1。 + * + * WebGL2 支持。 + */ + depth?: number; + + /** + * WebGL2支持 + */ + border?: number; } /** @@ -123,7 +148,7 @@ export interface IImageSource * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D */ -export interface IBufferSource +export interface IGLBufferSource { /** * 当上传CubeMap纹理数据时指定位置。 @@ -169,6 +194,11 @@ export interface IBufferSource * 默认为 undefined。 */ pixels?: ArrayBufferView; + + /** + * 默认为 0。 + */ + srcOffset?: number; } /** @@ -196,7 +226,7 @@ export type TextureCubeMapTarget = * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D */ -export interface IWriteTexture +export interface IGLWriteTexture { /** * 当上传CubeMap纹理数据时指定位置。 @@ -244,168 +274,6 @@ export interface IWriteTexture srcOffset?: number } -/** - * 初始纹理时指定纹理存储的各个级别。 - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage2D - */ -export interface ITextureStorage -{ - levels: number, width: number, height: number; - /** - * 3D纹理深度。 - */ - depth?: number -} - -/** - * 像素解包打包时参数。 - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/pixelStorei - */ -export interface ITexturePixelStore -{ - /** - * Packing of pixel data into memory - * - * gl.PACK_ALIGNMENT - * - * 默认值为 4 。 - */ - packAlignment?: 1 | 2 | 4 | 8; - - /** - * Unpacking of pixel data from memory. - * - * gl.UNPACK_ALIGNMENT - * - * 默认值为 4 。 - */ - unpackAlignment?: 1 | 2 | 4 | 8; - - /** - * 解包图像数据时进行Y轴反转。 - * - * Flips the source data along its vertical axis if true. - * - * gl.UNPACK_FLIP_Y_WEBGL - * - * 默认为 false。 - */ - unpackFlipY?: boolean; - - /** - * 将图像RGB颜色值得每一个分量乘以A。 - * - * Multiplies the alpha channel into the other color channels - * - * gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL - * - * 默认为 false。 - */ - unpackPremulAlpha?: boolean; - - /** - * Default color space conversion or no color space conversion. - * - * gl.UNPACK_COLORSPACE_CONVERSION_WEBGL - * - * 默认为 "BROWSER_DEFAULT_WEBGL" 。 - */ - unpackColorSpaceConversion?: "BROWSER_DEFAULT_WEBGL" | "NONE"; - - /** - * Number of pixels in a row. - * - * gl.PACK_ROW_LENGTH - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - packRowLength?: number; - - /** - * Number of pixel locations skipped before the first pixel is written into memory. - * - * gl.PACK_SKIP_PIXELS - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - packSkipPixels?: number; - - /** - * Number of rows of pixel locations skipped before the first pixel is written into memory - * - * gl.PACK_SKIP_ROWS - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - packSkipRows?: number; - - /** - * Number of pixels in a row. - * - * gl.UNPACK_ROW_LENGTH - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - unpackRowLength?: number; - - /** - * Image height used for reading pixel data from memory - * - * gl.UNPACK_IMAGE_HEIGHT - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - unpackImageHeight?: number; - - /** - * - * Number of pixel images skipped before the first pixel is read from memory - * - * gl.UNPACK_SKIP_PIXELS - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - unpackSkipPixels?: number; - - /** - * - * Number of rows of pixel locations skipped before the first pixel is read from memory - * - * gl.UNPACK_SKIP_ROWS - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - unpackSkipRows?: number; - - /** - * - * Number of pixel images skipped before the first pixel is read from memory - * - * gl.UNPACK_SKIP_IMAGES - * - * 默认值为 0 。 - * - * 仅 WebGL2。 - */ - unpackSkipImages?: number; -} - /** * 纹理绑定点。 * @@ -419,14 +287,14 @@ export interface ITexturePixelStore * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindTexture */ -export type ITextureTarget = "TEXTURE_2D" | "TEXTURE_CUBE_MAP" | "TEXTURE_3D" | "TEXTURE_2D_ARRAY"; +export type GLTextureTarget = "TEXTURE_2D" | "TEXTURE_CUBE_MAP" | "TEXTURE_3D" | "TEXTURE_2D_ARRAY"; /** * internalformat format type * * @see https://registry.khronos.org/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE */ -export type ITextureTypes = +export type GLTextureTypes = | { internalformat: "RGB", format: "RGB", type: "UNSIGNED_BYTE" | "UNSIGNED_SHORT_5_6_5" } | { internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE" | "UNSIGNED_SHORT_4_4_4_4" | "UNSIGNED_SHORT_5_5_5_1" } | { internalformat: "LUMINANCE_ALPHA", format: "LUMINANCE_ALPHA", type: "UNSIGNED_BYTE" } @@ -460,6 +328,6 @@ export type ITextureTypes = | { internalformat: "DEPTH_COMPONENT16", format: "DEPTH_COMPONENT", type: "UNSIGNED_SHORT", } ; -export type ITextureInternalFormat = ITextureTypes["internalformat"]; -export type ITextureFormat = ITextureTypes["format"]; -export type ITextureDataType = ITextureTypes["type"]; +export type IGLTextureInternalFormat = GLTextureTypes["internalformat"]; +export type IGLTextureFormat = GLTextureTypes["format"]; +export type IGLTextureDataType = GLTextureTypes["type"]; diff --git a/src/data/IGLTexturePixelStore.ts b/src/data/IGLTexturePixelStore.ts new file mode 100644 index 0000000000000000000000000000000000000000..ec6ce4271060bb8cd3e150b056a6e4a0af1ad36b --- /dev/null +++ b/src/data/IGLTexturePixelStore.ts @@ -0,0 +1,148 @@ + +/** + * 像素解包打包时参数。 + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/pixelStorei + */ +export interface IGLTexturePixelStore +{ + /** + * Packing of pixel data into memory + * + * gl.PACK_ALIGNMENT + * + * 默认值为 4 。 + */ + packAlignment?: 1 | 2 | 4 | 8; + + /** + * Unpacking of pixel data from memory. + * + * gl.UNPACK_ALIGNMENT + * + * 默认值为 4 。 + */ + unpackAlignment?: 1 | 2 | 4 | 8; + + /** + * 解包图像数据时进行Y轴反转。 + * + * Flips the source data along its vertical axis if true. + * + * gl.UNPACK_FLIP_Y_WEBGL + * + * 默认为 false。 + */ + unpackFlipY?: boolean; + + /** + * 将图像RGB颜色值得每一个分量乘以A。 + * + * Multiplies the alpha channel into the other color channels + * + * gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL + * + * 默认为 false。 + */ + unpackPremulAlpha?: boolean; + + /** + * Default color space conversion or no color space conversion. + * + * gl.UNPACK_COLORSPACE_CONVERSION_WEBGL + * + * 默认为 "BROWSER_DEFAULT_WEBGL" 。 + */ + unpackColorSpaceConversion?: "BROWSER_DEFAULT_WEBGL" | "NONE"; + + /** + * Number of pixels in a row. + * + * gl.PACK_ROW_LENGTH + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + packRowLength?: number; + + /** + * Number of pixel locations skipped before the first pixel is written into memory. + * + * gl.PACK_SKIP_PIXELS + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + packSkipPixels?: number; + + /** + * Number of rows of pixel locations skipped before the first pixel is written into memory + * + * gl.PACK_SKIP_ROWS + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + packSkipRows?: number; + + /** + * Number of pixels in a row. + * + * gl.UNPACK_ROW_LENGTH + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + unpackRowLength?: number; + + /** + * Image height used for reading pixel data from memory + * + * gl.UNPACK_IMAGE_HEIGHT + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + unpackImageHeight?: number; + + /** + * + * Number of pixel images skipped before the first pixel is read from memory + * + * gl.UNPACK_SKIP_PIXELS + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + unpackSkipPixels?: number; + + /** + * + * Number of rows of pixel locations skipped before the first pixel is read from memory + * + * gl.UNPACK_SKIP_ROWS + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + unpackSkipRows?: number; + + /** + * + * Number of pixel images skipped before the first pixel is read from memory + * + * gl.UNPACK_SKIP_IMAGES + * + * 默认值为 0 。 + * + * 仅 WebGL2。 + */ + unpackSkipImages?: number; +} diff --git a/src/data/IGLTextureStorage.ts b/src/data/IGLTextureStorage.ts new file mode 100644 index 0000000000000000000000000000000000000000..417f1342876a6134d6c5c67d20b59f06d164fe3c --- /dev/null +++ b/src/data/IGLTextureStorage.ts @@ -0,0 +1,14 @@ +/** + * 初始纹理时指定纹理存储的各个级别。 + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage2D + * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texStorage3D + */ +export interface IGLTextureStorage +{ + levels: number, width: number, height: number; + /** + * 3D纹理深度。 + */ + depth?: number +} \ No newline at end of file diff --git a/src/data/ITransformFeedback.ts b/src/data/IGLTransformFeedback.ts similarity index 48% rename from src/data/ITransformFeedback.ts rename to src/data/IGLTransformFeedback.ts index d6d48f2788e8e982f5b80fad8e77731022147afa..a9a32a43682e8fcafe1a076f7fef598987ff6c2f 100644 --- a/src/data/ITransformFeedback.ts +++ b/src/data/IGLTransformFeedback.ts @@ -1,19 +1,19 @@ -import { IBuffer } from "./IBuffer"; +import { IGLBuffer } from "./IGLBuffer"; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/createTransformFeedback */ -export interface ITransformFeedback +export interface IGLTransformFeedback { /** * 绑定缓冲区列表。 */ - bindBuffers: ITransformFeedbacBindBuffer[]; + bindBuffers: IGLTransformFeedbacBindBuffer[]; } -export interface ITransformFeedbacBindBuffer +export interface IGLTransformFeedbacBindBuffer { index: number; - buffer: IBuffer; + buffer: IGLBuffer; } \ No newline at end of file diff --git a/src/data/IUniformInfo.ts b/src/data/IGLUniformInfo.ts similarity index 83% rename from src/data/IUniformInfo.ts rename to src/data/IGLUniformInfo.ts index 3d80d69eba6d9a33b487a0a498259fe79936b703..cf059c5318828aae9395c9734b467d7112b2efc1 100644 --- a/src/data/IUniformInfo.ts +++ b/src/data/IGLUniformInfo.ts @@ -1,16 +1,16 @@ -import { IWebGLUniformType } from "../const/WebGLUniformType"; +import { IGLUniformType } from "../const/WebGLUniformType"; /** * WebGL统一变量 */ -export interface IUniformInfo +export interface IGLUniformInfo { /** * 名称。 */ name: string; - type: IWebGLUniformType; + type: IGLUniformType; /** * 是否纹理。 diff --git a/src/data/IGLUniforms.ts b/src/data/IGLUniforms.ts new file mode 100644 index 0000000000000000000000000000000000000000..ff2cac45b283dd38f9bd09854b651b61d2f879a2 --- /dev/null +++ b/src/data/IGLUniforms.ts @@ -0,0 +1,20 @@ +import { IGLBuffer } from "./IGLBuffer"; +import { IGLSamplerTexture } from "./IGLSamplerTexture"; + +/** + * Uniform 类型 + */ +export type IGLUniformType = IGLSamplerTexture | IGLSamplerTexture[] | number | number[] | Float32Array | (number[] | Float32Array)[] | Int32Array | IGLUniformBuffer | IGLUniforms; + +export interface IGLUniformBuffer extends IGLBuffer +{ + target: "UNIFORM_BUFFER"; +} + +/** + * Uniform 数据 + */ +export interface IGLUniforms +{ + [key: string]: IGLUniformType; +} diff --git a/src/data/IVertexArrayObject.ts b/src/data/IGLVertexArrayObject.ts similarity index 30% rename from src/data/IVertexArrayObject.ts rename to src/data/IGLVertexArrayObject.ts index c648a2cd46a5a232df643920fd5d99686805e164..d433ca230a1aa47b57c11d635c95f552b8f94b01 100644 --- a/src/data/IVertexArrayObject.ts +++ b/src/data/IGLVertexArrayObject.ts @@ -1,15 +1,15 @@ -import { IIndexBuffer } from "./IIndexBuffer"; -import { IVertexAttributes } from "./IVertexAttributes"; +import { IGLIndexBuffer } from "./IGLIndexBuffer"; +import { IGLVertexAttributes } from "./IGLVertexAttributes"; -export interface IVertexArrayObject +export interface IGLVertexArrayObject { /** * 顶点索引缓冲 */ - index?: IIndexBuffer; + index?: IGLIndexBuffer; /** * 顶点属性数据列表 */ - vertices: IVertexAttributes; + vertices: IGLVertexAttributes; } \ No newline at end of file diff --git a/src/data/IVertexAttribute.ts b/src/data/IGLVertexAttribute.ts similarity index 91% rename from src/data/IVertexAttribute.ts rename to src/data/IGLVertexAttribute.ts index 030aa0c0138b9ee316b5ea07a2d975e3632c496f..d7dbbcf156736a678a57884d67343c828778bd29 100644 --- a/src/data/IVertexAttribute.ts +++ b/src/data/IGLVertexAttribute.ts @@ -1,4 +1,4 @@ -import { IBuffer } from "./IBuffer"; +import { IAttributeBufferSourceTypes, IGLBuffer } from "./IGLBuffer"; /** * 顶点属性数据。 @@ -6,14 +6,14 @@ import { IBuffer } from "./IBuffer"; * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/vertexAttribIPointer */ -export interface IVertexAttribute +export interface IGLVertexAttribute { /** * WebGL缓冲区 * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData */ - buffer: IVertexBuffer; + buffer: IGLVertexBuffer; /** * 顶点数据元素数量。 @@ -51,9 +51,14 @@ export interface IVertexAttribute vertexSize?: number; } -export interface IVertexBuffer extends IBuffer +export interface IGLVertexBuffer extends IGLBuffer { target: "ARRAY_BUFFER"; + + /** + * 缓冲区数据。 + */ + data?: IAttributeBufferSourceTypes; } /** diff --git a/src/data/IGLVertexAttributes.ts b/src/data/IGLVertexAttributes.ts new file mode 100644 index 0000000000000000000000000000000000000000..b004dcf5b5aacfcb7a48c0330e26e29fd8b6c9e7 --- /dev/null +++ b/src/data/IGLVertexAttributes.ts @@ -0,0 +1,9 @@ +import { IGLVertexAttribute } from "./IGLVertexAttribute"; + +/** + * 顶点属性数据映射。 + */ +export interface IGLVertexAttributes +{ + [name: string]: IGLVertexAttribute; +} \ No newline at end of file diff --git a/src/data/IViewport.ts b/src/data/IGLViewport.ts similarity index 91% rename from src/data/IViewport.ts rename to src/data/IGLViewport.ts index 764f7205dc8a01059bc3d92ffcfcd8a3ce5e591c..66bcf5d1ec24e0aec55d1ba737f0907fee94c5f4 100644 --- a/src/data/IViewport.ts +++ b/src/data/IGLViewport.ts @@ -1,7 +1,7 @@ /** * 视窗。 */ -export interface IViewport +export interface IGLViewport { /** * 视窗X轴最小值（像素）。 diff --git a/src/data/IPassDescriptor.ts b/src/data/IPassDescriptor.ts deleted file mode 100644 index 441b28c052de16450db32931c7be867f7df36ffd..0000000000000000000000000000000000000000 --- a/src/data/IPassDescriptor.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { IRenderPassColorAttachment } from "./IRenderPassColorAttachment"; -import { IRenderPassDepthStencilAttachment } from "./IRenderPassDepthStencilAttachment"; - -/** - * WebGL渲染通道描述 - */ -export interface IPassDescriptor -{ - /** - * 颜色附件 - */ - colorAttachments?: IRenderPassColorAttachment[]; - - /** - * 深度模板附件。 - */ - depthStencilAttachment?: IRenderPassDepthStencilAttachment; -} \ No newline at end of file diff --git a/src/data/IUniforms.ts b/src/data/IUniforms.ts deleted file mode 100644 index ac209e36a9e30d4d0bd02850f3063558f3b0ce43..0000000000000000000000000000000000000000 --- a/src/data/IUniforms.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { IBuffer } from "./IBuffer"; -import { ISamplerTexture } from "./ISamplerTexture"; - -/** - * Uniform 类型 - */ -export type IUniformType = ISamplerTexture | ISamplerTexture[] | number | number[] | Float32Array | (number[] | Float32Array)[] | Int32Array | IUniformBuffer | IUniforms; - -export interface IUniformBuffer extends IBuffer -{ - target: "UNIFORM_BUFFER"; -} - -/** - * Uniform 数据 - */ -export interface IUniforms -{ - [key: string]: IUniformType; -} diff --git a/src/data/IVertexAttributes.ts b/src/data/IVertexAttributes.ts deleted file mode 100644 index b431df24ae6abfa6cd586597854de7bb68738a8b..0000000000000000000000000000000000000000 --- a/src/data/IVertexAttributes.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { IVertexAttribute } from "./IVertexAttribute"; - -/** - * 顶点属性数据映射。 - */ -export interface IVertexAttributes -{ - [name: string]: IVertexAttribute; -} \ No newline at end of file diff --git a/src/defaults/defaultWebGLCanvasContext.ts b/src/defaults/defaultWebGLCanvasContext.ts index 25c83a2d7e5cce8d477df79735b103bbac79284f..001f1e577d4a990faa2a5f203ffdabdeb1b1fe31 100644 --- a/src/defaults/defaultWebGLCanvasContext.ts +++ b/src/defaults/defaultWebGLCanvasContext.ts @@ -1,9 +1,9 @@ -import { IRenderingContext } from "../data/IRenderingContext"; +import { IGLRenderingContext } from "../data/IGLRenderingContext"; /** * 默认WebGL上下文信息。 */ -export const defaultCanvasContext: IRenderingContext = Object.freeze({ +export const defaultCanvasContext: IGLRenderingContext = Object.freeze({ contextId: "webgl2", depth: true, stencil: true, diff --git a/src/gl/WebGLEnums.ts b/src/gl/WebGLEnums.ts index 17ed2e85f2990dba41585cbed4e1920c03140930..c48b39179a92d88232e909505333f8a4657dc24b 100644 --- a/src/gl/WebGLEnums.ts +++ b/src/gl/WebGLEnums.ts @@ -1,4 +1,4 @@ -import { TextureMagFilter, TextureMinFilter, TextureWrap } from "../data/ISampler"; +import { TextureMagFilter, GLTextureMinFilter, GLTextureWrap } from "../data/IGLSampler"; /** * A GLenum specifying which WebGL capability to enable. Possible values: @@ -100,17 +100,17 @@ export interface TexParameteri extends TexParameteri_WebGL2 /** * Texture minification filter */ - TEXTURE_MIN_FILTER: TextureMinFilter; + TEXTURE_MIN_FILTER: GLTextureMinFilter; /** * Wrapping function for texture coordinate s */ - TEXTURE_WRAP_S: TextureWrap; + TEXTURE_WRAP_S: GLTextureWrap; /** * Wrapping function for texture coordinate t */ - TEXTURE_WRAP_T: TextureWrap; + TEXTURE_WRAP_T: GLTextureWrap; } /** @@ -163,7 +163,7 @@ export interface TexParameteri_WebGL2 /** * Wrapping function for texture coordinate r */ - TEXTURE_WRAP_R: TextureWrap; + TEXTURE_WRAP_R: GLTextureWrap; } /** @@ -336,7 +336,7 @@ export type PrecisionType = "LOW_FLOAT" | "MEDIUM_FLOAT" | "HIGH_FLOAT" | "LOW_I * gl.DEPTH_STENCIL_ATTACHMENT: depth and stencil buffer. * gl.COLOR_ATTACHMENT1 gl.COLOR_ATTACHMENT2 gl.COLOR_ATTACHMENT3 gl.COLOR_ATTACHMENT4 gl.COLOR_ATTACHMENT5 gl.COLOR_ATTACHMENT6 gl.COLOR_ATTACHMENT7 gl.COLOR_ATTACHMENT8 gl.COLOR_ATTACHMENT9 gl.COLOR_ATTACHMENT10 gl.COLOR_ATTACHMENT11 gl.COLOR_ATTACHMENT12 gl.COLOR_ATTACHMENT13 gl.COLOR_ATTACHMENT14 gl.COLOR_ATTACHMENT15 */ -export type AttachmentPoint = "COLOR_ATTACHMENT0" | "DEPTH_ATTACHMENT" | "STENCIL_ATTACHMENT" +export type GLAttachmentPoint = "COLOR_ATTACHMENT0" | "DEPTH_ATTACHMENT" | "STENCIL_ATTACHMENT" | "DEPTH_STENCIL_ATTACHMENT" | "COLOR_ATTACHMENT1" | "COLOR_ATTACHMENT2" | "COLOR_ATTACHMENT3" | "COLOR_ATTACHMENT4" | "COLOR_ATTACHMENT5" | "COLOR_ATTACHMENT6" | "COLOR_ATTACHMENT7" | "COLOR_ATTACHMENT8" | "COLOR_ATTACHMENT9" | "COLOR_ATTACHMENT10" diff --git a/src/index.ts b/src/index.ts index 955974cab9f51a7cf9dfa2de4971bf94a29ffb14..4257138d5db906aaedd1a2cfbcda66730c0db90b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,29 +1,51 @@ -export * from "./WebGL"; -export * from "./data/IBlitFramebuffer"; -export * from "./data/IBuffer"; -export * from "./data/ICapabilities"; -export * from "./data/ICopyBuffer"; -export * from "./data/IFramebuffer"; -export * from "./data/IIndexBuffer"; -export * from "./data/IPassDescriptor"; -export * from "./data/IPrimitiveState"; -export * from "./data/IQueryAction"; -export * from "./data/IRenderObject"; -export * from "./data/IRenderPass"; -export * from "./data/IRenderPipeline"; -export * from "./data/IRenderbuffer"; -export * from "./data/IRenderingContext"; -export * from "./data/ISampler"; -export * from "./data/ISamplerTexture"; -export * from "./data/ITexture"; -export * from "./data/ITransformFeedback"; -export * from "./data/IUniforms"; -export * from "./data/IVertexArrayObject"; -export * from "./data/IVertexAttribute"; -export * from "./data/IVertexAttributes"; +export * from "./data/IGLBlendState"; +export * from "./data/IGLBlitFramebuffer"; +export * from "./data/IGLBuffer"; +export * from "./data/IGLCapabilities"; +export * from "./data/IGLColorTargetState"; +export * from "./data/IGLCopyBuffer"; +export * from "./data/IGLCullFace"; +export * from "./data/IGLDepthStencilState"; +export * from "./data/IGLDrawArrays"; +export * from "./data/IGLDrawElements"; +export * from "./data/IGLFramebuffer"; +export * from "./data/IGLIndexBuffer"; +export * from "./data/IGLPassDescriptor"; +export * from "./data/IGLPrimitiveState"; +export * from "./data/IGLQueryAction"; +export * from "./data/IGLReadPixels"; +export * from "./data/IGLRenderbuffer"; +export * from "./data/IGLRenderingContext"; +export * from "./data/IGLRenderObject"; +export * from "./data/IGLRenderPass"; +export * from "./data/IGLRenderPassColorAttachment"; +export * from "./data/IGLRenderPassDepthStencilAttachment"; +export * from "./data/IGLRenderPipeline"; +export * from "./data/IGLSampler"; +export * from "./data/IGLSamplerTexture"; +export * from "./data/IGLScissor"; +export * from "./data/IGLTexture"; +export * from "./data/IGLTexturePixelStore"; +export * from "./data/IGLTextureStorage"; +export * from "./data/IGLTransformFeedback"; +export * from "./data/IGLUniforms"; +export * from "./data/IGLVertexArrayObject"; +export * from "./data/IGLVertexAttribute"; +export * from "./data/IGLVertexAttributes"; +export * from "./data/IGLViewport"; + +export * from "./runs/runColorTargetStates"; +export * from "./runs/runPassDescriptor"; + export * from "./gl/WebGLEnums"; -export * from "./runs/runUniforms"; + export * from "./shader/Macro"; export * from "./shader/ShaderLib"; export * from "./shader/ShaderMacroUtils"; +export * from "./WebGL"; + +export * from "./runs/runDrawCall"; + +export * as internal from "./internal"; + diff --git a/src/internal.ts b/src/internal.ts new file mode 100644 index 0000000000000000000000000000000000000000..c038fe1446a8ea8d7e747e1e8cec45775a797577 --- /dev/null +++ b/src/internal.ts @@ -0,0 +1,6 @@ +export { defaultGLSampler } from "./runs/runSampler"; + +export * from "./caches/getIGLTextureSize"; +export * from "./caches/getTexImageSourceSize"; +export * from "./caches/getTexture"; + diff --git a/src/runs/runBlitFramebuffer.ts b/src/runs/runBlitFramebuffer.ts index bb33fbd5e1fdd31e6b133506b72c1cee4cf5c0c7..ce8edfc8dd1e1d0d747a40ef0ca04c67e154556d 100644 --- a/src/runs/runBlitFramebuffer.ts +++ b/src/runs/runBlitFramebuffer.ts @@ -1,7 +1,7 @@ import { getFramebuffer } from "../caches/getFramebuffer"; -import { IBlitFramebuffer } from "../data/IBlitFramebuffer"; +import { IGLBlitFramebuffer } from "../data/IGLBlitFramebuffer"; -export function runBlitFramebuffer(gl: WebGLRenderingContext, blitFramebuffer: IBlitFramebuffer) +export function runBlitFramebuffer(gl: WebGLRenderingContext, blitFramebuffer: IGLBlitFramebuffer) { const { read, draw, blitFramebuffers } = blitFramebuffer; diff --git a/src/runs/runColorTargetStates.ts b/src/runs/runColorTargetStates.ts index 6fba44111e3e1fb7f3332cfc32cdd2ca4b5da6fe..0aaa0d2a63299ff9f7490a8aad1eac0db5c57940 100644 --- a/src/runs/runColorTargetStates.ts +++ b/src/runs/runColorTargetStates.ts @@ -1,7 +1,7 @@ -import { IBlendComponent, IBlendState } from "../data/IBlendState"; -import { IColorTargetState, IWriteMask } from "../data/IColorTargetState"; +import { IGLBlendComponent, IGLBlendState } from "../data/IGLBlendState"; +import { IGLColorTargetState, IGLWriteMask } from "../data/IGLColorTargetState"; -export function runColorTargetStates(gl: WebGLRenderingContext, targets?: IColorTargetState[]) +export function runColorTargetStates(gl: WebGLRenderingContext, targets?: IGLColorTargetState[]) { // const colorMask = targets?.[0]?.writeMask || defaultWriteMask; @@ -26,8 +26,8 @@ export function runColorTargetStates(gl: WebGLRenderingContext, targets?: IColor } } -const defaultWriteMask: IWriteMask = Object.freeze([true, true, true, true]) as any; -const defaultBlendComponent: IBlendComponent = Object.freeze({ operation: "FUNC_ADD", srcFactor: "SRC_ALPHA", dstFactor: "ONE_MINUS_SRC_ALPHA" }); -const defaultBlendState: IBlendState = Object.freeze({ color: defaultBlendComponent, alpha: defaultBlendComponent }); -const defaultColorTargetState: IColorTargetState = Object.freeze({ writeMask: defaultWriteMask, blend: defaultBlendState }); -export const defaultColorTargetStates: IColorTargetState[] = Object.freeze([defaultColorTargetState]) as any; \ No newline at end of file +const defaultWriteMask: IGLWriteMask = Object.freeze([true, true, true, true]) as any; +const defaultBlendComponent: IGLBlendComponent = Object.freeze({ operation: "FUNC_ADD", srcFactor: "SRC_ALPHA", dstFactor: "ONE_MINUS_SRC_ALPHA" }); +export const defaultBlendState: IGLBlendState = Object.freeze({ color: defaultBlendComponent, alpha: defaultBlendComponent }); +const defaultColorTargetState: IGLColorTargetState = Object.freeze({ writeMask: defaultWriteMask, blend: defaultBlendState }); +export const defaultColorTargetStates: IGLColorTargetState[] = Object.freeze([defaultColorTargetState]) as any; \ No newline at end of file diff --git a/src/runs/runCopyBuffer.ts b/src/runs/runCopyBuffer.ts index a8cdb95380c263929469359385811c0f326ad586..aa4c582c6941396fbaff6ca982ae0fbc5cd172f2 100644 --- a/src/runs/runCopyBuffer.ts +++ b/src/runs/runCopyBuffer.ts @@ -1,7 +1,7 @@ import { getWebGLBuffer } from "../caches/getWebGLBuffer"; -import { ICopyBuffer } from "../data/ICopyBuffer"; +import { IGLCopyBuffer } from "../data/IGLCopyBuffer"; -export function runCopyBuffer(gl: WebGLRenderingContext, copyBuffer: ICopyBuffer) +export function runCopyBuffer(gl: WebGLRenderingContext, copyBuffer: IGLCopyBuffer) { if (gl instanceof WebGL2RenderingContext) { diff --git a/src/runs/runDepthState.ts b/src/runs/runDepthState.ts index 3b48ef38c459c8a73d1ee0b4d9588ee6675f9618..0cf91f19011fc4b7dae108e40b44f41624243690 100644 --- a/src/runs/runDepthState.ts +++ b/src/runs/runDepthState.ts @@ -1,6 +1,6 @@ -import { IDepthState } from "../data/IDepthStencilState"; +import { IGLDepthState } from "../data/IGLDepthStencilState"; -export function runDepthState(gl: WebGLRenderingContext, depth: IDepthState) +export function runDepthState(gl: WebGLRenderingContext, depth: IGLDepthState) { const { depthtest, depthCompare, depthWriteEnabled, depthBias } = { ...defaultDepthState, ...depth }; @@ -30,5 +30,5 @@ export function runDepthState(gl: WebGLRenderingContext, depth: IDepthState) } } -export const defaultDepthState: IDepthState = { depthtest: false, depthWriteEnabled: true, depthCompare: "LESS" }; +export const defaultDepthState: IGLDepthState = { depthtest: false, depthWriteEnabled: true, depthCompare: "LESS" }; Object.freeze(defaultDepthState); \ No newline at end of file diff --git a/src/runs/runDepthStencilState.ts b/src/runs/runDepthStencilState.ts index 83fc653015c04daa0dac47c423d9c4a81b29e7d1..33f966971dfac797a3e1f77f5e3b4f1777621336 100644 --- a/src/runs/runDepthStencilState.ts +++ b/src/runs/runDepthStencilState.ts @@ -1,10 +1,10 @@ -import { IDepthStencilState } from "../data/IDepthStencilState"; +import { IGLDepthStencilState } from "../data/IGLDepthStencilState"; import { defaultDepthState, runDepthState } from "./runDepthState"; import { defaultStencilState, runStencilState } from "./runStencilState"; -export const defaultDepthStencilState: IDepthStencilState = Object.freeze({ depth: defaultDepthState, stencil: defaultStencilState }); +export const defaultDepthStencilState: IGLDepthStencilState = Object.freeze({ depth: defaultDepthState, stencil: defaultStencilState }); -export function runDepthStencilState(gl: WebGLRenderingContext, depthStencil?: IDepthStencilState) +export function runDepthStencilState(gl: WebGLRenderingContext, depthStencil?: IGLDepthStencilState) { runDepthState(gl, depthStencil?.depth || defaultDepthStencilState.depth); runStencilState(gl, depthStencil?.stencil || defaultDepthStencilState.stencil); diff --git a/src/runs/runDrawCall.ts b/src/runs/runDrawCall.ts index 3b481dd3d07f76b741d7cb3d7068a3ffe1d07335..61b0ab9708ff8a334bb207b0b2af1a93d534ea5e 100644 --- a/src/runs/runDrawCall.ts +++ b/src/runs/runDrawCall.ts @@ -1,14 +1,14 @@ -import { getWebGLBuffer } from "../caches/getWebGLBuffer"; +import { getBufferType } from "../caches/getWebGLBuffer"; import { ElementTypeMap } from "../const/WebGLUniformType"; -import { IDrawArrays } from "../data/IDrawArrays"; -import { IDrawElements } from "../data/IDrawElements"; -import { IIndexBuffer } from "../data/IIndexBuffer"; -import { IDrawMode } from "../data/IPrimitiveState"; -import { IRenderObject } from "../data/IRenderObject"; -import { IVertexAttributes } from "../data/IVertexAttributes"; +import { IGLDrawArrays } from "../data/IGLDrawArrays"; +import { IGLDrawElements } from "../data/IGLDrawElements"; +import { IGLIndexBuffer } from "../data/IGLIndexBuffer"; +import { IGLDrawMode } from "../data/IGLPrimitiveState"; +import { IGLRenderObject } from "../data/IGLRenderObject"; +import { IGLVertexAttributes } from "../data/IGLVertexAttributes"; import { defaultPrimitiveState } from "./runPrimitiveState"; -export function runDrawCall(gl: WebGLRenderingContext, renderObject: IRenderObject) +export function runDrawCall(gl: WebGLRenderingContext, renderObject: IGLRenderObject) { const { pipeline, vertexArray, drawElements, drawArrays } = renderObject; const { vertices, index } = { ...vertexArray }; @@ -33,14 +33,12 @@ export function runDrawCall(gl: WebGLRenderingContext, renderObject: IRenderObje } } -export const defaultDrawIndexed: IDrawElements = Object.freeze({ firstIndex: 0, instanceCount: 1 }); +export const defaultDrawIndexed: IGLDrawElements = Object.freeze({ firstIndex: 0, instanceCount: 1 }); -function _runDrawElements(gl: WebGLRenderingContext, drawMode: IDrawMode, index: IIndexBuffer, drawElements: IDrawElements) +function _runDrawElements(gl: WebGLRenderingContext, drawMode: IGLDrawMode, index: IGLIndexBuffer, drawElements: IGLDrawElements) { - // - const webGLBuffer = getWebGLBuffer(gl, index); - const type = webGLBuffer.data.bufferType; - const dataLength = webGLBuffer.data.length; + const type = getBufferType(index.data); + const dataLength = index.data.length; // let { indexCount, instanceCount, firstIndex } = drawElements || {}; firstIndex = firstIndex || defaultDrawIndexed.firstIndex; @@ -66,15 +64,15 @@ function _runDrawElements(gl: WebGLRenderingContext, drawMode: IDrawMode, index: } } -export const defaultDrawVertex: IDrawArrays = Object.freeze({ vertexCount: 6, instanceCount: 1, firstVertex: 0 }); +export const defaultDrawVertex: IGLDrawArrays = Object.freeze({ vertexCount: 6, instanceCount: 1, firstVertex: 0 }); -function _runDrawArrays(gl: WebGLRenderingContext, drawMode: IDrawMode, vertices: IVertexAttributes, drawArrays: IDrawArrays) +function _runDrawArrays(gl: WebGLRenderingContext, drawMode: IGLDrawMode, vertices: IGLVertexAttributes, drawArrays: IGLDrawArrays) { // let { firstVertex, vertexCount, instanceCount } = drawArrays || {}; // firstVertex = firstVertex || defaultDrawVertex.firstVertex; - vertexCount = vertexCount || getAttributeVertexNum(gl, vertices) || defaultDrawVertex.vertexCount; + vertexCount = vertexCount || getAttributeVertexNum(vertices) || defaultDrawVertex.vertexCount; instanceCount = instanceCount || defaultDrawVertex.instanceCount; if (instanceCount > 1) @@ -98,7 +96,7 @@ function _runDrawArrays(gl: WebGLRenderingContext, drawMode: IDrawMode, vertices /** * 获取属性顶点属性。 */ -function getAttributeVertexNum(gl: WebGLRenderingContext, vertices: IVertexAttributes) +export function getAttributeVertexNum(vertices: IGLVertexAttributes) { const vertexNum = ((vertices) => { @@ -106,9 +104,7 @@ function getAttributeVertexNum(gl: WebGLRenderingContext, vertices: IVertexAttri { if (vertices.hasOwnProperty(attr)) { - const buffer = getWebGLBuffer(gl, vertices[attr].buffer); - - return buffer.data.length; + return vertices[attr].buffer.data.length; } } diff --git a/src/runs/runFramebuffer.ts b/src/runs/runFramebuffer.ts index a7defe9bd23e46acd7eb9c1248d9c57a1791b3ff..177bc3a302ed5bdae4c578a76e2a1459713eb44d 100644 --- a/src/runs/runFramebuffer.ts +++ b/src/runs/runFramebuffer.ts @@ -1,10 +1,10 @@ import { getFramebuffer } from "../caches/getFramebuffer"; -import { IPassDescriptor } from "../data/IPassDescriptor"; +import { IGLRenderPassDescriptor } from "../data/IGLPassDescriptor"; /** * 运行帧缓冲区 */ -export function runFramebuffer(gl: WebGLRenderingContext, passDescriptor: IPassDescriptor) +export function runFramebuffer(gl: WebGLRenderingContext, passDescriptor: IGLRenderPassDescriptor) { const framebuffer = getFramebuffer(gl, passDescriptor); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); diff --git a/src/runs/runIndexBuffer.ts b/src/runs/runIndexBuffer.ts index f64eb198ee28311d2d3ef19a1722fbb4151f38fd..b50b9e474029436e50c0155f67b9ebac49fc638e 100644 --- a/src/runs/runIndexBuffer.ts +++ b/src/runs/runIndexBuffer.ts @@ -1,7 +1,7 @@ import { getWebGLBuffer } from "../caches/getWebGLBuffer"; -import { IIndexBuffer } from "../data/IIndexBuffer"; +import { IGLIndexBuffer } from "../data/IGLIndexBuffer"; -export function runIndexBuffer(gl: WebGLRenderingContext, index?: IIndexBuffer) +export function runIndexBuffer(gl: WebGLRenderingContext, index?: IGLIndexBuffer) { if (index) { @@ -10,5 +10,8 @@ export function runIndexBuffer(gl: WebGLRenderingContext, index?: IIndexBuffer) } } -export const defaultIndexBuffer: IIndexBuffer = { target: "ELEMENT_ARRAY_BUFFER", usage: "STATIC_DRAW", data: new Uint16Array([0, 1, 2, 2, 1, 3]) }; +export const defaultIndexBuffer: IGLIndexBuffer = { + target: "ELEMENT_ARRAY_BUFFER", usage: "STATIC_DRAW", + data: new Uint16Array([0, 1, 2, 2, 1, 3]) +}; Object.freeze(defaultIndexBuffer); diff --git a/src/runs/runPassDescriptor.ts b/src/runs/runPassDescriptor.ts index 2dc9bdda2f02693db9b7696011d552a6bcfb2339..1f558bb584f86463e9add6ef9d5083d40aa93111 100644 --- a/src/runs/runPassDescriptor.ts +++ b/src/runs/runPassDescriptor.ts @@ -1,12 +1,12 @@ -import { IRenderPassColorAttachment } from "../data/IRenderPassColorAttachment"; -import { IRenderPassDepthStencilAttachment } from "../data/IRenderPassDepthStencilAttachment"; -import { IPassDescriptor } from "../data/IPassDescriptor"; +import { IGLRenderPassColorAttachment } from "../data/IGLRenderPassColorAttachment"; +import { IGLRenderPassDepthStencilAttachment } from "../data/IGLRenderPassDepthStencilAttachment"; +import { IGLRenderPassDescriptor } from "../data/IGLPassDescriptor"; import { runFramebuffer } from "./runFramebuffer"; -const defaultRenderPassColorAttachment: IRenderPassColorAttachment = { clearValue: [0, 0, 0, 0], loadOp: "clear" }; -const defaultDepthStencilAttachment: IRenderPassDepthStencilAttachment = { depthClearValue: 1, depthLoadOp: "load", stencilClearValue: 0, stencilLoadOp: "load" }; +export const defaultRenderPassColorAttachment: IGLRenderPassColorAttachment = { clearValue: [0, 0, 0, 0], loadOp: "clear" }; +export const defaultDepthStencilAttachment: IGLRenderPassDepthStencilAttachment = { depthClearValue: 1, depthLoadOp: "load", stencilClearValue: 0, stencilLoadOp: "load" }; -export function runPassDescriptor(gl: WebGLRenderingContext, passDescriptor: IPassDescriptor) +export function runPassDescriptor(gl: WebGLRenderingContext, passDescriptor: IGLRenderPassDescriptor) { passDescriptor = passDescriptor || {}; diff --git a/src/runs/runPrimitiveState.ts b/src/runs/runPrimitiveState.ts index 43213dfa1823f7e6ec00d6b56189139638ac487b..43de6346f88a33b08034d853d4675243a9eab024 100644 --- a/src/runs/runPrimitiveState.ts +++ b/src/runs/runPrimitiveState.ts @@ -1,7 +1,7 @@ -import { ICullFace } from "../data/ICullFace"; -import { IPrimitiveState } from "../data/IPrimitiveState"; +import { IGLCullFace } from "../data/IGLCullFace"; +import { IGLPrimitiveState } from "../data/IGLPrimitiveState"; -export function runPrimitiveState(gl: WebGLRenderingContext, cullFace?: ICullFace) +export function runPrimitiveState(gl: WebGLRenderingContext, cullFace?: IGLCullFace) { // const { enableCullFace: enableCullMode, cullMode, frontFace } = { ...defaultCullFace, ...cullFace }; @@ -17,8 +17,8 @@ export function runPrimitiveState(gl: WebGLRenderingContext, cullFace?: ICullFac } } -const defaultCullFace: ICullFace = { enableCullFace: false, cullMode: "BACK", frontFace: "CCW" }; -export const defaultPrimitiveState: IPrimitiveState = { topology: "TRIANGLES", cullFace: defaultCullFace }; +const defaultCullFace: IGLCullFace = { enableCullFace: false, cullMode: "BACK", frontFace: "CCW" }; +export const defaultPrimitiveState: IGLPrimitiveState = { topology: "TRIANGLES", cullFace: defaultCullFace }; Object.freeze(defaultCullFace); Object.freeze(defaultPrimitiveState); \ No newline at end of file diff --git a/src/runs/runProgram.ts b/src/runs/runProgram.ts index c4ec08839c4777edaa6003eccef6925858a99a69..0c0e9ff8416cc04f1ef15575d1b84e091a57b92f 100644 --- a/src/runs/runProgram.ts +++ b/src/runs/runProgram.ts @@ -1,8 +1,8 @@ import { getProgram } from "../caches/getProgram"; -import { IFragmentState, IRenderPipeline, IVertexState } from "../data/IRenderPipeline"; +import { IFragmentState, IGLRenderPipeline, IVertexState } from "../data/IGLRenderPipeline"; import { defaultColorTargetStates, runColorTargetStates } from "./runColorTargetStates"; -export function runProgram(gl: WebGLRenderingContext, pipeline: IRenderPipeline) +export function runProgram(gl: WebGLRenderingContext, pipeline: IGLRenderPipeline) { const program = getProgram(gl, pipeline); gl.useProgram(program); diff --git a/src/runs/runQueryAction.ts b/src/runs/runQueryAction.ts index 1cd5553131fde169b2fb10750c63f0f63df1d758..da8693da4a45c023c48d6a243d1def9f81ae4359 100644 --- a/src/runs/runQueryAction.ts +++ b/src/runs/runQueryAction.ts @@ -1,7 +1,7 @@ import { deleteWebGLQuery, getWebGLQuery } from "../caches/getWebGLQuery"; -import { IQuery, IQueryAction } from "../data/IQueryAction"; +import { IGLQuery, IGLQueryAction } from "../data/IGLQueryAction"; -export function runQueryAction(gl: WebGLRenderingContext, queryAction: IQueryAction) +export function runQueryAction(gl: WebGLRenderingContext, queryAction: IGLQueryAction) { if (gl instanceof WebGL2RenderingContext) { @@ -21,7 +21,7 @@ export function runQueryAction(gl: WebGLRenderingContext, queryAction: IQueryAct /** * 获取查询结果。 */ -export async function getQueryResult(gl: WebGLRenderingContext, query: IQuery) +export async function getQueryResult(gl: WebGLRenderingContext, query: IGLQuery) { if (query.result !== undefined) return query.result; diff --git a/src/runs/runReadPixels.ts b/src/runs/runReadPixels.ts index b20847adffdb6773d9cc4289287ae0644158e32a..213fab69346d575f18b0f3c2dd2cb6002201efb0 100644 --- a/src/runs/runReadPixels.ts +++ b/src/runs/runReadPixels.ts @@ -1,13 +1,13 @@ import { getFramebuffer } from "../caches/getFramebuffer"; -import { IReadPixels } from "../data/IReadPixels"; +import { IGLReadPixels } from "../data/IGLReadPixels"; -export function runReadPixels(gl: WebGLRenderingContext, readPixels: IReadPixels) +export function runReadPixels(gl: WebGLRenderingContext, readPixels: IGLReadPixels) { if (gl instanceof WebGL2RenderingContext) { const { frameBuffer, attachmentPoint, x, y, width, height, format, type, dstData, dstOffset } = readPixels; - const webGLFramebuffer = getFramebuffer(gl, readPixels.frameBuffer); + const webGLFramebuffer = getFramebuffer(gl, frameBuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, webGLFramebuffer); gl.readBuffer(gl[attachmentPoint]); diff --git a/src/runs/runRenderObject.ts b/src/runs/runRenderObject.ts index 7674d19184aac4408b421c59f101dbc35ea00535..5eaa8763b251ac39d5e9d6bda166676f8d617d47 100644 --- a/src/runs/runRenderObject.ts +++ b/src/runs/runRenderObject.ts @@ -1,4 +1,4 @@ -import { IRenderObject } from "../data/IRenderObject"; +import { IGLRenderObject } from "../data/IGLRenderObject"; import { runDrawCall } from "./runDrawCall"; import { defaultPrimitiveState } from "./runPrimitiveState"; import { runRenderPipeline } from "./runRenderPipeline"; @@ -8,7 +8,7 @@ import { runUniforms } from "./runUniforms"; import { runVertexArray } from "./runVertexArray"; import { runViewPort } from "./runViewPort"; -export function runRenderObject(gl: WebGLRenderingContext, renderObject: IRenderObject) +export function runRenderObject(gl: WebGLRenderingContext, renderObject: IGLRenderObject) { const { viewport, scissor, pipeline, vertexArray, uniforms, transformFeedback } = renderObject; diff --git a/src/runs/runRenderPass.ts b/src/runs/runRenderPass.ts index 06938e0076b29516f104641a4142fcf5b962905b..561e295ca9991390e07fbd1d20f68d47c6549c72 100644 --- a/src/runs/runRenderPass.ts +++ b/src/runs/runRenderPass.ts @@ -1,11 +1,11 @@ -import { IRenderPass } from "../data/IRenderPass"; +import { IGLRenderPass } from "../data/IGLRenderPass"; import { runPassDescriptor } from "./runPassDescriptor"; import { runQueryAction } from "./runQueryAction"; import { runRenderObject } from "./runRenderObject"; -export function runRenderPass(gl: WebGLRenderingContext, renderPass: IRenderPass) +export function runRenderPass(gl: WebGLRenderingContext, renderPass: IGLRenderPass) { - runPassDescriptor(gl, renderPass.passDescriptor); + runPassDescriptor(gl, renderPass.descriptor); renderPass.renderObjects?.forEach((renderObject) => { diff --git a/src/runs/runRenderPipeline.ts b/src/runs/runRenderPipeline.ts index 7d00e05b78d4522ef5a89f5ebffb862077d90c49..0d09f7786d51802140c01522aa3bf83c156fc2a7 100644 --- a/src/runs/runRenderPipeline.ts +++ b/src/runs/runRenderPipeline.ts @@ -1,9 +1,9 @@ -import { IRenderPipeline } from "../data/IRenderPipeline"; +import { IGLRenderPipeline } from "../data/IGLRenderPipeline"; import { defaultDepthStencilState, runDepthStencilState } from "./runDepthStencilState"; import { defaultPrimitiveState, runPrimitiveState } from "./runPrimitiveState"; import { defaultFragmentState, defaultVertexState, runProgram } from "./runProgram"; -export function runRenderPipeline(gl: WebGLRenderingContext, renderPipeline: IRenderPipeline) +export function runRenderPipeline(gl: WebGLRenderingContext, renderPipeline: IGLRenderPipeline) { runProgram(gl, renderPipeline); @@ -12,7 +12,7 @@ export function runRenderPipeline(gl: WebGLRenderingContext, renderPipeline: IRe runDepthStencilState(gl, renderPipeline.depthStencil); } -export const defaultRenderPipeline: IRenderPipeline = Object.freeze({ +export const defaultRenderPipeline: IGLRenderPipeline = Object.freeze({ vertex: defaultVertexState, fragment: defaultFragmentState, primitive: defaultPrimitiveState, depthStencil: defaultDepthStencilState }); \ No newline at end of file diff --git a/src/runs/runSampler.ts b/src/runs/runSampler.ts index b900ea8b0a7c1d4724964937f2852bf90253f5ad..786bd4389a1e9edf261ab3a67f42dacd0e517a28 100644 --- a/src/runs/runSampler.ts +++ b/src/runs/runSampler.ts @@ -1,22 +1,22 @@ import { getSampler } from "../caches/getSampler"; -import { ISampler, TextureMagFilter, TextureMinFilter, TextureWrap } from "../data/ISampler"; +import { IGLSampler, TextureMagFilter, GLTextureMinFilter, GLTextureWrap } from "../data/IGLSampler"; declare global { interface WebGLTexture { - minFilter?: TextureMinFilter, + minFilter?: GLTextureMinFilter, magFilter?: TextureMagFilter, - wrapS?: TextureWrap, - wrapT?: TextureWrap, - wrapR?: TextureWrap, + wrapS?: GLTextureWrap, + wrapT?: GLTextureWrap, + wrapR?: GLTextureWrap, anisotropy?: number, lodMinClamp?: number; lodMaxClamp?: number; } } -export const defaultSampler: ISampler = { +export const defaultGLSampler: IGLSampler = { minFilter: "LINEAR_MIPMAP_LINEAR", magFilter: "LINEAR", wrapS: "REPEAT", wrapT: "REPEAT", wrapR: "REPEAT", lodMinClamp: 0, lodMaxClamp: 16, @@ -28,7 +28,7 @@ export const defaultSampler: ISampler = { /** * 设置采样参数 */ -export function runSampler(gl: WebGLRenderingContext, webGLTexture: WebGLTexture, sampler: ISampler, textureID: number) +export function runSampler(gl: WebGLRenderingContext, webGLTexture: WebGLTexture, sampler: IGLSampler, textureID: number) { const textureTarget = webGLTexture.textureTarget; @@ -39,7 +39,7 @@ export function runSampler(gl: WebGLRenderingContext, webGLTexture: WebGLTexture } else { - const { minFilter, magFilter, wrapS, wrapT } = { ...defaultSampler, ...sampler }; + const { minFilter, magFilter, wrapS, wrapT } = { ...defaultGLSampler, ...sampler }; // 设置纹理参数 if (webGLTexture.minFilter !== minFilter) @@ -65,7 +65,7 @@ export function runSampler(gl: WebGLRenderingContext, webGLTexture: WebGLTexture } // - const anisotropy = sampler?.anisotropy || defaultSampler.anisotropy; + const anisotropy = sampler?.anisotropy || defaultGLSampler.anisotropy; if (webGLTexture.anisotropy !== anisotropy) { const extension = gl.getExtension("EXT_texture_filter_anisotropic"); diff --git a/src/runs/runScissor.ts b/src/runs/runScissor.ts index 3bee239423b69b51c5c5eeb311e77955425abdaf..f39703dcb72bae5b6b433298ce2c9de81ee08ebd 100644 --- a/src/runs/runScissor.ts +++ b/src/runs/runScissor.ts @@ -1,6 +1,6 @@ -import { IScissor } from "../data/IScissor"; +import { IGLScissor } from "../data/IGLScissor"; -export function runScissor(gl: WebGLRenderingContext, scissor?: IScissor) +export function runScissor(gl: WebGLRenderingContext, scissor?: IGLScissor) { if (scissor) { diff --git a/src/runs/runStencilState.ts b/src/runs/runStencilState.ts index b81c11057d59cd60242d93b7e78c56b5070609bd..a570907611ac2452513311fa85b437bcb43c149b 100644 --- a/src/runs/runStencilState.ts +++ b/src/runs/runStencilState.ts @@ -1,9 +1,9 @@ -import { IStencilFaceState, IStencilState } from "../data/IDepthStencilState"; +import { IStencilFaceState, IGLStencilState } from "../data/IGLDepthStencilState"; const defaultStencilFaceState: IStencilFaceState = { stencilFunc: "ALWAYS", stencilFuncRef: 0, stencilFuncMask: 0b11111111, stencilOpFail: "KEEP", stencilOpZFail: "KEEP", stencilOpZPass: "KEEP", stencilMask: 0b11111111 }; -export const defaultStencilState: IStencilState = { useStencil: false, stencilFront: defaultStencilFaceState, stencilBack: defaultStencilFaceState }; +export const defaultStencilState: IGLStencilState = { useStencil: false, stencilFront: defaultStencilFaceState, stencilBack: defaultStencilFaceState }; -export function runStencilState(gl: WebGLRenderingContext, stencil: IStencilState) +export function runStencilState(gl: WebGLRenderingContext, stencil: IGLStencilState) { // const { diff --git a/src/runs/runTexture.ts b/src/runs/runTexture.ts index 69296efcb5b808a305c8558aeeee7a86bd4d8876..a1b10012cf401a919442277ec6db540a6b83163f 100644 --- a/src/runs/runTexture.ts +++ b/src/runs/runTexture.ts @@ -1,20 +1,20 @@ import { getTexture } from "../caches/getTexture"; -import { ISamplerTexture } from "../data/ISamplerTexture"; -import { IBufferSource, IImageSource, ITexture, ITexturePixelStore, ITextureSource } from "../data/ITexture"; -import { IUniformItemInfo } from "../data/IUniformInfo"; +import { IGLSamplerTexture } from "../data/IGLSamplerTexture"; +import { IGLBufferSource, IGLImageSource, IGLTexture, IGLTextureSource } from "../data/IGLTexture"; +import { IUniformItemInfo } from "../data/IGLUniformInfo"; import { runSampler } from "./runSampler"; -export const defaultImageSource: IImageSource = { level: 0, source: new ImageData(1, 1) }; -export const defaultBufferSource: IBufferSource = { level: 0, width: 1, height: 1, depth: 1, border: 0 }; -export const defaultTextureSources: ITextureSource[] = [defaultBufferSource]; -export const defaultTexture: ITexture = { target: "TEXTURE_2D", generateMipmap: false, internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE" }; +export const defaultImageSource: IGLImageSource = { level: 0, source: new ImageData(1, 1) }; +export const defaultBufferSource: IGLBufferSource = { level: 0, width: 1, height: 1, depth: 1, border: 0 }; +export const defaultTextureSources: IGLTextureSource[] = [defaultBufferSource]; +export const defaultTexture: IGLTexture = { target: "TEXTURE_2D", generateMipmap: false, internalformat: "RGBA", format: "RGBA", type: "UNSIGNED_BYTE" }; Object.freeze(defaultImageSource); Object.freeze(defaultBufferSource); Object.freeze(defaultTextureSources); Object.freeze(defaultTexture); -export function runSamplerTexture(gl: WebGLRenderingContext, uniformInfo: IUniformItemInfo, samplerTexture: ISamplerTexture) +export function runSamplerTexture(gl: WebGLRenderingContext, uniformInfo: IUniformItemInfo, samplerTexture: IGLSamplerTexture) { const { texture, sampler } = samplerTexture; const { location, textureID } = uniformInfo; diff --git a/src/runs/runTransformFeedback.ts b/src/runs/runTransformFeedback.ts index 35c01463d13fdd03a2825ac7dcc1ee57f6ae9ae4..9b5397219520677b2ef1773177d3fd9c9cf8aead 100644 --- a/src/runs/runTransformFeedback.ts +++ b/src/runs/runTransformFeedback.ts @@ -1,8 +1,8 @@ import { getWebGLTransformFeedback } from "../caches/getWebGLTransformFeedback"; -import { IDrawMode } from "../data/IPrimitiveState"; -import { ITransformFeedback } from "../data/ITransformFeedback"; +import { IGLDrawMode } from "../data/IGLPrimitiveState"; +import { IGLTransformFeedback } from "../data/IGLTransformFeedback"; -export function runTransformFeedback(gl: WebGLRenderingContext, transformFeedback: ITransformFeedback, topology: IDrawMode) +export function runTransformFeedback(gl: WebGLRenderingContext, transformFeedback: IGLTransformFeedback, topology: IGLDrawMode) { if (gl instanceof WebGL2RenderingContext) { @@ -25,7 +25,7 @@ export function runTransformFeedback(gl: WebGLRenderingContext, transformFeedbac } } -export function endTransformFeedback(gl: WebGLRenderingContext, transformFeedback: ITransformFeedback) +export function endTransformFeedback(gl: WebGLRenderingContext, transformFeedback: IGLTransformFeedback) { // if (transformFeedback) diff --git a/src/runs/runUniforms.ts b/src/runs/runUniforms.ts index 4cdb1636ca8a9e8068fc6282c5fa57dedc101740..c8852ed14a3aa56dfdd613893cb615f9cb04e311 100644 --- a/src/runs/runUniforms.ts +++ b/src/runs/runUniforms.ts @@ -1,18 +1,18 @@ import { getWebGLBuffer } from "../caches/getWebGLBuffer"; import { getProgram } from "../caches/getProgram"; -import { IWebGLUniformBufferType } from "../const/WebGLUniformType"; -import { IBuffer } from "../data/IBuffer"; -import { IRenderPipeline } from "../data/IRenderPipeline"; -import { ISamplerTexture } from "../data/ISamplerTexture"; -import { IUniformItemInfo } from "../data/IUniformInfo"; -import { IUniforms } from "../data/IUniforms"; +import { IGLUniformBufferType } from "../const/WebGLUniformType"; +import { IGLBuffer } from "../data/IGLBuffer"; +import { IGLRenderPipeline } from "../data/IGLRenderPipeline"; +import { IGLSamplerTexture } from "../data/IGLSamplerTexture"; +import { IUniformItemInfo } from "../data/IGLUniformInfo"; +import { IGLUniforms } from "../data/IGLUniforms"; import { LazyObject, lazy } from "../types"; import { runSamplerTexture } from "./runTexture"; /** * 激活常量 */ -export function runUniforms(gl: WebGLRenderingContext, pipeline: IRenderPipeline, uniforms: LazyObject) +export function runUniforms(gl: WebGLRenderingContext, pipeline: IGLRenderPipeline, uniforms: LazyObject) { const webGLProgram = getProgram(gl, pipeline); @@ -37,11 +37,11 @@ export function runUniforms(gl: WebGLRenderingContext, pipeline: IRenderPipeline if (isTexture) { - runSamplerTexture(gl, v, uniformData as ISamplerTexture); + runSamplerTexture(gl, v, uniformData as IGLSamplerTexture); } else { - runUniform(gl, type as IWebGLUniformBufferType, v, uniformData); + runUniform(gl, type as IGLUniformBufferType, v, uniformData); } }); }); @@ -54,7 +54,7 @@ export function runUniforms(gl: WebGLRenderingContext, pipeline: IRenderPipeline const uniformData = lazy.getValue(uniforms[name], uniforms); // - const webGLBuffer = getWebGLBuffer(gl, uniformData as IBuffer); + const webGLBuffer = getWebGLBuffer(gl, uniformData as IGLBuffer); gl.bindBufferBase(gl.UNIFORM_BUFFER, index, webGLBuffer); }); } @@ -63,7 +63,7 @@ export function runUniforms(gl: WebGLRenderingContext, pipeline: IRenderPipeline /** * 设置环境Uniform数据 */ -function runUniform(gl: WebGLRenderingContext, type: IWebGLUniformBufferType, uniformInfo: IUniformItemInfo, data: any) +function runUniform(gl: WebGLRenderingContext, type: IGLUniformBufferType, uniformInfo: IUniformItemInfo, data: any) { const location = uniformInfo.location; switch (type) diff --git a/src/runs/runVertexArray.ts b/src/runs/runVertexArray.ts index 0ab6f81a3ac22da748988ff345dfea6a6837348b..49e076341f62355bc7a8046f9d7480aad562f572 100644 --- a/src/runs/runVertexArray.ts +++ b/src/runs/runVertexArray.ts @@ -1,6 +1,6 @@ import { getProgram } from "../caches/getProgram"; -import { IRenderPipeline } from "../data/IRenderPipeline"; -import { IVertexArrayObject } from "../data/IVertexArrayObject"; +import { IGLRenderPipeline } from "../data/IGLRenderPipeline"; +import { IGLVertexArrayObject } from "../data/IGLVertexArrayObject"; import { runIndexBuffer } from "./runIndexBuffer"; import { runVertexAttribute } from "./runVertexAttribute"; @@ -8,14 +8,14 @@ declare global { interface WebGLRenderingContext { - _vertexArrays: Map; + _vertexArrays: Map; } } /** * 执行设置或者上传渲染对象的顶点以及索引数据。 */ -export function runVertexArray(gl: WebGLRenderingContext, pipeline: IRenderPipeline, vertexArray: IVertexArrayObject) +export function runVertexArray(gl: WebGLRenderingContext, pipeline: IGLRenderPipeline, vertexArray: IGLVertexArrayObject) { if (!vertexArray) return; @@ -59,7 +59,7 @@ export function runVertexArray(gl: WebGLRenderingContext, pipeline: IRenderPipel runIndexBuffer(gl, index); } -export function deleteVertexArray(gl: WebGLRenderingContext, vertexArray: IVertexArrayObject) +export function deleteVertexArray(gl: WebGLRenderingContext, vertexArray: IGLVertexArrayObject) { if (gl instanceof WebGL2RenderingContext) { diff --git a/src/runs/runVertexAttribute.ts b/src/runs/runVertexAttribute.ts index 3a101a2849a782697173d6bcbb2a64362bdbee63..53ee6f061134fc45424c61dd4737129064c5c2cc 100644 --- a/src/runs/runVertexAttribute.ts +++ b/src/runs/runVertexAttribute.ts @@ -1,7 +1,7 @@ -import { getWebGLBuffer } from "../caches/getWebGLBuffer"; -import { IVertexAttribute } from "../data/IVertexAttribute"; +import { getBufferType, getWebGLBuffer } from "../caches/getWebGLBuffer"; +import { IGLVertexAttribute } from "../data/IGLVertexAttribute"; -export function runVertexAttribute(gl: WebGLRenderingContext, location: number, attribute: IVertexAttribute) +export function runVertexAttribute(gl: WebGLRenderingContext, location: number, attribute: IGLVertexAttribute) { const { numComponents, normalized, divisor } = attribute; let { vertexSize, offset } = attribute; @@ -22,16 +22,14 @@ export function runVertexAttribute(gl: WebGLRenderingContext, location: number, } // - const webGLBuffer = getWebGLBuffer(gl, attribute.buffer); - - // - const type = attribute.type || webGLBuffer.data?.bufferType || "FLOAT"; + const type = attribute.type || getBufferType(attribute.buffer.data) || "FLOAT"; // vertexSize = vertexSize || 0; offset = offset || 0; // + const webGLBuffer = getWebGLBuffer(gl, attribute.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, webGLBuffer); // diff --git a/src/runs/runViewPort.ts b/src/runs/runViewPort.ts index 344cfccec4c0524d695b040a92fa9786c52b5899..1c1d6f97c9a3ecb325d1af250b7a4988d384452f 100644 --- a/src/runs/runViewPort.ts +++ b/src/runs/runViewPort.ts @@ -1,6 +1,6 @@ -import { IViewport } from "../data/IViewport"; +import { IGLViewport } from "../data/IGLViewport"; -export function runViewPort(gl: WebGLRenderingContext, viewport?: IViewport) +export function runViewPort(gl: WebGLRenderingContext, viewport?: IGLViewport) { if (viewport) { diff --git a/typedoc.json b/typedoc.json index ff3f46844582d4b687ca63250cc6609b00717b71..1b7c73d078c711d369752174a3eb203fee7fe662 100644 --- a/typedoc.json +++ b/typedoc.json @@ -4,6 +4,6 @@ "entryPoints": [ "src/index.ts" ], - "sourceLinkTemplate": "https://gitlab.com/feng3d/webgl-renderer/tree/master/{path}#L{line}", + "sourceLinkTemplate": "https://gitee.com/feng3d/webgl-renderer/tree/master/{path}#L{line}", "out": "public/docs" } \ No newline at end of file