2b:null 2c:["$","title",null,{"children":"Device API Examples | AntV | Observable"}] 31:T56e,This project aims to provide a unified set of APIs hiding the details of WebGL 1/2 & WebGPU underneath. * [API Reference](https://www.npmjs.com/package/@antv/g-device-api?activeTab=readme#api) * [Shader Language](https://www.npmjs.com/package/@antv/g-device-api?activeTab=readme#shader-language) * Examples * [Primitive Topology Points](#cell-44) It shows how to create program, buffer and other common GPU resources with Device API. * [Primitive Topology Triangles](#cell-73) * [Draw Index](#cell-337) Shows how to drawIndex. * [MSAA](#cell-256) Multisampled antialiasing. * [Resizing Canvas](#cell-267) Shows how to resize the canvas. * [Rotating Cube](#cell-78) Shows how to use UniformBuffer. * [Two Cubes](#cell-315) Shows how to reuse the same UniformBuffer but with different offsets. * [Textured Cube](#cell-93) Shows how to use Texture. * [Multiple Textures](#cell-417) Shows how to use multiple Textures. * [Cubemap](#cell-153) Shows how to use Cubemap. * [Instanced Cubes](#cell-122) Shows how to draw multiple instances. * [Stencil](#cell-347) Shows how to use stencil buffer. * [Multiple Render Targets](#cell-368) MRT is a commonly used extension for deferred rendering, OIT, single-pass picking, etc. * [Float Texture](#cell-372) Allow floating-point pixel types for textures. * [Compute Boids](#cell-115) Shows how to use WebGPU Compute Shader.32:Ta17,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = ${Number.parseFloat(gl_PointSize).toFixed(1)}; } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(1.0, 0.0, 0.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, topology: PrimitiveTopology.POINTS, colorAttachmentFormats: [Format.U8_RGBA_RT] }); const renderTarget = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()33:Ta23,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(1.0, 0.0, 0.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT] }); const renderTarget = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); device.setResourceName(renderTarget, "Main Render Target"); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()34:Tb16,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(1.0, 0.0, 0.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const indexBuffer = device.createBuffer({ viewOrSize: new Uint32Array([0, 1, 2]), usage: BufferUsage.INDEX, hint: BufferFrequencyHint.STATIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: Format.U32_R, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT] }); const renderTarget = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); device.setResourceName(renderTarget, "Main Render Target"); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], { buffer: indexBuffer, offset: 0 } ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); indexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()35:T9f1,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(1.0, 0.0, 0.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], sampleCount: 4 }); const renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, sampleCount: 4 }); device.setResourceName(renderTarget, "Main Render Target"); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()36:Tcd5,(async () => { const $canvas = createCanvas(); $canvas.classList.add("animatedCanvasSize"); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(1.0, 0.0, 0.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], sampleCount: 4 }); let renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, sampleCount: 4 }); device.setResourceName(renderTarget, "Main Render Target"); let id; const frame = () => { const currentWidth = $canvas.clientWidth * devicePixelRatio; const currentHeight = $canvas.clientHeight * devicePixelRatio; $canvas.width = currentWidth; $canvas.height = currentHeight; swapChain.configureSwapChain($canvas.width, $canvas.height); if (renderTarget) { renderTarget.destroy(); renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, sampleCount: 4 }); } const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()37:T580,Uniform is very widely used while WebGL1/2 & WebGPU provide different usages. We adopts WebGL2 & WebGPU's usage in our implementation, and for WebGL1 you need to call an ugly method additionally. Let's see the shader syntax first: ```glsl layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; ``` Then an uniform buffer needs to be created, here we want to use `mat4`: ```ts const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC, }); ``` Bindings shows how we use UniformBuffer & Samplers: ```ts const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, // fixed to 0 buffer: uniformBuffer, size: 16 * 4, // in bytes }, ], }); ``` RenderPass will consume Bindings on each frame: ```ts renderPass.setBindings(bindings); ``` When uniform buffer needs to get changed, [setSubData](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#setSubData) should be called: ```ts uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer), ); ``` But really sadly as we already talked about, accounts for WebGL1, [setUniformsLegacy]() must be called unless you just want to support WebGL2 & WebGPU: ```ts program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix, }); ```38:T159f,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec3 a_Position; out vec4 v_Position; void main() { v_Position = vec4(a_Position, 1.0); gl_Position = u_ModelViewProjectionMatrix * vec4(a_Position, 1.0); } ` }, fragment: { glsl: ` in vec4 v_Position; out vec4 outputColor; void main() { outputColor = v_Position; } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RGB } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 16 * 4 } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); let id; const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 0.1, 1000 ); const viewMatrix = mat4.identity(mat4.create()); const modelViewProjectionMatrix = mat4.create(); mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4)); const now = Date.now() / 1000; mat4.rotate( viewMatrix, viewMatrix, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0) ); mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer) ); // WebGL1 need this program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix }); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.draw(cubeVertexCount); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()39:T1aab,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount, cubeUVOffset, cubePositionOffset } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec4 a_Position; out vec4 v_Position; void main() { v_Position = 0.5 * (a_Position + vec4(1.0, 1.0, 1.0, 1.0)); gl_Position = u_ModelViewProjectionMatrix * a_Position; } ` }, fragment: { glsl: ` in vec4 v_Position; out vec4 outputColor; void main() { outputColor = v_Position; } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const matrixSize = 4 * 16; // 4x4 matrix const offset = 256; // uniformBindGroup offset must be 256-byte aligned const uniformBufferSize = offset + matrixSize; const uniformBuffer = device.createBuffer({ viewOrSize: uniformBufferSize, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: cubePositionOffset, format: Format.F32_RGBA } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false } }); const bindings1 = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, offset: 0, size: matrixSize } ] }); const bindings2 = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, offset, size: matrixSize } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const modelMatrix1 = mat4.fromTranslation( mat4.create(), vec3.fromValues(-2, 0, 0) ); const modelMatrix2 = mat4.fromTranslation( mat4.create(), vec3.fromValues(2, 0, 0) ); const modelViewProjectionMatrix1 = mat4.create(); const modelViewProjectionMatrix2 = mat4.create(); const viewMatrix = mat4.fromTranslation( mat4.create(), vec3.fromValues(0, 0, -7) ); const tmpMat41 = mat4.create(); const tmpMat42 = mat4.create(); let id; const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 1, 100 ); const now = Date.now() / 1000; mat4.rotate( tmpMat41, modelMatrix1, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0) ); mat4.rotate( tmpMat42, modelMatrix2, 1, vec3.fromValues(Math.cos(now), Math.sin(now), 0) ); mat4.multiply(modelViewProjectionMatrix1, viewMatrix, tmpMat41); mat4.multiply( modelViewProjectionMatrix1, projectionMatrix, modelViewProjectionMatrix1 ); mat4.multiply(modelViewProjectionMatrix2, viewMatrix, tmpMat42); mat4.multiply( modelViewProjectionMatrix2, projectionMatrix, modelViewProjectionMatrix2 ); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix1.buffer) ); uniformBuffer.setSubData( offset, new Uint8Array(modelViewProjectionMatrix2.buffer) ); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings1); renderPass.draw(cubeVertexCount); renderPass.setBindings(bindings2); renderPass.draw(cubeVertexCount); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings1.destroy(); bindings2.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3a:T197f,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction, AddressMode, FilterMode, MipmapFilterMode } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount, cubeUVOffset, cubePositionOffset } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec4 a_Position; layout(location = 1) in vec2 a_Uv; out vec2 v_Uv; void main() { v_Uv = a_Uv; gl_Position = u_ModelViewProjectionMatrix * a_Position; } ` }, fragment: { glsl: ` uniform sampler2D u_Texture; in vec2 v_Uv; out vec4 outputColor; void main() { outputColor = texture(SAMPLER_2D(u_Texture), v_Uv); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const imageBitmap = await loadImage(); const texture = device.createTexture({ format: Format.U8_RGBA_NORM, width: imageBitmap.width, height: imageBitmap.height, usage: TextureUsage.SAMPLED }); texture.setImageData([imageBitmap]); const sampler = device.createSampler({ addressModeU: AddressMode.CLAMP_TO_EDGE, addressModeV: AddressMode.CLAMP_TO_EDGE, minFilter: FilterMode.POINT, magFilter: FilterMode.BILINEAR, mipmapFilter: MipmapFilterMode.LINEAR, lodMinClamp: 0, lodMaxClamp: 0 }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: cubePositionOffset, format: Format.F32_RGBA }, { shaderLocation: 1, offset: cubeUVOffset, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 16 * 4 } ], samplerBindings: [ { texture, sampler } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); let id; const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 0.1, 1000 ); const viewMatrix = mat4.identity(mat4.create()); const modelViewProjectionMatrix = mat4.create(); mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4)); const now = Date.now() / 1000; mat4.rotate( viewMatrix, viewMatrix, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0) ); mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer) ); // WebGL1 need this program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix, u_Texture: texture }); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.draw(cubeVertexCount); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); texture.destroy(); sampler.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3b:T1b2a,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction, AddressMode, FilterMode, MipmapFilterMode } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount, cubeUVOffset, cubePositionOffset } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec4 a_Position; layout(location = 1) in vec2 a_Uv; out vec2 v_Uv; void main() { v_Uv = a_Uv; gl_Position = u_ModelViewProjectionMatrix * a_Position; } ` }, fragment: { glsl: ` uniform sampler2D u_Texture; uniform sampler2D u_Texture2; in vec2 v_Uv; out vec4 outputColor; void main() { outputColor = mix(texture(SAMPLER_2D(u_Texture), v_Uv), texture(SAMPLER_2D(u_Texture2), v_Uv), 0.5); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const imageBitmap = await loadImage(); const texture = device.createTexture({ format: Format.U8_RGBA_NORM, width: imageBitmap.width, height: imageBitmap.height, usage: TextureUsage.SAMPLED }); texture.setImageData([imageBitmap]); const imageBitmap2 = await loadImage1(); const texture2 = device.createTexture({ format: Format.U8_RGBA_NORM, width: imageBitmap2.width, height: imageBitmap2.height, usage: TextureUsage.SAMPLED }); texture2.setImageData([imageBitmap2]); const sampler = device.createSampler({ addressModeU: AddressMode.CLAMP_TO_EDGE, addressModeV: AddressMode.CLAMP_TO_EDGE, minFilter: FilterMode.POINT, magFilter: FilterMode.BILINEAR, mipmapFilter: MipmapFilterMode.LINEAR, lodMinClamp: 0, lodMaxClamp: 0 }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: cubePositionOffset, format: Format.F32_RGBA }, { shaderLocation: 1, offset: cubeUVOffset, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 16 * 4 } ], samplerBindings: [ { texture, sampler }, { texture: texture2, sampler } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); let id; const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 0.1, 1000 ); const viewMatrix = mat4.identity(mat4.create()); const modelViewProjectionMatrix = mat4.create(); mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4)); const now = Date.now() / 1000; mat4.rotate( viewMatrix, viewMatrix, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0) ); mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer) ); // WebGL1 need this program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix, u_Texture: texture, u_Texture2: texture2 }); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.draw(cubeVertexCount); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); texture.destroy(); sampler.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3c:T1ceb,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { VertexStepMode, Format, TransparentWhite, BufferUsage, BufferFrequencyHint, BlendMode, BlendFactor, TextureUsage, CullMode, ChannelWriteMask, TransparentBlack, CompareFunction, AddressMode, FilterMode, MipmapFilterMode, TextureDimension } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount, cubeUVOffset, cubePositionOffset } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec4 a_Position; layout(location = 1) in vec2 a_Uv; out vec2 v_Uv; out vec4 v_Position; void main() { v_Uv = a_Uv; v_Position = 0.5 * (a_Position + vec4(1.0, 1.0, 1.0, 1.0)); gl_Position = u_ModelViewProjectionMatrix * a_Position; } ` }, fragment: { glsl: ` uniform samplerCube u_Texture; in vec2 v_Uv; in vec4 v_Position; out vec4 outputColor; void main() { vec3 cubemapVec = v_Position.xyz - vec3(0.5); outputColor = texture(SAMPLER_Cube(u_Texture), cubemapVec); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); // The order of the array layers is [+X, -X, +Y, -Y, +Z, -Z] const imageBitmaps = await Promise.all([ posx(), negx(), posy(), negy(), posz(), negz() ]); const texture = device.createTexture({ format: Format.U8_RGBA_NORM, width: imageBitmaps[0].width, height: imageBitmaps[0].height, depthOrArrayLayers: 6, dimension: TextureDimension.TEXTURE_CUBE_MAP, usage: TextureUsage.SAMPLED }); texture.setImageData(imageBitmaps); device.setResourceName(texture, "Cube map"); const sampler = device.createSampler({ addressModeU: AddressMode.CLAMP_TO_EDGE, addressModeV: AddressMode.CLAMP_TO_EDGE, minFilter: FilterMode.BILINEAR, magFilter: FilterMode.BILINEAR, mipmapFilter: MipmapFilterMode.LINEAR, lodMinClamp: 0, lodMaxClamp: 0 }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: cubePositionOffset, format: Format.F32_RGBA }, { shaderLocation: 1, offset: cubeUVOffset, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, // Since we are seeing from inside of the cube // and we are using the regular cube geomtry data with outward-facing normals, // the cullMode should be 'front' or 'none'. cullMode: CullMode.NONE, stencilWrite: false } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 16 * 4 } ], samplerBindings: [ { texture, sampler } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); let id; const modelMatrix = mat4.fromScaling( mat4.create(), vec3.fromValues(1000, 1000, 1000) ); const modelViewProjectionMatrix = mat4.create(); const viewMatrix = mat4.identity(mat4.create()); const tmpMat4 = mat4.create(); const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 1, 3000 ); const now = Date.now() / 800; mat4.rotate( tmpMat4, viewMatrix, (Math.PI / 10) * Math.sin(now), vec3.fromValues(1, 0, 0) ); mat4.rotate(tmpMat4, tmpMat4, now * 0.2, vec3.fromValues(0, 1, 0)); mat4.multiply(modelViewProjectionMatrix, tmpMat4, modelMatrix); mat4.multiply( modelViewProjectionMatrix, projectionMatrix, modelViewProjectionMatrix ); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer) ); // WebGL1 need this program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix, u_Texture: texture }); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.draw(cubeVertexCount, 1, 0, 0); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); texture.destroy(); sampler.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3d:T197f,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount, cubeUVOffset, cubePositionOffset } = cube; const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix[16]; }; layout(location = 0) in vec3 a_Position; out vec4 v_Position; void main() { v_Position = vec4(a_Position, 1.0); gl_Position = u_ModelViewProjectionMatrix[gl_InstanceID] * vec4(a_Position, 1.0); } ` }, fragment: { glsl: ` in vec4 v_Position; out vec4 outputColor; void main() { outputColor = v_Position; } ` } }); const xCount = 4; const yCount = 4; const numInstances = xCount * yCount; const matrixFloatCount = 16; // 4x4 matrix const matrixSize = 4 * matrixFloatCount; const uniformBufferSize = numInstances * matrixSize; const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: uniformBufferSize, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RGB } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: matrixSize * numInstances } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 1, 100 ); const modelMatrices = new Array(numInstances); const mvpMatricesData = new Float32Array(matrixFloatCount * numInstances); const step = 4.0; // Initialize the matrix data for every instance. let m = 0; for (let x = 0; x < xCount; x++) { for (let y = 0; y < yCount; y++) { modelMatrices[m] = mat4.fromTranslation( mat4.create(), vec3.fromValues( step * (x - xCount / 2 + 0.5), step * (y - yCount / 2 + 0.5), 0 ) ); m++; } } const viewMatrix = mat4.fromTranslation( mat4.create(), vec3.fromValues(0, 0, -12) ); const tmpMat4 = mat4.create(); let id; const frame = () => { const now = Date.now() / 1000; let m = 0, i = 0; for (let x = 0; x < xCount; x++) { for (let y = 0; y < yCount; y++) { mat4.rotate( tmpMat4, modelMatrices[i], 1, vec3.fromValues( Math.sin((x + 0.5) * now), Math.cos((y + 0.5) * now), 0 ) ); mat4.multiply(tmpMat4, viewMatrix, tmpMat4); mat4.multiply(tmpMat4, projectionMatrix, tmpMat4); mvpMatricesData.set(tmpMat4, m); i++; m += matrixFloatCount; } } uniformBuffer.setSubData(0, new Uint8Array(mvpMatricesData.buffer)); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1 }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.draw(cubeVertexCount, numInstances); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3e:T20c6,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareFunction, StencilOp } = deviceAPI; const { mat4, vec3 } = glMatrix; const { cubeVertexArray, cubeVertexSize, cubeVertexCount } = cube; const triangleProgram = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(0.0, 0.0, 0.0, 0.0); } ` } }); const triangleVertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); const triangleInputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program: triangleProgram }); const trianglePipeline = device.createRenderPipeline({ inputLayout: triangleInputLayout, program: triangleProgram, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: false, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: true, stencilFront: { compare: CompareFunction.ALWAYS, passOp: StencilOp.REPLACE }, stencilBack: { compare: CompareFunction.ALWAYS, passOp: StencilOp.REPLACE } } }); const program = device.createProgram({ vertex: { glsl: ` layout(std140) uniform Uniforms { mat4 u_ModelViewProjectionMatrix; }; layout(location = 0) in vec3 a_Position; out vec4 v_Position; void main() { v_Position = vec4(a_Position, 1.0); gl_Position = u_ModelViewProjectionMatrix * vec4(a_Position, 1.0); } ` }, fragment: { glsl: ` in vec4 v_Position; out vec4 outputColor; void main() { outputColor = v_Position; } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: cubeVertexArray, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 16 * 4, // mat4 usage: BufferUsage.UNIFORM, hint: BufferFrequencyHint.DYNAMIC }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: cubeVertexSize, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RGB } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.U8_RGBA_RT], depthStencilAttachmentFormat: Format.D24_S8, megaStateDescriptor: { attachmentsState: [ { channelWriteMask: ChannelWriteMask.ALL, rgbBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.SRC_ALPHA, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA }, alphaBlendState: { blendMode: BlendMode.ADD, blendSrcFactor: BlendFactor.ONE, blendDstFactor: BlendFactor.ONE_MINUS_SRC_ALPHA } } ], blendConstant: TransparentBlack, depthWrite: true, depthCompare: CompareFunction.LESS, cullMode: CullMode.BACK, stencilWrite: false, stencilFront: { compare: CompareFunction.EQUAL, passOp: StencilOp.KEEP }, stencilBack: { compare: CompareFunction.EQUAL, passOp: StencilOp.KEEP } } }); const bindings = device.createBindings({ pipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 16 * 4 } ] }); const mainColorRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); const mainDepthRT = device.createRenderTargetFromTexture( device.createTexture({ format: Format.D24_S8, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); let id; const frame = () => { const aspect = $canvas.width / $canvas.height; const projectionMatrix = mat4.perspective( mat4.create(), (2 * Math.PI) / 5, aspect, 0.1, 1000 ); const viewMatrix = mat4.identity(mat4.create()); const modelViewProjectionMatrix = mat4.create(); mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4)); const now = Date.now() / 1000; mat4.rotate( viewMatrix, viewMatrix, 1, vec3.fromValues(Math.sin(now), Math.cos(now), 0) ); mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix); uniformBuffer.setSubData( 0, new Uint8Array(modelViewProjectionMatrix.buffer) ); // WebGL1 need this program.setUniformsLegacy({ u_ModelViewProjectionMatrix: modelViewProjectionMatrix }); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [mainColorRT], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite], depthStencilAttachment: mainDepthRT, depthClearValue: 1, stencilClearValue: 0 }); /** * Draw a triangle in stencil buffer. */ renderPass.setPipeline(trianglePipeline); renderPass.setVertexInput( triangleInputLayout, [ { buffer: triangleVertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setStencilReference(1); renderPass.draw(3); /** * Draw a cube. */ renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); // renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.setBindings(bindings); renderPass.setStencilReference(1); renderPass.draw(cubeVertexCount); device.submitPass(renderPass); device.endFrame(); id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } program.destroy(); vertexBuffer.destroy(); uniformBuffer.destroy(); inputLayout.destroy(); bindings.destroy(); pipeline.destroy(); mainColorRT.destroy(); mainDepthRT.destroy(); triangleProgram.destroy(); triangleInputLayout.destroy(); trianglePipeline.destroy(); triangleVertexBuffer.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()3f:Te28,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` layout(location = 0) out vec4 outputColor1; layout(location = 1) out vec4 outputColor2; layout(location = 2) out vec4 outputColor3; void main() { outputColor1 = vec4(1.0, 0.0, 0.0, 1.0); outputColor2 = vec4(0.0, 1.0, 0.0, 1.0); outputColor3 = vec4(0.0, 0.0, 1.0, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [ Format.U8_RGBA_RT, Format.U8_RGBA_RT, Format.U8_RGBA_RT ] }); const renderTarget1 = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); device.setResourceName(renderTarget1, "Main Render Target1"); const renderTarget2 = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); device.setResourceName(renderTarget2, "Main Render Target2"); const renderTarget3 = device.createRenderTargetFromTexture( device.createTexture({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }) ); device.setResourceName(renderTarget3, "Main Render Target3"); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget1, renderTarget2, renderTarget3], colorResolveTo: [null, onscreenTexture, null], colorClearColor: [TransparentWhite, TransparentWhite, TransparentWhite], colorStore: [true, true, true] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget1.destroy(); renderTarget2.destroy(); renderTarget3.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()40:Tb64,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGL2(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite } = deviceAPI; const program = device.createProgram({ vertex: { glsl: ` layout(location = 0) in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); } ` }, fragment: { glsl: ` out vec4 outputColor; void main() { outputColor = vec4(0.5, 0.4, 0.3, 1.0); } ` } }); const vertexBuffer = device.createBuffer({ viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), usage: BufferUsage.VERTEX, hint: BufferFrequencyHint.DYNAMIC }); device.setResourceName(vertexBuffer, "a_Position"); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { shaderLocation: 0, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program }); const pipeline = device.createRenderPipeline({ inputLayout, program, colorAttachmentFormats: [Format.F32_RGBA] }); const floatingPointTexture = device.createTexture({ format: Format.F32_RGBA, width: $canvas.width, height: $canvas.height, usage: TextureUsage.RENDER_TARGET }); const renderTarget = device.createRenderTargetFromTexture(floatingPointTexture); device.setResourceName(renderTarget, "Main Render Target"); const readback = device.createReadback(); const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(pipeline); renderPass.setVertexInput( inputLayout, [ { buffer: vertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); const result = await readback.readTexture( floatingPointTexture, 250, 250, 1, 1, new Float32Array(4) ); console.log(result); // [0.5, 0.4, 0.3, 1.0] $div.innerHTML = `RGBA: ${result}`; invalidation.then(() => { program.destroy(); vertexBuffer.destroy(); inputLayout.destroy(); pipeline.destroy(); renderTarget.destroy(); readback.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()41:T23df,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGPU(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareMode, WrapMode, TexFilterMode, MipFilterMode } = deviceAPI; const { mat4, vec3 } = glMatrix; const renderProgram = device.createProgram({ vertex: { entryPoint: "vert_main", wgsl: ` struct VertexOutput { @builtin(position) position : vec4, @location(4) color : vec4, } @vertex fn vert_main( @location(0) a_particlePos : vec2, @location(1) a_particleVel : vec2, @location(2) a_pos : vec2 ) -> VertexOutput { let angle = -atan2(a_particleVel.x, a_particleVel.y); let pos = vec2( (a_pos.x * cos(angle)) - (a_pos.y * sin(angle)), (a_pos.x * sin(angle)) + (a_pos.y * cos(angle)) ); var output : VertexOutput; output.position = vec4(pos + a_particlePos, 0.0, 1.0); output.color = vec4( 1.0 - sin(angle + 1.0) - a_particleVel.y, pos.x * 100.0 - a_particleVel.y + 0.1, a_particleVel.x + cos(angle + 0.5), 1.0); return output; } ` }, fragment: { entryPoint: "frag_main", wgsl: ` @fragment fn frag_main(@location(4) color : vec4) -> @location(0) vec4 { return color; } ` } }); const computeProgram = device.createProgram({ compute: { wgsl: ` struct Particle { pos : vec2, vel : vec2, } struct SimParams { deltaT : f32, rule1Distance : f32, rule2Distance : f32, rule3Distance : f32, rule1Scale : f32, rule2Scale : f32, rule3Scale : f32, } struct Particles { particles : array, } @binding(0) @group(0) var params : SimParams; @binding(1) @group(0) var particlesA : Particles; @binding(2) @group(0) var particlesB : Particles; // https://github.com/austinEng/Project6-Vulkan-Flocking/blob/master/data/shaders/computeparticles/particle.comp @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3) { var index = GlobalInvocationID.x; var vPos = particlesA.particles[index].pos; var vVel = particlesA.particles[index].vel; var cMass = vec2(0.0); var cVel = vec2(0.0); var colVel = vec2(0.0); var cMassCount = 0u; var cVelCount = 0u; var pos : vec2; var vel : vec2; for (var i = 0u; i < arrayLength(&particlesA.particles); i++) { if (i == index) { continue; } pos = particlesA.particles[i].pos.xy; vel = particlesA.particles[i].vel.xy; if (distance(pos, vPos) < params.rule1Distance) { cMass += pos; cMassCount++; } if (distance(pos, vPos) < params.rule2Distance) { colVel -= pos - vPos; } if (distance(pos, vPos) < params.rule3Distance) { cVel += vel; cVelCount++; } } if (cMassCount > 0) { cMass = (cMass / vec2(f32(cMassCount))) - vPos; } if (cVelCount > 0) { cVel /= f32(cVelCount); } vVel += (cMass * params.rule1Scale) + (colVel * params.rule2Scale) + (cVel * params.rule3Scale); // clamp velocity for a more pleasing simulation vVel = normalize(vVel) * clamp(length(vVel), 0.0, 0.1); // kinematic update vPos = vPos + (vVel * params.deltaT); // Wrap around boundary if (vPos.x < -1.0) { vPos.x = 1.0; } if (vPos.x > 1.0) { vPos.x = -1.0; } if (vPos.y < -1.0) { vPos.y = 1.0; } if (vPos.y > 1.0) { vPos.y = -1.0; } // Write back particlesB.particles[index].pos = vPos; particlesB.particles[index].vel = vVel; } ` } }); const numParticles = 1500; const initialParticleData = new Float32Array(numParticles * 4); for (let i = 0; i < numParticles; ++i) { initialParticleData[4 * i + 0] = 2 * (Math.random() - 0.5); initialParticleData[4 * i + 1] = 2 * (Math.random() - 0.5); initialParticleData[4 * i + 2] = 2 * (Math.random() - 0.5) * 0.1; initialParticleData[4 * i + 3] = 2 * (Math.random() - 0.5) * 0.1; } const particleBuffers = []; for (let i = 0; i < 2; ++i) { particleBuffers[i] = device.createBuffer({ viewOrSize: initialParticleData, usage: BufferUsage.VERTEX | BufferUsage.STORAGE }); } const vertexBufferData = new Float32Array([ -0.01, -0.02, 0.01, -0.02, 0.0, 0.02 ]); const spriteVertexBuffer = device.createBuffer({ viewOrSize: vertexBufferData, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 7 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.UNIFORM }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 4, stepMode: VertexStepMode.INSTANCE, attributes: [ { // instance position shaderLocation: 0, offset: 0, format: Format.F32_RG }, { // instance velocity shaderLocation: 1, offset: 4 * 2, format: Format.F32_RG } ] }, { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { // vertex positions shaderLocation: 2, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program: renderProgram }); const renderPipeline = device.createRenderPipeline({ inputLayout, program: renderProgram, colorAttachmentFormats: [Format.U8_RGBA_RT] }); const computePipeline = device.createComputePipeline({ inputLayout: null, program: computeProgram }); const simParams = { deltaT: 0.04, rule1Distance: 0.1, rule2Distance: 0.025, rule3Distance: 0.025, rule1Scale: 0.02, rule2Scale: 0.05, rule3Scale: 0.005 }; const bindings = []; for (let i = 0; i < 2; ++i) { bindings[i] = device.createBindings({ pipeline: computePipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer, size: 7 * Float32Array.BYTES_PER_ELEMENT } ], storageBufferBindings: [ { binding: 1, buffer: particleBuffers[i], size: initialParticleData.byteLength }, { binding: 2, buffer: particleBuffers[(i + 1) % 2], size: initialParticleData.byteLength } ] }); } const renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height }); device.setResourceName(renderTarget, "Main Render Target"); uniformBuffer.setSubData( 0, new Uint8Array( new Float32Array([ simParams.deltaT, simParams.rule1Distance, simParams.rule2Distance, simParams.rule3Distance, simParams.rule1Scale, simParams.rule2Scale, simParams.rule3Scale ]).buffer ) ); let id; let t = 0; const frame = () => { device.beginFrame(); const computePass = device.createComputePass(); computePass.setPipeline(computePipeline); computePass.setBindings(bindings[t % 2]); computePass.dispatchWorkgroups(Math.ceil(numParticles / 64)); device.submitPass(computePass); device.endFrame(); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); device.beginFrame(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(renderPipeline); renderPass.setVertexInput( inputLayout, [ { buffer: particleBuffers[(t + 1) % 2] }, { buffer: spriteVertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3, numParticles); device.submitPass(renderPass); device.endFrame(); ++t; id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } renderProgram.destroy(); computeProgram.destroy(); particleBuffers.forEach((buffer) => buffer.destroy()); uniformBuffer.destroy(); spriteVertexBuffer.destroy(); inputLayout.destroy(); renderPipeline.destroy(); computePipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()42:T6a4,cube = { const cubeVertexSize = 4 * 10; // Byte size of one cube vertex. const cubePositionOffset = 0; const cubeColorOffset = 4 * 4; // Byte offset of cube vertex color attribute. const cubeUVOffset = 4 * 8; const cubeVertexCount = 36; const cubeVertexArray = new Float32Array([ // float4 position, float4 color, float2 uv, 1, -1, 1, 1, 1, 0, 1, 1, 0, 1, -1, -1, 1, 1, 0, 0, 1, 1, 1, 1, -1, -1, -1, 1, 0, 0, 0, 1, 1, 0, 1, -1, -1, 1, 1, 0, 0, 1, 0, 0, 1, -1, 1, 1, 1, 0, 1, 1, 0, 1, -1, -1, -1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, -1, 1, 1, 1, 0, 1, 1, 1, 1, 1, -1, -1, 1, 1, 0, 0, 1, 1, 0, 1, 1, -1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, -1, -1, 1, 1, 0, 0, 1, 1, 0, -1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, 1, 0, 1, 1, 0, -1, 1, -1, 1, 0, 1, 0, 1, 0, 0, -1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, -1, 1, 1, 1, 0, 1, 1, 0, -1, -1, 1, 1, 0, 0, 1, 1, 0, 1, -1, 1, 1, 1, 0, 1, 1, 1, 1, 1, -1, 1, -1, 1, 0, 1, 0, 1, 1, 0, -1, -1, -1, 1, 0, 0, 0, 1, 0, 0, -1, -1, 1, 1, 0, 0, 1, 1, 0, 1, -1, 1, -1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, -1, 1, 1, 1, 0, 1, 1, 1, 1, 1, -1, -1, 1, 1, 0, 0, 1, 1, 1, 0, -1, -1, 1, 1, 0, 0, 1, 1, 1, 0, 1, -1, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, -1, -1, 1, 1, 0, 0, 1, 0, 1, -1, -1, -1, 1, 0, 0, 0, 1, 1, 1, -1, 1, -1, 1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 1, 1, 0, 1, 0, 0, 1, -1, -1, 1, 1, 0, 0, 1, 0, 1, -1, 1, -1, 1, 0, 1, 0, 1, 1, 0 ]); return { cubeVertexSize, cubePositionOffset, cubeColorOffset, cubeUVOffset, cubeVertexCount, cubeVertexArray }; }43:[{"id":"764e69d5d06cae381cf05df2aa5a6e4199123b886cdcfed8bb7ad57e56fe9cbeb6fe48462e552d307664a21068499789802bc9fdf67cb1c7526b79210e83df62","href":"https://static.observableusercontent.com/files/764e69d5d06cae381cf05df2aa5a6e4199123b886cdcfed8bb7ad57e56fe9cbeb6fe48462e552d307664a21068499789802bc9fdf67cb1c7526b79210e83df62","name":"image.png","type":"image/png","lastModified":1701745928537.958,"size":18678},{"id":"299dc4ffccf0759e72ce1bd6b06bbc5ba09f991a9331670be21ac07a00a35c02456afbd0625767f6bc2140f16b33cdc605e65fccd90b83daeaec165e93741d45","href":"https://static.observableusercontent.com/files/299dc4ffccf0759e72ce1bd6b06bbc5ba09f991a9331670be21ac07a00a35c02456afbd0625767f6bc2140f16b33cdc605e65fccd90b83daeaec165e93741d45","name":"A__aqoS73Se3sAAAAAAAAAAAAAARQnAQ.png","type":"image/png","lastModified":1695018148248.977,"size":71065},{"id":"f27119dc5e2eb1924d93258f90bfc04e4dab72f0fdab9277ef2712b8cd3eab76adaf433b7b44555788d05059d4c340e248b8749426f592c8ebd7992c932e97c6","href":"https://static.observableusercontent.com/files/f27119dc5e2eb1924d93258f90bfc04e4dab72f0fdab9277ef2712b8cd3eab76adaf433b7b44555788d05059d4c340e248b8749426f592c8ebd7992c932e97c6","name":"posy.jpg","type":"image/jpeg","lastModified":1695020741696.464,"size":105686},{"id":"79d4b6ebdb8390728e706b0790fa58b704a7b3df81f19bfcc793565a6d6ad114c7c16298fa9f7ff4c36bdf52395b8e0a0025d4f3876de2a74e1abfe2e68af65e","href":"https://static.observableusercontent.com/files/79d4b6ebdb8390728e706b0790fa58b704a7b3df81f19bfcc793565a6d6ad114c7c16298fa9f7ff4c36bdf52395b8e0a0025d4f3876de2a74e1abfe2e68af65e","name":"negx.jpg","type":"image/jpeg","lastModified":1695020741967.753,"size":119967},{"id":"9eb919d48bef85008c1f904fa9440e5d690f7bf7f6d8a92b2ee2d4fe0523308df8721b80f43246d7b7c28b49391ca9132f672d2d688dd68b01d0cd225490410c","href":"https://static.observableusercontent.com/files/9eb919d48bef85008c1f904fa9440e5d690f7bf7f6d8a92b2ee2d4fe0523308df8721b80f43246d7b7c28b49391ca9132f672d2d688dd68b01d0cd225490410c","name":"posx.jpg","type":"image/jpeg","lastModified":1695020742114.234,"size":134029},{"id":"12a0161e9fc09bbd3570f4fc99c2279c67dc947c78b5ceef7497b40c4d1ae0e2aed03e5428b3d27c6e81fcf4f76339fa0eb3b7ce2f89057f47835f72b3874587","href":"https://static.observableusercontent.com/files/12a0161e9fc09bbd3570f4fc99c2279c67dc947c78b5ceef7497b40c4d1ae0e2aed03e5428b3d27c6e81fcf4f76339fa0eb3b7ce2f89057f47835f72b3874587","name":"negy.jpg","type":"image/jpeg","lastModified":1695020742107.706,"size":139902},{"id":"b6b3918cf6c380bcc28ea22f180439fcb92bb2c5a389c362384b02ba3b7facef50cafa0d1d38a808bf42b7d7737645cea01efff0d2d03a94497371e8584cee93","href":"https://static.observableusercontent.com/files/b6b3918cf6c380bcc28ea22f180439fcb92bb2c5a389c362384b02ba3b7facef50cafa0d1d38a808bf42b7d7737645cea01efff0d2d03a94497371e8584cee93","name":"negz.jpg","type":"image/jpeg","lastModified":1695020742242.556,"size":157978},{"id":"4574dedd713dc9537bf3af54d71192efb71ab5db11a5be84d90ff9b619567432d0b6014d13235d85c3abfbd0e4fc2aee29705659d138d4d3d387069b816f7ff3","href":"https://static.observableusercontent.com/files/4574dedd713dc9537bf3af54d71192efb71ab5db11a5be84d90ff9b619567432d0b6014d13235d85c3abfbd0e4fc2aee29705659d138d4d3d387069b816f7ff3","name":"posz.jpg","type":"image/jpeg","lastModified":1695020742276.389,"size":162661}] 2f:{"id":"64a376dba1f29dbb","slug":"g-device-api","title":"Device API Examples","thumbnail":"259f04f09b3b7ee3bb1970248e03394c26b32056e28392b6c4b7df77bd97e9d7","access_level":"public","create_time":"$D2023-09-14T10:42:05.709Z","update_time":"$D2024-01-17T03:22:29.311Z","view_time":null,"first_public_time":"$D2023-09-14T10:42:05.709Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"96a4168c70a60e69","login":"antv","name":"AntV","avatar_url":"https://avatars-next.observableusercontent.com/9cfb1b3742d5fee0ae1105c158818aad1b91fd02751860be879c813cbaac3abf","tier":"starter_2024"},"version":458,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf67d760eefcbffd","login":"xiaoiver","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4a568df4cb69f834e43d657ac3e7239ed96aac8fb20e8c31c9c1ddcdf8b54a0","tier":null}],"members":[{"type":"team","id":"96a4168c70a60e69","login":"antv","name":"AntV","avatar_url":"https://avatars-next.observableusercontent.com/9cfb1b3742d5fee0ae1105c158818aad1b91fd02751860be879c813cbaac3abf","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bf67d760eefcbffd","login":"xiaoiver","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4a568df4cb69f834e43d657ac3e7239ed96aac8fb20e8c31c9c1ddcdf8b54a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Device API Examples","cells":[{"id":0,"value":"# Device API Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"Create a WebGL 1/2 device contribution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"```ts\nimport { WebGLDeviceContribution } from '@antv/g-device-api';\nconst deviceContribution = new WebGLDeviceContribution({\n targets: [\"webgl2\", \"webgl1\"] // downgrade to WebGL1 automatically\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":32,"value":"Or create a WebGPU Device contribution.\n```ts\nimport { WebGPUDeviceContribution } from '@antv/g-device-api';\nconst deviceContribution = new WebGPUDeviceContribution({\n shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":179,"value":"Then create swapChain with contribution and get device from it:\n```ts\nconst swapChain = await deviceContribution.createSwapChain($canvas);\nswapChain.configureSwapChain($canvas.width, $canvas.height);\nconst device = swapChain.getDevice();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":183,"value":"Now we can use [Device API](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#api) with the created device.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"## Primitive Topology Points\n\nThis example shows how to create [Program](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#createProgram), [Buffer](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#createBuffer) with Device API.\nWe also try to explain how these GPU resouces work together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"viewof gl_PointSize = Inputs.range([0, 100], {\n label: \"gl_PointSize\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"First we can create a program with [createProgram](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#createProgram) as follows, the Shader contents are omitted fow now. In [compute boids](#115) example you will see how to use compute shader(WGSL) in WebGPU:\n```ts\nconst program = device.createProgram({\n vertex: {\n glsl: ``,\n },\n fragment: {\n glsl: ``,\n },\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"Since WebGL 1/2 & WebGPU use different shader languages, we do a lot of transpiling work at runtime.\nWe use a syntax very closed to GLSL 300, and for different devices:\n\n* WebGL1. Downgrade to GLSL 100.\n* WebGL2. Almost keep the same which means GLSL 300.\n* WebGPU. Transpile to GLSL 440 and then use gfx-naga WASM to generate WGSL.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":137,"value":"Here's our Vertex Shader content, please note the `location = 0`:\n```glsl\nlayout(location = 0) in vec2 a_Position;\n\nvoid main() {\n gl_Position = vec4(a_Position, 0.0, 1.0);\n gl_PointSize = 10.0;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"Then we need to create a vertex buffer with [createBuffer](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#createBuffer):\n```ts\nconst vertexBuffer = device.createBuffer({\n viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), // 3 points\n usage: BufferUsage.VERTEX,\n hint: BufferFrequencyHint.DYNAMIC,\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":196,"value":"Now we need to make program & buffer work together, `inputLayout` is used for this.\n```ts\nconst inputLayout = device.createInputLayout({\n vertexBufferDescriptors: [\n {\n arrayStride: 4 * 2,\n stepMode: VertexStepMode.VERTEX,\n attributes: [\n {\n shaderLocation: 0, // must match `location = 0` in vertex shader\n offset: 0,\n format: Format.F32_RG, // must match `vec2` in vertex shader\n },\n ]\n },\n ],\n indexBufferFormat: null, // we won't use index buffer here\n program,\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"Pipeline\n```ts\nconst pipeline = device.createRenderPipeline({\n inputLayout,\n program,\n topology: PrimitiveTopology.POINTS, // Use Points primitive\n colorAttachmentFormats: [Format.U8_RGBA_RT]\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":215,"value":"Now we need to [createRenderTarget](https://www.npmjs.com/package/@strawberry-vis/g-device-api?activeTab=readme#createRenderTarget):\n```ts\nconst renderTarget = device.createRenderTargetFromTexture(\n device.createTexture({\n format: Format.U8_RGBA_RT,\n width: $canvas.width,\n height: $canvas.height,\n usage: TextureUsage.RENDER_TARGET,\n }),\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":217,"value":"On each frame, a new RenderPass need to be created. It can be used to render to certain texture, here we use the onscreen texture.\nIt's very useful in post-processing implementations.\n```ts\ndevice.beginFrame();\n\nconst onscreenTexture = swapChain.getOnscreenTexture();\nconst renderPass = device.createRenderPass({\n colorAttachment: [renderTarget],\n colorResolveTo: [onscreenTexture],\n colorClearColor: [TransparentWhite],\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"RenderPass has a lot of API such as [setPipeline](), [setVertexInput](), [setViewport]() and the most important [draw]():\n```ts\nrenderPass.setPipeline(pipeline);\nrenderPass.setVertexInput(\n inputLayout,\n [\n {\n buffer: vertexBuffer,\n },\n ],\n null, // no need to use index buffer\n);\nrenderPass.setViewport(0, 0, $canvas.width, $canvas.height);\nrenderPass.draw(3);\n```\n\nFinally, we submit the RenderPass at the end of each frame:\n```ts\ndevice.submitPass(renderPass);\ndevice.endFrame();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":221,"value":"All the GPU resouces need to be destroyed to avoid memory leaking. \n```ts\nprogram.destroy();\nvertexBuffer.destroy();\ninputLayout.destroy();\npipeline.destroy();\nrenderTarget.destroy();\ndevice.destroy();\n\n// For debug.\ndevice.checkForLeaks();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":73,"value":"## Primitive Topology Triangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":228,"value":"We just need to change a little bit with the previous points example:\n\n```ts\nconst pipeline = device.createRenderPipeline({\n topology: PrimitiveTopology.TRIANGLES, // triangles is the default primitive\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"## Draw Index\n\nCreate indexBuffer:\n```ts\nconst indexBuffer = device.createBuffer({\n viewOrSize: new Uint32Array([0, 1, 2]),\n usage: BufferUsage.INDEX,\n});\n```\n\nThen bind indexBuffer on each frame in RenderPass:\n```ts\nrenderPass.setVertexInput(\n inputLayout,\n [\n {\n buffer: vertexBuffer,\n },\n ],\n { // Use IndexBuffer here\n buffer: indexBuffer,\n },\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":339,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"## MSAA\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":259,"value":"Previously in WebGL1, if we want antialiasing we would either have to render it to the default backbuffer or perform our own post-process AA (such as FXAA or SMAA) on content rendered to a texture.\nNow, with Multisampled Renderbuffers in WebGL2, we can use the general rendering pipeline in WebGL to provide multisampled antialiasing (MSAA).\n\n```ts\nconst pipeline = device.createRenderPipeline({\n inputLayout,\n program,\n colorAttachmentFormats: [Format.U8_RGBA_RT],\n sampleCount: 4, // 4x\n});\n\nconst renderTarget = device.createRenderTarget({\n format: Format.U8_RGBA_RT,\n width: $canvas.width,\n height: $canvas.height,\n sampleCount: 4, // 4x\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":261,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"## Resizing Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":284,"value":"In this example, the size of canvas changed at every frame with CSS Animation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":269,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"The size of canvas has been changed since created at first time, we need to reconfigure it with swapChain:\n\n```ts\nswapChain.configureSwapChain($canvas.width, $canvas.height);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":289,"value":"The RenderTarget also need to be recreated for the same reason:\n```ts\nrenderTarget = device.createRenderTarget({\n format: Format.U8_RGBA_RT,\n width: $canvas.width, // current canvas' size\n height: $canvas.height,\n sampleCount: 4,\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":272,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"## Rotating Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":231,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"## Two Cubes\n\n```ts\nconst bindings1 = device.createBindings({\n pipeline,\n uniformBufferBindings: [\n {\n binding: 0,\n buffer: uniformBuffer,\n offset: 0,\n size: matrixSize,\n },\n ],\n});\nconst bindings2 = device.createBindings({\n pipeline,\n uniformBufferBindings: [\n {\n binding: 0,\n buffer: uniformBuffer, // Use one uniform buffer.\n offset, // Use offset here.\n size: matrixSize,\n },\n ],\n});\n```\n\nRender 2 cubes in sequence at each frame with different bindings:\n\n```ts\nrenderPass.setBindings(bindings1);\nrenderPass.draw(cubeVertexCount);\nrenderPass.setBindings(bindings2);\nrenderPass.draw(cubeVertexCount);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":318,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"## Textured Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":241,"value":"Create a texture and upload image to it, see [setImageData]() for more information:\n\n```ts\nconst texture = device.createTexture({\n pixelFormat: Format.U8_RGBA_NORM,\n width: imageBitmap.width,\n height: imageBitmap.height,\n usage: TextureUsage.SAMPLED,\n});\ntexture.setImageData([imageBitmap]);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":245,"value":"In WebGL 1 texture image data and sampling information (which tells GPU how to read the image data) are both stored in texture objects. It can be annoying when we want to read from the same texture twice but with a different method (say, linear filtering vs nearest filtering) because we need to have two texture objects. With sampler objects, we can separate these two concepts. We can have one texture object and two different sampler objects. This will result in a change in how our engine organize textures.\n\n```ts\nconst sampler = device.createSampler({\n addressModeU: AddressMode.CLAMP_TO_EDGE,\n addressModeV: AddressMode.CLAMP_TO_EDGE,\n minFilter: FilterMode.POINT,\n magFilter: FilterMode.BILINEAR,\n mipmapFilter: MipmapFilterMode.LINEAR,\n lodMinClamp: 0,\n lodMaxClamp: 0,\n});\n```\n\nIn Bindings `samplerBindings` is used to define texture & sampler pairs:\n\n```ts\nconst bindings = device.createBindings({\n samplerBindings: [\n {\n texture,\n sampler,\n },\n ],\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":96,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"## Use Multiple Textures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":420,"value":"We can use multiple textures and samplers in fragment shader like this:\n```glsl\nuniform sampler2D u_Texture;\nuniform sampler2D u_Texture2;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":427,"value":"When creating bindings, the same sampler can be shared between multiple textures. You can use different samplers as well:\n```ts\nconst bindings = device.createBindings({\n pipeline,\n samplerBindings: [\n {\n texture,\n sampler,\n },\n {\n texture: texture2,\n sampler,\n },\n ],\n});\n```\n\nOf course, don't forget to pass them in WebGL1 legacy API:\n```ts\nprogram.setUniformsLegacy({\n u_Texture: texture,\n u_Texture2: texture2,\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":413,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"## Cubemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":248,"value":"Cubemap is a special kind of texture. We need to define its dimension to `TextureDimension.TEXTURE_CUBE_MAP` and depthOrArrayLayers to `6`.\n\n```ts\nconst texture = device.createTexture({\n format: Format.U8_RGBA_NORM,\n width: imageBitmaps[0].width,\n height: imageBitmaps[0].height,\n depthOrArrayLayers: 6,\n dimension: TextureDimension.TEXTURE_CUBE_MAP,\n usage: TextureUsage.SAMPLED,\n});\ntexture.setImageData(imageBitmaps); // 6 images\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":155,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"## Instanced Cubes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":252,"value":"WebGL has a feature called instanced drawing. It is basically a way to draw more than one of the same thing faster than drawing each thing individually.\n\nWe can use the second param in [draw]():\n```ts\nrenderPass.draw(cubeVertexCount, numInstances);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"## Stencil\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":357,"value":"The first pipeline draws a triangle in stencil buffer.\n```ts\nconst trianglePipeline = device.createRenderPipeline({\n //...\n megaStateDescriptor: {\n //...\n stencilWrite: true, // enable stencil\n stencilFront: {\n compare: CompareFunction.ALWAYS,\n passOp: StencilOp.REPLACE,\n },\n stencilBack: {\n compare: CompareFunction.ALWAYS,\n passOp: StencilOp.REPLACE,\n },\n },\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":360,"value":"The second pipeline draw a cube.\n```ts\nconst pipeline = device.createRenderPipeline({\n //...\n megaStateDescriptor: {\n //...\n stencilWrite: false,\n stencilFront: {\n compare: CompareFunction.EQUAL,\n passOp: StencilOp.KEEP,\n },\n stencilBack: {\n compare: CompareFunction.EQUAL,\n passOp: StencilOp.KEEP,\n },\n },\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":362,"value":"\n```ts\n/**\n * Draw a triangle in stencil buffer.\n */\nrenderPass.setPipeline(trianglePipeline);\nrenderPass.setStencilReference(1);\nrenderPass.draw(3);\n\n/**\n * Draw a cube.\n */\nrenderPass.setPipeline(pipeline);\nrenderPass.setStencilReference(1);\nrenderPass.draw(cubeVertexCount);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":349,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"## Multiple Render Targets\n\nMultiple Render Targets(MRT) allows fragment shader to write to several textures, which is useful for deferred shading. WebGL1 needs `WEBGL_draw_buffers` extension.\n\nWe directly use multiple `out` variables in the fragment shader:\n```glsl\nlayout(location = 0) out vec4 outputColor1;\nlayout(location = 1) out vec4 outputColor2;\nlayout(location = 2) out vec4 outputColor3;\n\nvoid main() {\n outputColor1 = vec4(1.0, 0.0, 0.0, 1.0);\n outputColor2 = vec4(0.0, 1.0, 0.0, 1.0);\n outputColor3 = vec4(0.0, 0.0, 1.0, 1.0);\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":383,"value":"Then we create 3 render targets, and blit RT2(the green one) to screen:\n```ts\nconst renderPass = device.createRenderPass({\n colorAttachment: [renderTarget1, renderTarget2, renderTarget3],\n colorResolveTo: [null, onscreenTexture, null],\n colorClearColor: [TransparentWhite, TransparentWhite, TransparentWhite],\n colorStore: [true, true, true]\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":379,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"## Float Texture\n\nAllow texture with floating-point pixel. Both WebGL1 & WebGL2 need some extensions:\n* The `OES_texture_float` & `WEBGL_color_buffer_float` extension is needed in WebGL1.\n* The `EXT_color_buffer_float` extension is needed in WebGL2.\n\n```ts\nconst floatingPointTexture = device.createTexture({\n format: Format.F32_RGBA,\n width: $canvas.width,\n height: $canvas.height,\n usage: TextureUsage.RENDER_TARGET\n});\n```\n\nThen we can output a fixed color in fragment shader:\n```glsl\nout vec4 outputColor;\n\nvoid main() {\n outputColor = vec4(0.5, 0.4, 0.3, 1.0);\n}\n```\n\nFinally we try to read floating-point data from this render target:\n```ts\nconst readback = device.createReadback();\nconst result = await readback.readTexture(\n floatingPointTexture,\n 250,\n 250,\n 1,\n 1,\n new Float32Array(4),\n);\nconsole.log(result); // [0.5, 0.4, 0.3, 1.0]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":398,"value":"createDiv = () => {\n const $div = document.createElement(\"div\");\n $div.innerHTML = \"RGBA: \";\n $div.style.fontSize = \"32px\";\n return $div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"$$div = createDiv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"## Compute Boids\n\nWebGPU supports Compute Shader with [WGSL](https://www.w3.org/TR/WGSL/). We won't go into too much detail with WGSL's syntax here.\n\n```ts\nconst computeProgram = device.createProgram({\n compute: {\n wgsl: `` // Raw WGSL\n }\n});\n```\n\nThen we need to create a ComputePipeline and link to compute program:\n\n```ts\nconst computePipeline = device.createComputePipeline({\n inputLayout: null,\n program: computeProgram,\n});\n```\n\nOn each frame, a new ComputePass should be created and submitted at the end:\n\n```ts\nconst computePass = device.createComputePass();\ncomputePass.setPipeline(computePipeline);\ncomputePass.setBindings(bindings[t % 2]);\ncomputePass.dispatchWorkgroups(Math.ceil(numParticles / 64));\ndevice.submitPass(computePass);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"createDeviceContributionWebGL1 = () =>\n new deviceAPI.WebGLDeviceContribution({\n targets: [\"webgl1\"]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"createDeviceContributionWebGL2 = () =>\n new deviceAPI.WebGLDeviceContribution({\n targets: [\"webgl2\", \"webgl1\"]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"createDeviceContributionWebGPU = () =>\n new deviceAPI.WebGPUDeviceContribution({\n shaderCompilerPath:\n \"https://unpkg.com/@antv/g-device-api@1.4.9/rust/pkg/glsl_wgsl_compiler_bg.wasm\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"createCanvas = () => {\n const $canvas = document.createElement(\"canvas\");\n $canvas.width = 1000;\n $canvas.height = 1000;\n $canvas.style.width = \"500px\";\n $canvas.style.height = \"500px\";\n return $canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"deviceAPI = require(\"@antv/g-device-api@1.4.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"glMatrix = require(\"gl-matrix@3.4.2/dist/gl-matrix.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"loadImage = () => FileAttachment(\"A__aqoS73Se3sAAAAAAAAAAAAAARQnAQ.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"loadImage1 = () => FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"negx = () => FileAttachment(\"negx.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"negy = () => FileAttachment(\"negy.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"negz = () => FileAttachment(\"negz.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"posx = () => FileAttachment(\"posx.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"posy = () => FileAttachment(\"posy.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"posz = () => FileAttachment(\"posz.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W43","stdlib":"1","titling":"auto"}} 30:"$2f:body"