├── .gitignore ├── docs ├── images │ ├── head.png │ ├── hilo.png │ ├── circle.gif │ └── snapshot.png ├── libs │ ├── glslang │ │ ├── web-devel │ │ │ ├── glslang.wasm │ │ │ └── glslang.d.ts │ │ ├── node-devel │ │ │ ├── glslang.wasm │ │ │ └── glslang.d.ts │ │ ├── web-devel-nocompute │ │ │ ├── glslang.wasm │ │ │ └── glslang.d.ts │ │ ├── web-devel-onefile │ │ │ ├── glslang.wasm │ │ │ └── glslang.d.ts │ │ └── web-min-nocompute │ │ │ ├── glslang.wasm │ │ │ └── glslang.d.ts │ └── helpers.js ├── assets │ └── js │ │ ├── 50.cc189e64.chunk.js.LICENSE.txt │ │ ├── 76.883e1f61.chunk.js │ │ ├── chunk-vendors.54d6d9da.chunk.js.LICENSE.txt │ │ ├── 6.ec474eac.chunk.js │ │ ├── 19.a2f9059f.chunk.js │ │ ├── 65.20d7a99a.chunk.js │ │ ├── 11.42a9fe47.chunk.js │ │ ├── 54.b382ec1d.chunk.js │ │ ├── 44.171a259a.chunk.js │ │ ├── 43.3bcee1e8.chunk.js │ │ ├── 13.2e7da4f7.chunk.js │ │ ├── 7.53f96f03.chunk.js │ │ ├── 23.61d58a8d.chunk.js │ │ ├── 16.419be202.chunk.js │ │ ├── 75.b1ed5135.chunk.js │ │ ├── 66.38922cf6.chunk.js │ │ ├── 27.3a9fe1e6.chunk.js │ │ ├── 15.9d7107f9.chunk.js │ │ ├── 37.dad507de.chunk.js │ │ ├── 68.192b5824.chunk.js │ │ ├── 46.c844fd0e.chunk.js │ │ ├── 20.4d6a19d1.chunk.js │ │ ├── 14.d51b4a8c.chunk.js │ │ ├── 28.967eccac.chunk.js │ │ ├── 69.8ba176b0.chunk.js │ │ ├── 62.ec4461e6.chunk.js │ │ ├── 21.6bfbd013.chunk.js │ │ ├── 36.68f0e5d3.chunk.js │ │ ├── 34.36478a46.chunk.js │ │ ├── 24.d4d09ce4.chunk.js │ │ ├── 67.b2d7b852.chunk.js │ │ ├── 55.1f255084.chunk.js │ │ ├── 39.a6a61ef4.chunk.js │ │ ├── 74.12f8170c.chunk.js │ │ ├── 9.3a2654e8.chunk.js │ │ ├── 51.b91612f8.chunk.js │ │ ├── 63.f1a76e13.chunk.js │ │ ├── 22.b88a034b.chunk.js │ │ ├── 42.c5e4694a.chunk.js │ │ ├── 50.cc189e64.chunk.js │ │ ├── 5.d92cc798.chunk.js │ │ ├── 71.4e23670d.chunk.js │ │ ├── 12.501aa83b.chunk.js │ │ ├── 10.e36a2c8b.chunk.js │ │ ├── 18.91b677d6.chunk.js │ │ ├── 72.ba018b44.chunk.js │ │ ├── 35.b3c73878.chunk.js │ │ ├── 70.4ea0b970.chunk.js │ │ ├── 25.8ed20cb0.chunk.js │ │ ├── 52.e14016fb.chunk.js │ │ └── 0.a16b8f4b.chunk.js ├── typescript.worker.js.LICENSE.txt ├── runtime~index.bundle.js └── index.html ├── static ├── images │ ├── head.png │ ├── hilo.png │ ├── circle.gif │ └── snapshot.png └── libs │ ├── glslang │ ├── web-devel │ │ ├── glslang.wasm │ │ └── glslang.d.ts │ ├── node-devel │ │ ├── glslang.wasm │ │ └── glslang.d.ts │ ├── web-devel-onefile │ │ ├── glslang.wasm │ │ └── glslang.d.ts │ ├── web-min-nocompute │ │ ├── glslang.wasm │ │ └── glslang.d.ts │ └── web-devel-nocompute │ │ ├── glslang.wasm │ │ └── glslang.d.ts │ └── helpers.js ├── README.md ├── demos ├── Hilo3d │ ├── Box │ │ └── config.js │ └── LightBox │ │ └── config.js ├── Samples │ ├── WebWorker │ │ ├── config.js │ │ └── index.js │ ├── ClickedPoints │ │ ├── config.js │ │ └── index.js │ ├── ColoredPoints │ │ ├── config.js │ │ └── index.js │ ├── CubeTexture │ │ └── config.js │ ├── HelloCanvas │ │ ├── config.js │ │ └── index.js │ ├── HelloPoint1 │ │ ├── config.js │ │ └── index.js │ ├── HelloPoint2 │ │ ├── config.js │ │ └── index.js │ ├── HelloTriangle │ │ ├── config.js │ │ └── index.js │ ├── MultiTexture │ │ └── config.js │ ├── TexturedQuad │ │ └── config.js │ ├── MultiAttributeColor │ │ ├── config.js │ │ └── index.js │ ├── RotatingTriangle │ │ ├── config.js │ │ └── index.js │ └── TransformTexturedQuad │ │ └── config.js ├── style.css ├── commonConfig.js ├── .demoList.json └── index.html ├── package.json ├── LICENSE └── .demosrc.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /docs/images/head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/images/head.png -------------------------------------------------------------------------------- /docs/images/hilo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/images/hilo.png -------------------------------------------------------------------------------- /docs/images/circle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/images/circle.gif -------------------------------------------------------------------------------- /static/images/head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/images/head.png -------------------------------------------------------------------------------- /static/images/hilo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/images/hilo.png -------------------------------------------------------------------------------- /docs/images/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/images/snapshot.png -------------------------------------------------------------------------------- /static/images/circle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/images/circle.gif -------------------------------------------------------------------------------- /static/images/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/images/snapshot.png -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/libs/glslang/web-devel/glslang.wasm -------------------------------------------------------------------------------- /docs/libs/glslang/node-devel/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/libs/glslang/node-devel/glslang.wasm -------------------------------------------------------------------------------- /static/libs/glslang/web-devel/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/libs/glslang/web-devel/glslang.wasm -------------------------------------------------------------------------------- /static/libs/glslang/node-devel/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/libs/glslang/node-devel/glslang.wasm -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel-nocompute/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/libs/glslang/web-devel-nocompute/glslang.wasm -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel-onefile/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/libs/glslang/web-devel-onefile/glslang.wasm -------------------------------------------------------------------------------- /docs/libs/glslang/web-min-nocompute/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/docs/libs/glslang/web-min-nocompute/glslang.wasm -------------------------------------------------------------------------------- /static/libs/glslang/web-devel-onefile/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/libs/glslang/web-devel-onefile/glslang.wasm -------------------------------------------------------------------------------- /static/libs/glslang/web-min-nocompute/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/libs/glslang/web-min-nocompute/glslang.wasm -------------------------------------------------------------------------------- /static/libs/glslang/web-devel-nocompute/glslang.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/06wj/WebGPU-Playground/HEAD/static/libs/glslang/web-devel-nocompute/glslang.wasm -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 👉🏻 [Online Demo](https://06wj.github.io/WebGPU-Playground/) 2 | 3 | # WebGPU Playground 4 | 5 | A playground for WebGPU. 6 | 7 | ![](./static/images/snapshot.png) 8 | -------------------------------------------------------------------------------- /docs/assets/js/50.cc189e64.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*!--------------------------------------------------------------------------------------------- 2 | * Copyright (C) David Owens II, owensd.io. All rights reserved. 3 | *--------------------------------------------------------------------------------------------*/ 4 | -------------------------------------------------------------------------------- /demos/Hilo3d/Box/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Hilo3d/LightBox/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/WebWorker/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/ClickedPoints/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/ColoredPoints/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/CubeTexture/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/HelloCanvas/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/HelloPoint1/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/HelloPoint2/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/HelloTriangle/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/MultiTexture/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/TexturedQuad/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/MultiAttributeColor/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/RotatingTriangle/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/Samples/TransformTexturedQuad/config.js: -------------------------------------------------------------------------------- 1 | import { 2 | getConfig, 3 | } from '~/commonConfig'; 4 | 5 | export default async () => { 6 | const [javascript, commonConfig] = await Promise.all([ 7 | import ('!raw-loader!./index.js'), 8 | getConfig() 9 | ]); 10 | 11 | commonConfig.javascript.code = javascript; 12 | return commonConfig; 13 | }; -------------------------------------------------------------------------------- /demos/style.css: -------------------------------------------------------------------------------- 1 | html, body, div{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html, body{ 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | #canvas { 12 | /*width: 500px;*/ 13 | /*height: 500px;*/ 14 | } 15 | 16 | #not-supported{ 17 | padding-top: 45px; 18 | width: 100%; 19 | height: 100%; 20 | display: none; 21 | color: #fff; 22 | } 23 | 24 | a{ 25 | color: #3f6; 26 | } -------------------------------------------------------------------------------- /docs/assets/js/76.883e1f61.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[76],{480:function(n,d,i){"use strict";i.r(d),d.default="html, body, div{\n padding: 0;\n margin: 0;\n}\n\nhtml, body{\n width: 100%;\n height: 100%;\n}\n\n#canvas {\n /*width: 500px;*/\n /*height: 500px;*/\n}\n\n#not-supported{\n padding-top: 45px;\n width: 100%;\n height: 100%;\n display: none;\n color: #fff;\n}\n\na{\n color: #3f6;\n}"}}]); -------------------------------------------------------------------------------- /docs/assets/js/chunk-vendors.54d6d9da.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress 2 | * @license MIT */ 3 | 4 | /*! 5 | * Vue.js v2.6.11 6 | * (c) 2014-2019 Evan You 7 | * Released under the MIT License. 8 | */ 9 | 10 | /*! 11 | * perfect-scrollbar v1.5.0 12 | * Copyright 2020 Hyunje Jun, MDBootstrap and Contributors 13 | * Licensed under MIT 14 | */ 15 | 16 | /** 17 | * vuex v3.3.0 18 | * (c) 2020 Evan You 19 | * @license MIT 20 | */ 21 | -------------------------------------------------------------------------------- /docs/libs/glslang/node-devel/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /static/libs/glslang/node-devel/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /static/libs/glslang/web-devel/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel-onefile/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /docs/libs/glslang/web-min-nocompute/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /docs/libs/glslang/web-devel-nocompute/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /static/libs/glslang/web-devel-nocompute/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /static/libs/glslang/web-devel-onefile/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /static/libs/glslang/web-min-nocompute/glslang.d.ts: -------------------------------------------------------------------------------- 1 | declare type ShaderStage = 'vertex' | 'fragment' | 'compute'; 2 | declare type SpirvVersion = '1.0' | '1.1' | '1.2' | '1.3' | '1.4' | '1.5'; 3 | 4 | declare interface ResultZeroCopy { 5 | readonly data: Uint32Array; 6 | free(): void; 7 | } 8 | 9 | declare interface Glslang { 10 | compileGLSLZeroCopy(glsl: string, shader_stage: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): ResultZeroCopy; 11 | compileGLSL(glsl: string, shader_type: ShaderStage, gen_debug: boolean, spirv_version?: SpirvVersion): Uint32Array; 12 | } 13 | 14 | export default function(): Promise; 15 | -------------------------------------------------------------------------------- /docs/assets/js/6.ec474eac.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{432:function(e,t,n){"use strict";n.r(t),n.d(t,"conf",(function(){return o})),n.d(t,"language",(function(){return s}));var o={comments:{lineComment:"#"}},s={defaultToken:"keyword",ignoreCase:!0,tokenPostfix:".azcli",str:/[^#\s]/,tokenizer:{root:[{include:"@comment"},[/\s-+@str*\s*/,{cases:{"@eos":{token:"key.identifier",next:"@popall"},"@default":{token:"key.identifier",next:"@type"}}}],[/^-+@str*\s*/,{cases:{"@eos":{token:"key.identifier",next:"@popall"},"@default":{token:"key.identifier",next:"@type"}}}]],type:[{include:"@comment"},[/-+@str*\s*/,{cases:{"@eos":{token:"key.identifier",next:"@popall"},"@default":"key.identifier"}}],[/@str+\s*/,{cases:{"@eos":{token:"string",next:"@popall"},"@default":"string"}}]],comment:[[/#.*$/,{cases:{"@eos":{token:"comment",next:"@popall"}}}]]}}}}]); -------------------------------------------------------------------------------- /docs/typescript.worker.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) Microsoft Corporation. All rights reserved. 3 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use 4 | this file except in compliance with the License. You may obtain a copy of the 5 | License at http://www.apache.org/licenses/LICENSE-2.0 6 | 7 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 8 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED 9 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, 10 | MERCHANTABLITY OR NON-INFRINGEMENT. 11 | 12 | See the Apache Version 2.0 License for specific language governing permissions 13 | and limitations under the License. 14 | ***************************************************************************** */ 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgpu-playground", 3 | "version": "0.0.1", 4 | "description": "WebGPU Playground", 5 | "scripts": { 6 | "demo:dev": "demosify --serve", 7 | "demo:prod": "demosify --prod", 8 | "dev": "npm run demo:dev", 9 | "start": "npm run demo:dev", 10 | "build": "npm run demo:prod", 11 | "pub": "npm run demo:prod" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/06wj/WebGPU-Playground.git" 16 | }, 17 | "keywords": [ 18 | "WebGPU", 19 | "Playground" 20 | ], 21 | "author": "06wj", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/06wj/WebGPU-Playground/issues" 25 | }, 26 | "homepage": "https://github.com/06wj/WebGPU-Playground#readme", 27 | "devDependencies": { 28 | "@demosify/core": "^0.6.0" 29 | }, 30 | "dependencies": { 31 | "@babel/standalone": "^7.9.6", 32 | "@webgpu/glslang": "^0.0.15", 33 | "hilo3d": "^1.13.47" 34 | }, 35 | "engines": { 36 | "node": ">=0.10.3 <15" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demos/commonConfig.js: -------------------------------------------------------------------------------- 1 | export const getConfig = async () => { 2 | const [htmlCode, cssCode] = await Promise.all([ 3 | import ('!raw-loader!~/index.html'), 4 | import ('!raw-loader!~/style.css'), 5 | ]); 6 | 7 | return { 8 | javascript: { 9 | code: '', 10 | transformer: 'javascript', 11 | transform(code) { 12 | return `(async ()=>{ 13 | ${code} 14 | })();`; 15 | }, 16 | visible: true 17 | }, 18 | html: { 19 | code: htmlCode, 20 | transformer: 'html', 21 | visible: true 22 | }, 23 | css: { 24 | code: cssCode, 25 | transformer: 'css', 26 | visible: false 27 | }, 28 | foldBoxes:['html'], 29 | packages: { 30 | js: [ 31 | './libs/helpers.js', 32 | './libs/hilo3d/Hilo3d.js', 33 | './libs/gl-matrix/gl-matrix-min.js', 34 | ] 35 | } 36 | } 37 | }; -------------------------------------------------------------------------------- /docs/assets/js/19.a2f9059f.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[19],{444:function(e,n,s){"use strict";s.r(n),s.d(n,"conf",(function(){return o})),s.d(n,"language",(function(){return t}));var o={comments:{lineComment:"#"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]},t={defaultToken:"",tokenPostfix:".ini",escapes:/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,tokenizer:{root:[[/^\[[^\]]*\]/,"metatag"],[/(^\w+)(\s*)(\=)/,["key","","delimiter"]],{include:"@whitespace"},[/\d+/,"number"],[/"([^"\\]|\\.)*$/,"string.invalid"],[/'([^'\\]|\\.)*$/,"string.invalid"],[/"/,"string",'@string."'],[/'/,"string","@string.'"]],whitespace:[[/[ \t\r\n]+/,""],[/^\s*[#;].*$/,"comment"]],string:[[/[^\\"']+/,"string"],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/["']/,{cases:{"$#==$S2":{token:"string",next:"@pop"},"@default":"string"}}]]}}}}]); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 06wj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/assets/js/65.20d7a99a.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[65],{485:function(n,e,t){"use strict";t.r(e),e.default="const canvas = document.querySelector('#canvas');\ncanvas.width = canvas.height = 500;\n\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\n\nconst context = canvas.getContext('webgpu');\n\nconst swapChainFormat = navigator.gpu.getPreferredCanvasFormat();\n\nconst swapChain = context.configure({\n device,\n format: swapChainFormat,\n alphaMode: \"opaque\",\n});\n\nfunction render() {\n const commandEncoder = device.createCommandEncoder({});\n const textureView = context.getCurrentTexture().createView();\n\n const renderPassDescriptor = {\n colorAttachments: [{\n view: textureView,\n loadOp:'clear',\n storeOp: 'store',\n clearValue: {\n r: Math.random(),\n g: Math.random(),\n b: Math.random(),\n a: 1.0\n },\n }],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n}\n\nconst ticker = new Hilo3d.Ticker(60);\nticker.start();\nticker.interval(() => {\n render();\n}, 500);"}}]); -------------------------------------------------------------------------------- /demos/Samples/HelloCanvas/index.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('#canvas'); 2 | canvas.width = canvas.height = 500; 3 | 4 | const adapter = await navigator.gpu.requestAdapter(); 5 | const device = await adapter.requestDevice(); 6 | 7 | 8 | const context = canvas.getContext('webgpu'); 9 | 10 | const swapChainFormat = navigator.gpu.getPreferredCanvasFormat(); 11 | 12 | const swapChain = context.configure({ 13 | device, 14 | format: swapChainFormat, 15 | alphaMode: "opaque", 16 | }); 17 | 18 | function render() { 19 | const commandEncoder = device.createCommandEncoder({}); 20 | const textureView = context.getCurrentTexture().createView(); 21 | 22 | const renderPassDescriptor = { 23 | colorAttachments: [{ 24 | view: textureView, 25 | loadOp:'clear', 26 | storeOp: 'store', 27 | clearValue: { 28 | r: Math.random(), 29 | g: Math.random(), 30 | b: Math.random(), 31 | a: 1.0 32 | }, 33 | }], 34 | }; 35 | 36 | const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); 37 | passEncoder.end(); 38 | 39 | device.queue.submit([commandEncoder.finish()]); 40 | } 41 | 42 | const ticker = new Hilo3d.Ticker(60); 43 | ticker.start(); 44 | ticker.interval(() => { 45 | render(); 46 | }, 500); -------------------------------------------------------------------------------- /docs/assets/js/11.42a9fe47.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{437:function(t,r,e){"use strict";e.r(r),e.d(r,"conf",(function(){return s})),e.d(r,"language",(function(){return n}));var s={brackets:[],autoClosingPairs:[],surroundingPairs:[]},n={keywords:[],typeKeywords:[],tokenPostfix:".csp",operators:[],symbols:/[=>"]],autoClosingPairs:[{open:"<",close:">"},{open:"'",close:"'"},{open:'"',close:'"'}],surroundingPairs:[{open:"<",close:">"},{open:"'",close:"'"},{open:'"',close:'"'}]},o={defaultToken:"",tokenPostfix:".xml",ignoreCase:!0,qualifiedName:/(?:[\w\.\-]+:)?[\w\.\-]+/,tokenizer:{root:[[/[^<&]+/,""],{include:"@whitespace"},[/(<)(@qualifiedName)/,[{token:"delimiter"},{token:"tag",next:"@tag"}]],[/(<\/)(@qualifiedName)(\s*)(>)/,[{token:"delimiter"},{token:"tag"},"",{token:"delimiter"}]],[/(<\?)(@qualifiedName)/,[{token:"delimiter"},{token:"metatag",next:"@tag"}]],[/(<\!)(@qualifiedName)/,[{token:"delimiter"},{token:"metatag",next:"@tag"}]],[/<\!\[CDATA\[/,{token:"delimiter.cdata",next:"@cdata"}],[/&\w+;/,"string.escape"]],cdata:[[/[^\]]+/,""],[/\]\]>/,{token:"delimiter.cdata",next:"@pop"}],[/\]/,""]],tag:[[/[ \t\r\n]+/,""],[/(@qualifiedName)(\s*=\s*)("[^"]*"|'[^']*')/,["attribute.name","","attribute.value"]],[/(@qualifiedName)(\s*=\s*)("[^">?\/]*|'[^'>?\/]*)(?=[\?\/]\>)/,["attribute.name","","attribute.value"]],[/(@qualifiedName)(\s*=\s*)("[^">]*|'[^'>]*)/,["attribute.name","","attribute.value"]],[/@qualifiedName/,"attribute.name"],[/\?>/,{token:"delimiter",next:"@pop"}],[/(\/)(>)/,[{token:"tag"},{token:"delimiter",next:"@pop"}]],[/>/,{token:"delimiter",next:"@pop"}]],whitespace:[[/[ \t\r\n]+/,""],[//,{token:"comment",next:"@pop"}],[//,"comment","@pop"],[//,"comment","@pop"],[/[^-]+/,"comment.content"],[/./,"comment.content"]],otherTag:[[/\/?>/,"delimiter","@pop"],[/"([^"]*)"/,"attribute.value"],[/'([^']*)'/,"attribute.value"],[/[\w\-]+/,"attribute.name"],[/=/,"delimiter"],[/[ \t\r\n]+/]],script:[[/type/,"attribute.name","@scriptAfterType"],[/"([^"]*)"/,"attribute.value"],[/'([^']*)'/,"attribute.value"],[/[\w\-]+/,"attribute.name"],[/=/,"delimiter"],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/(<\/)(script\s*)(>)/,["delimiter","tag",{token:"delimiter",next:"@pop"}]]],scriptAfterType:[[/=/,"delimiter","@scriptAfterTypeEquals"],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptAfterTypeEquals:[[/"([^"]*)"/,{token:"attribute.value",switchTo:"@scriptWithCustomType.$1"}],[/'([^']*)'/,{token:"attribute.value",switchTo:"@scriptWithCustomType.$1"}],[/>/,{token:"delimiter",next:"@scriptEmbedded",nextEmbedded:"text/javascript"}],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptWithCustomType:[[/>/,{token:"delimiter",next:"@scriptEmbedded.$S2",nextEmbedded:"$S2"}],[/"([^"]*)"/,"attribute.value"],[/'([^']*)'/,"attribute.value"],[/[\w\-]+/,"attribute.name"],[/=/,"delimiter"],[/[ \t\r\n]+/],[/<\/script\s*>/,{token:"@rematch",next:"@pop"}]],scriptEmbedded:[[/<\/script/,{token:"@rematch",next:"@pop",nextEmbedded:"@pop"}],[/[^<]+/,""]],style:[[/type/,"attribute.name","@styleAfterType"],[/"([^"]*)"/,"attribute.value"],[/'([^']*)'/,"attribute.value"],[/[\w\-]+/,"attribute.name"],[/=/,"delimiter"],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/(<\/)(style\s*)(>)/,["delimiter","tag",{token:"delimiter",next:"@pop"}]]],styleAfterType:[[/=/,"delimiter","@styleAfterTypeEquals"],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleAfterTypeEquals:[[/"([^"]*)"/,{token:"attribute.value",switchTo:"@styleWithCustomType.$1"}],[/'([^']*)'/,{token:"attribute.value",switchTo:"@styleWithCustomType.$1"}],[/>/,{token:"delimiter",next:"@styleEmbedded",nextEmbedded:"text/css"}],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleWithCustomType:[[/>/,{token:"delimiter",next:"@styleEmbedded.$S2",nextEmbedded:"$S2"}],[/"([^"]*)"/,"attribute.value"],[/'([^']*)'/,"attribute.value"],[/[\w\-]+/,"attribute.name"],[/=/,"delimiter"],[/[ \t\r\n]+/],[/<\/style\s*>/,{token:"@rematch",next:"@pop"}]],styleEmbedded:[[/<\/style/,{token:"@rematch",next:"@pop",nextEmbedded:"@pop"}],[/[^<]+/,""]]}}}}]); -------------------------------------------------------------------------------- /docs/assets/js/72.ba018b44.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[72],{492:function(n,e,t){"use strict";t.r(e),e.default="const canvas = document.querySelector('#canvas');\ncanvas.width = canvas.height = 500;\ncanvas.style = 'width:500px;height:500px';\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\n\nconst vs = `\n struct VertexOutput {\n @builtin(position) position : vec4,\n @location(0) v_color : vec3,\n @location(1) v_uv : vec2\n };\n\n @vertex\n fn main(@location(0) a_position : vec2, \n @location(1) a_color : vec3,\n @location(2) a_uv : vec2) -> VertexOutput {\n var output : VertexOutput;\n output.position = vec4(a_position, 0.0, 1.0);\n output.v_color = a_color;\n output.v_uv = a_uv;\n return output;\n }\n`;\n\nconst fs = `\n @group(0) @binding(0) var u_sampler: sampler;\n @group(0) @binding(1) var u_texture: texture_2d;\n\n @fragment\n fn main(@location(0) v_color: vec3,\n @location(1) v_uv: vec2) -> @location(0) vec4 {\n var fragColor = textureSample(u_texture, u_sampler, v_uv);\n fragColor = fragColor * vec4(v_color, 1.0);\n return fragColor;\n }\n`;\n\nconst context = canvas.getContext('webgpu');\n\nconst swapChainFormat = navigator.gpu.getPreferredCanvasFormat();\n\nconst swapChain = context.configure({\n device,\n format: swapChainFormat,\n alphaMode: \"opaque\",\n});\n\nconst verticesData = new Float32Array([\n //position color uv\n -0.8, -0.8, 1, 0, 0, 0, 0,\n -0.8, 0.8, 0, 1, 0, 0, 1,\n 0.8, -0.8, 1, 0, 1, 1, 0,\n 0.8, 0.8, 0, 0, 1, 1, 1\n]);\nconst verticesBuffer = device.createBuffer({\n size: verticesData.byteLength,\n usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,\n mappedAtCreation: true\n});\nnew Float32Array(verticesBuffer.getMappedRange()).set(verticesData);\nverticesBuffer.unmap();\n\nconst texture = await helpers.createTextureFromImage(device, './images/hilo.png', GPUTextureUsage.TEXTURE_BINDING);\nconst sampler = device.createSampler({\n magFilter: 'linear',\n minFilter: 'linear',\n});\n\nconst bindGroupLayout = device.createBindGroupLayout({\n entries: [{\n binding: 0,\n visibility: GPUShaderStage.FRAGMENT,\n sampler: {}\n }, {\n binding: 1,\n visibility: GPUShaderStage.FRAGMENT,\n texture: {}\n }]\n});\n\nconst uniformBindGroup = device.createBindGroup({\n layout: bindGroupLayout,\n entries: [{\n binding: 0,\n resource: sampler,\n }, {\n binding: 1,\n resource: texture.createView(),\n }],\n});\n\nconst pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });\n\nconst pipeline = device.createRenderPipeline({\n layout: pipelineLayout,\n vertex: {\n module: device.createShaderModule({\n code: vs\n }),\n entryPoint: 'main',\n buffers: [{\n arrayStride: 7 * 4,\n attributes:[{\n shaderLocation: 0,\n offset: 0,\n format: 'float32x2'\n },{\n shaderLocation: 1,\n offset: 2 * 4,\n format: 'float32x3'\n },{\n shaderLocation: 2,\n offset: 5 * 4,\n format: 'float32x2'\n }]\n }]\n },\n fragment: {\n module: device.createShaderModule({\n code: fs\n }),\n entryPoint: 'main',\n targets: [{\n format: swapChainFormat\n }]\n },\n primitive: {\n topology: 'triangle-strip',\n stripIndexFormat:'uint16',\n },\n});\n\nconst renderPassDescriptor = {\n colorAttachments: [{\n view: null,\n loadOp: 'clear',\n storeOp: 'store',\n clearValue: {\n r: 0,\n g: 0,\n b: 0,\n a: 1,\n }\n }],\n}; \n\nfunction render() {\n renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView();\n \n const commandEncoder = device.createCommandEncoder({});\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.setBindGroup(0, uniformBindGroup);\n passEncoder.setVertexBuffer(0, verticesBuffer);\n passEncoder.draw(4, 1, 0, 0);\n passEncoder.end();\n\n device.queue.submit([commandEncoder.finish()]);\n}\n\nconst ticker = new Hilo3d.Ticker(60);\nticker.start();\nticker.addTick({\n tick(){\n render();\n }\n});"}}]); -------------------------------------------------------------------------------- /docs/assets/js/35.b3c73878.chunk.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[35],{459:function(e,t,n){"use strict";n.r(t),n.d(t,"conf",(function(){return o})),n.d(t,"language",(function(){return a}));var o={comments:{lineComment:"//"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:'"',close:'"',notIn:["string","comment"]},{open:"'",close:"'",notIn:["string","comment"]},{open:"{",close:"}",notIn:["string","comment"]},{open:"[",close:"]",notIn:["string","comment"]},{open:"(",close:")",notIn:["string","comment"]}],folding:{offSide:!0}},a={defaultToken:"",tokenPostfix:".pug",ignoreCase:!0,brackets:[{token:"delimiter.curly",open:"{",close:"}"},{token:"delimiter.array",open:"[",close:"]"},{token:"delimiter.parenthesis",open:"(",close:")"}],keywords:["append","block","case","default","doctype","each","else","extends","for","if","in","include","mixin","typeof","unless","var","when"],tags:["a","abbr","acronym","address","area","article","aside","audio","b","base","basefont","bdi","bdo","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","tracks","tt","u","ul","video","wbr"],symbols:/[\+\-\*\%\&\|\!\=\/\.\,\:]+/,escapes:/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,tokenizer:{root:[[/^(\s*)([a-zA-Z_-][\w-]*)/,{cases:{"$2@tags":{cases:{"@eos":["","tag"],"@default":["",{token:"tag",next:"@tag.$1"}]}},"$2@keywords":["",{token:"keyword.$2"}],"@default":["",""]}}],[/^(\s*)(#[a-zA-Z_-][\w-]*)/,{cases:{"@eos":["","tag.id"],"@default":["",{token:"tag.id",next:"@tag.$1"}]}}],[/^(\s*)(\.[a-zA-Z_-][\w-]*)/,{cases:{"@eos":["","tag.class"],"@default":["",{token:"tag.class",next:"@tag.$1"}]}}],[/^(\s*)(\|.*)$/,""],{include:"@whitespace"},[/[a-zA-Z_$][\w$]*/,{cases:{"@keywords":{token:"keyword.$0"},"@default":""}}],[/[{}()\[\]]/,"@brackets"],[/@symbols/,"delimiter"],[/\d+\.\d+([eE][\-+]?\d+)?/,"number.float"],[/\d+/,"number"],[/"/,"string",'@string."'],[/'/,"string","@string.'"]],tag:[[/(\.)(\s*$)/,[{token:"delimiter",next:"@blockText.$S2."},""]],[/\s+/,{token:"",next:"@simpleText"}],[/#[a-zA-Z_-][\w-]*/,{cases:{"@eos":{token:"tag.id",next:"@pop"},"@default":"tag.id"}}],[/\.[a-zA-Z_-][\w-]*/,{cases:{"@eos":{token:"tag.class",next:"@pop"},"@default":"tag.class"}}],[/\(/,{token:"delimiter.parenthesis",next:"@attributeList"}]],simpleText:[[/[^#]+$/,{token:"",next:"@popall"}],[/[^#]+/,{token:""}],[/(#{)([^}]*)(})/,{cases:{"@eos":["interpolation.delimiter","interpolation",{token:"interpolation.delimiter",next:"@popall"}],"@default":["interpolation.delimiter","interpolation","interpolation.delimiter"]}}],[/#$/,{token:"",next:"@popall"}],[/#/,""]],attributeList:[[/\s+/,""],[/(\w+)(\s*=\s*)("|')/,["attribute.name","delimiter",{token:"attribute.value",next:"@value.$3"}]],[/\w+/,"attribute.name"],[/,/,{cases:{"@eos":{token:"attribute.delimiter",next:"@popall"},"@default":"attribute.delimiter"}}],[/\)$/,{token:"delimiter.parenthesis",next:"@popall"}],[/\)/,{token:"delimiter.parenthesis",next:"@pop"}]],whitespace:[[/^(\s*)(\/\/.*)$/,{token:"comment",next:"@blockText.$1.comment"}],[/[ \t\r\n]+/,""],[//,{token:"comment",next:"@pop"}],[/