diff --git a/example/ExampleMassive.js b/example/ExampleMassive.js index 5b35cb7..8ee2600 100644 --- a/example/ExampleMassive.js +++ b/example/ExampleMassive.js @@ -29,7 +29,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo const textures = [ { key: "iChannel0", - source: "assets/noise2 .png", // ms + source: "assets/noise2.png", // ms type: ITexture_1.TextureType.IMAGE, }, { diff --git a/example/ExampleMassive.ts b/example/ExampleMassive.ts index e683c9f..5ec3833 100644 --- a/example/ExampleMassive.ts +++ b/example/ExampleMassive.ts @@ -5,9 +5,7 @@ import { ITexture, TextureType } from "../src/ITexture"; import { rectGeometry } from "./meshes/Rectangle"; import { Scene } from "../src/Scene"; import { Mesh } from "../src/Mesh"; - import { FPS } from 'yy-fps' -import { prismBreakShader } from "./shaders/wglsl/prismBreakShader"; import { flamesShader } from "./shaders/wglsl/flamesShader"; document.addEventListener("DOMContentLoaded", async () => { @@ -24,10 +22,11 @@ document.addEventListener("DOMContentLoaded", async () => { const geometry = new Geometry(device, rectGeometry); + const textures: Array = [ { key: "iChannel0", - source: "assets/noise2 .png", // ms + source: "assets/noise2.png", // ms type: TextureType.IMAGE, }, diff --git a/example/build/comp-bundle.js b/example/build/comp-bundle.js index 2a15750..873222b 100644 --- a/example/build/comp-bundle.js +++ b/example/build/comp-bundle.js @@ -116,7 +116,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo \*********************************/ /***/ ((__unused_webpack_module, exports) => { -eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Uniforms = void 0;\nclass Uniforms {\n constructor(device, canvas) {\n this.device = device;\n this.uniformBuffer = this.device.createBuffer({\n size: 40,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,\n });\n this.uniformBufferArray = new Float32Array([canvas.width, canvas.height, 0, 1]);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset); // time \n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n}\nexports.Uniforms = Uniforms;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/compute/Uniforms.js?"); +eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Uniforms = void 0;\nclass Uniforms {\n constructor(device, canvas) {\n this.device = device;\n this.uniformBuffer = this.device.createBuffer({\n size: 32,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,\n });\n this.uniformBufferArray = new Float32Array([canvas.width, canvas.height, 0, 1]);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset); // time \n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n}\nexports.Uniforms = Uniforms;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/compute/Uniforms.js?"); /***/ }), diff --git a/example/build/massive-bundle.js b/example/build/flames-bundle.js similarity index 75% rename from example/build/massive-bundle.js rename to example/build/flames-bundle.js index 381cd7b..5e2241d 100644 --- a/example/build/massive-bundle.js +++ b/example/build/flames-bundle.js @@ -16,7 +16,7 @@ \***********************************/ /***/ (function(__unused_webpack_module, exports, __webpack_require__) { -eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Geometry_1 = __webpack_require__(/*! ../src/Geometry */ \"./src/Geometry.js\");\nconst Material_1 = __webpack_require__(/*! ../src/Material */ \"./src/Material.js\");\nconst Renderer_1 = __webpack_require__(/*! ../src/Renderer */ \"./src/Renderer.js\");\nconst ITexture_1 = __webpack_require__(/*! ../src/ITexture */ \"./src/ITexture.js\");\nconst Rectangle_1 = __webpack_require__(/*! ./meshes/Rectangle */ \"./example/meshes/Rectangle.js\");\nconst Scene_1 = __webpack_require__(/*! ../src/Scene */ \"./src/Scene.js\");\nconst Mesh_1 = __webpack_require__(/*! ../src/Mesh */ \"./src/Mesh.js\");\nconst yy_fps_1 = __webpack_require__(/*! yy-fps */ \"./node_modules/yy-fps/dist/fps.es.js\");\nconst flamesShader_1 = __webpack_require__(/*! ./shaders/wglsl/flamesShader */ \"./example/shaders/wglsl/flamesShader.js\");\ndocument.addEventListener(\"DOMContentLoaded\", () => __awaiter(void 0, void 0, void 0, function* () {\n const canvas = document.querySelector('canvas');\n const fps = new yy_fps_1.FPS();\n const renderer = new Renderer_1.Renderer(canvas);\n const device = yield renderer.getDevice();\n const scene = new Scene_1.Scene(\"myScene\", device, canvas);\n const material = new Material_1.Material(device, flamesShader_1.flamesShader);\n const geometry = new Geometry_1.Geometry(device, Rectangle_1.rectGeometry);\n const textures = [\n {\n key: \"iChannel0\",\n source: \"assets/noise2 .png\", // ms \n type: ITexture_1.TextureType.IMAGE,\n },\n {\n key: \"iChannel1\",\n source: \"assets/channel1.jpg\",\n type: ITexture_1.TextureType.IMAGE\n },\n ];\n const mesh = new Mesh_1.Mesh(device, geometry, material, [textures[0], textures[1]]);\n yield scene.addAssets(textures);\n scene.addMesh(\"myMesh\", mesh);\n yield renderer.addScene(scene);\n renderer.start(0, 200, (frameNo) => {\n fps.frame();\n });\n}));\n\n\n//# sourceURL=webpack://demolishedwebgpu/./example/ExampleMassive.js?"); +eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Geometry_1 = __webpack_require__(/*! ../src/Geometry */ \"./src/Geometry.js\");\nconst Material_1 = __webpack_require__(/*! ../src/Material */ \"./src/Material.js\");\nconst Renderer_1 = __webpack_require__(/*! ../src/Renderer */ \"./src/Renderer.js\");\nconst ITexture_1 = __webpack_require__(/*! ../src/ITexture */ \"./src/ITexture.js\");\nconst Rectangle_1 = __webpack_require__(/*! ./meshes/Rectangle */ \"./example/meshes/Rectangle.js\");\nconst Scene_1 = __webpack_require__(/*! ../src/Scene */ \"./src/Scene.js\");\nconst Mesh_1 = __webpack_require__(/*! ../src/Mesh */ \"./src/Mesh.js\");\nconst yy_fps_1 = __webpack_require__(/*! yy-fps */ \"./node_modules/yy-fps/dist/fps.es.js\");\nconst flamesShader_1 = __webpack_require__(/*! ./shaders/wglsl/flamesShader */ \"./example/shaders/wglsl/flamesShader.js\");\ndocument.addEventListener(\"DOMContentLoaded\", () => __awaiter(void 0, void 0, void 0, function* () {\n const canvas = document.querySelector('canvas');\n const fps = new yy_fps_1.FPS();\n const renderer = new Renderer_1.Renderer(canvas);\n const device = yield renderer.getDevice();\n const scene = new Scene_1.Scene(\"myScene\", device, canvas);\n const material = new Material_1.Material(device, flamesShader_1.flamesShader);\n const geometry = new Geometry_1.Geometry(device, Rectangle_1.rectGeometry);\n const textures = [\n {\n key: \"iChannel0\",\n source: \"assets/noise2.png\", // ms \n type: ITexture_1.TextureType.IMAGE,\n },\n {\n key: \"iChannel1\",\n source: \"assets/channel1.jpg\",\n type: ITexture_1.TextureType.IMAGE\n },\n ];\n const mesh = new Mesh_1.Mesh(device, geometry, material, [textures[0], textures[1]]);\n yield scene.addAssets(textures);\n scene.addMesh(\"myMesh\", mesh);\n yield renderer.addScene(scene);\n renderer.start(0, 200, (frameNo) => {\n fps.frame();\n });\n}));\n\n\n//# sourceURL=webpack://demolishedwebgpu/./example/ExampleMassive.js?"); /***/ }), @@ -36,7 +36,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo \***********************************************/ /***/ ((__unused_webpack_module, exports, __webpack_require__) => { -eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.flamesShader = void 0;\nconst Material_1 = __webpack_require__(/*! ../../../src/Material */ \"./src/Material.js\");\nexports.flamesShader = {\n vertex: Material_1.defaultWglslVertex,\n fragment: /* glsl */ `\r\n\r\n\tstruct VertexOutput {\r\n\t\t@builtin(position) pos: vec4,\r\n\t\t@location(0) uv: vec2\r\n\t }; \r\n \r\n\tstruct Uniforms {\r\n\t\tresolution: vec3,\r\n\t\ttime: f32\r\n\t };\r\n\t\r\n\t @group(0) @binding(0) var uniforms: Uniforms;\r\n\t\r\n\t@group(0) @binding(1) var linearSampler: sampler;\r\n\t@group(0) @binding(2) var iChannel0: texture_2d; \r\n\t@group(0) @binding(3) var iChannel1: texture_2d; \r\n\t@group(0) @binding(4) var iChannel2: texture_2d; \r\n\t@group(0) @binding(5) var iChannel3: texture_2d; \r\n\t\r\n\t\r\n\t\t\r\n\t\r\n\tfn sample_texture(tex:texture_2d,uv:vec2) -> vec4{\r\n\t\tlet result:vec4 = textureSample(tex, linearSampler, -uv);\r\n\t\treturn result;\r\n\t} \r\n\t\r\n\t\r\n\t\r\n\r\n\r\n\tfn noise(x: vec3) -> f32 {\r\n\t\tlet p: vec3 = floor(x);\r\n\t\tvar f: vec3 = fract(x);\r\n\t\tf = f * f * (3. - 2. * f);\r\n\t\tlet uv: vec2 = p.xy + vec2(37., 17.) * p.z + f.xy;\r\n\t\tlet rg: vec2 = textureSampleLevel(iChannel0, linearSampler, (uv + 0.5) / 256., f32(0.)).yx;\r\n\t\treturn mix(rg.x, rg.y, f.z);\r\n\t} \r\n\r\n\tfn map(p: vec3) -> vec4 {\r\n\r\n\t\tvar tm = uniforms.time;\r\n\r\n\t\tvar p_var = p;\r\n\t\tlet r: vec3 = p_var;\r\n\t\tp_var.y = p_var.y + (0.6);\r\n\t\tp_var = -4. * p_var / dot(p_var, p_var);\r\n\t\tlet an: f32 = -1. * sin(0.1 * tm + length(p_var.xz) + p_var.y);\r\n\t\tlet co: f32 = cos(an);\r\n\t\tlet si: f32 = sin(an);\r\n\t\tvar pxz = p_var.xz;\r\n\t\tpxz = mat2x2(co, -si, si, co) * p_var.xz;\r\n\t\tp_var.x = pxz.x;\r\n\t\tp_var.z = pxz.y;\r\n\t//\tvar pxz = p_var.xz;\r\n\t\tpxz = p_var.xz + (-1. + 2. * noise(p_var * 1.1));\r\n\t\tp_var.x = pxz.x;\r\n\t\tp_var.z = pxz.y;\r\n\t\tvar f: f32;\r\n\t\tvar q: vec3 = p_var * 0.85 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = 0.5 * noise(q);\r\n\t\tq = q * 2.02 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.25 * noise(q));\r\n\t\tq = q * 2.03 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.125 * noise(q));\r\n\t\tq = q * 2.01 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.0625 * noise(q));\r\n\t\tq = q * 2.02 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.04 * noise(q));\r\n\t\tq = q * 2. - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tlet den: f32 = clamp((-r.y - 0.6 + 4. * f) * 1.2, 0., 1.);\r\n\r\n\t\tvar col: vec3 = 1.2 * mix(vec3(1., 0.8, 0.6), 0.9 * vec3(0.3, 0.2, 0.35), den);\r\n\t\tcol = col + (0.05 * sin(0.05 * q));\r\n\t\tcol = col * (1. - 0.8 * smoothstep(0.6, 1., sin(0.7 * q.x) * sin(0.7 * q.y) * sin(0.7 * q.z)) * vec3(0.6, 1., 0.8));\r\n\t\tcol = col * (1. + 1. * smoothstep(0.5, 1., 1. - length((fract(q.xz * 0.12) - 0.5) / 0.5)) * vec3(1., 0.9, 0.8));\r\n\t\t\r\n\t\t//col = mix(vec3(0.8, 0.32, 0.2), col, clamp((r.y + 0.1) / 1.5, 0., 1.));\r\n\t\t\r\n\t\treturn vec4(col, den);\r\n\t} \r\n\t\r\n\tfn debugImage(invocation_id: vec2) -> vec4 {\r\n\t\t\treturn vec4(1.0,0.,0.,0.5);\r\n\t}\r\n\r\n\tfn mainImage(invocation_id: vec2) -> vec4 {\r\n\r\n\t\tlet mouse: vec4 = vec4(0.0,0.0,0.0,0.);\r\n\t\r\n\t\tlet R: vec2 = uniforms.resolution.xy;\r\n\t\tlet y_inverted_location = vec2(i32(invocation_id.x), i32(R.y) - i32(invocation_id.y));\r\n\t\tlet location = vec2(i32(invocation_id.x), i32(invocation_id.y));\r\n\t\t\r\n\t\tvar fragColor: vec4;\r\n\t\tvar fragCoord = vec2(f32(location.x), f32(location.y) );\r\n\t\r\n\t\tlet q: vec2 = fragCoord.xy / uniforms.resolution.xy;\r\n\t\tlet p: vec2 = (-1. + 2. * q) * vec2(uniforms.resolution.x / uniforms.resolution.y, 1.);\r\n\t\tvar mo: vec2 = mouse.xy / uniforms.resolution.xy;\r\n\t\tif (mouse.w <= 0.00001) { mo = vec2(0.); }\r\n\t\tlet an: f32 = -0.07 * uniforms.time + 3. * mo.x;\r\n\t\tvar ro: vec3 = 4.5 * normalize(vec3(cos(an), 0.5, sin(an)));\r\n\t\tro.y = ro.y + (1.);\r\n\t\tlet ta: vec3 = vec3(0., 0.5, 0.);\r\n\t\tlet cr: f32 = -0.4 * cos(0.02 * uniforms.time);\r\n\t\tlet ww: vec3 = normalize(ta - ro);\r\n\t\tlet uu: vec3 = normalize(cross(vec3(sin(cr), cos(cr), 0.), ww));\r\n\t\tlet vv: vec3 = normalize(cross(ww, uu));\r\n\t\tlet rd: vec3 = normalize(p.x * uu + p.y * vv + 2.5 * ww);\r\n\t\tvar sum: vec4 = vec4(0.);\r\n\t\tlet bg: vec3 = vec3(0.4, 0.5, 0.5) * 1.3;\r\n\t\tvar t: f32 = 0.05 * fract(10.5421 * dot(vec2(0.0149451, 0.038921), fragCoord));\r\n\t\r\n\t\tfor (var i: i32 = 0; i < 128; i = i + 1) {\r\n\t\t\tif (sum.a > 0.99) {\t\r\n\t\t\t\t\tbreak;\r\n\t\t \t}\r\n\r\n\t\t\tlet pos: vec3 = ro + t * rd;\r\n\t\tvar col: vec4 = map(pos);\r\n\t\tcol.a = col.a * (0.5);\r\n\t\tvar colrgb = col.rgb;\r\n\t\tcolrgb = mix(bg, col.rgb, exp(-0.002 * t * t * t)) * col.a;\r\n\t\tcol.r = colrgb.x;\r\n\t\tcol.g = colrgb.y;\r\n\t\tcol.b = colrgb.z;\r\n\t\t\tsum = sum + col * (1. - sum.a);\r\n\t\t\tt = t + (0.05);\r\n\t\t}\r\n\t\r\n\t\t// Ensure bg, sum.xyz, and sum.w are all vec3 values\r\n\t\t// var bg: vec3; // assuming bg is a vec3\r\n\t\t// var sum: vec4; // assuming sum is a vec4\r\n\r\n\t\t// Calculate the mixed value\r\n\t\tvar mixedValue: vec3 = mix(bg, sum.xyz / (0.001 + sum.w), sum.w);\r\n\r\n// \t\tClamp each component individually between 0 and 1\r\n\t\tvar col: vec3 = clamp(mixedValue, vec3(0.0), vec3(1.0));\r\n\r\n\t\t// var col: vec3 = clamp(mix(bg, sum.xyz / (0.001 + sum.w), sum.w), 0., 1.);\r\n\t\tcol = col * col * (3. - 2. * col) * 1.4 - 0.4;\r\n\t\tcol = col * (0.25 + 0.75 * pow(16. * q.x * q.y * (1. - q.x) * (1. - q.y), 0.1));\r\n\t\treturn vec4(col, 1.);\r\n\t} \r\n\t\t\r\n\r\n\r\n\t@fragment\r\n\tfn main_fragment(vert: VertexOutput) -> @location(0) vec4 { \r\n\t\t\r\n\t\treturn mainImage(vert.pos.xy);\r\n\t}\r\n\r\n`\n};\n\n\n//# sourceURL=webpack://demolishedwebgpu/./example/shaders/wglsl/flamesShader.js?"); +eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.flamesShader = void 0;\nconst Material_1 = __webpack_require__(/*! ../../../src/Material */ \"./src/Material.js\");\nexports.flamesShader = {\n vertex: Material_1.defaultWglslVertex,\n fragment: /* glsl */ `\r\n\r\n\tstruct VertexOutput {\r\n\t\t@builtin(position) pos: vec4,\r\n\t\t@location(0) uv: vec2\r\n\t }; \r\n \r\n\tstruct Uniforms {\r\n\t\tresolution: vec3,\r\n\t\ttime: f32,\r\n\t\tmouse: vec4\r\n\t };\r\n\t\r\n\t @group(0) @binding(0) var uniforms: Uniforms;\r\n\t\r\n\t@group(0) @binding(1) var linearSampler: sampler;\r\n\t@group(0) @binding(2) var iChannel0: texture_2d; \r\n\t@group(0) @binding(3) var iChannel1: texture_2d; \r\n\t@group(0) @binding(4) var iChannel2: texture_2d; \r\n\t@group(0) @binding(5) var iChannel3: texture_2d; \r\n\t\r\n\t\r\n\t\t\r\n\t\r\n\tfn sample_texture(tex:texture_2d,uv:vec2) -> vec4{\r\n\t\tlet result:vec4 = textureSample(tex, linearSampler, -uv);\r\n\t\treturn result;\r\n\t} \r\n\t\r\n\t\r\n\t\r\n\r\n\r\n\tfn noise(x: vec3) -> f32 {\r\n\t\tlet p: vec3 = floor(x);\r\n\t\tvar f: vec3 = fract(x);\r\n\t\tf = f * f * (3. - 2. * f);\r\n\t\tlet uv: vec2 = p.xy + vec2(37., 17.) * p.z + f.xy;\r\n\t\tlet rg: vec2 = textureSampleLevel(iChannel0, linearSampler, (uv + 0.5) / 256., f32(0.)).yx;\r\n\t\treturn mix(rg.x, rg.y, f.z);\r\n\t} \r\n\r\n\tfn map(p: vec3) -> vec4 {\r\n\r\n\t\tvar tm = uniforms.time;\r\n\r\n\t\tvar p_var = p;\r\n\t\tlet r: vec3 = p_var;\r\n\t\tp_var.y = p_var.y + (0.6);\r\n\t\tp_var = -4. * p_var / dot(p_var, p_var);\r\n\t\tlet an: f32 = -1. * sin(0.1 * tm + length(p_var.xz) + p_var.y);\r\n\t\tlet co: f32 = cos(an);\r\n\t\tlet si: f32 = sin(an);\r\n\t\tvar pxz = p_var.xz;\r\n\t\tpxz = mat2x2(co, -si, si, co) * p_var.xz;\r\n\t\tp_var.x = pxz.x;\r\n\t\tp_var.z = pxz.y;\r\n\t//\tvar pxz = p_var.xz;\r\n\t\tpxz = p_var.xz + (-1. + 2. * noise(p_var * 1.1));\r\n\t\tp_var.x = pxz.x;\r\n\t\tp_var.z = pxz.y;\r\n\t\tvar f: f32;\r\n\t\tvar q: vec3 = p_var * 0.85 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = 0.5 * noise(q);\r\n\t\tq = q * 2.02 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.25 * noise(q));\r\n\t\tq = q * 2.03 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.125 * noise(q));\r\n\t\tq = q * 2.01 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.0625 * noise(q));\r\n\t\tq = q * 2.02 - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tf = f + (0.04 * noise(q));\r\n\t\tq = q * 2. - vec3(0., 1., 0.) * tm * 0.12;\r\n\t\tlet den: f32 = clamp((-r.y - 0.6 + 4. * f) * 1.2, 0., 1.);\r\n\r\n\t\tvar col: vec3 = 1.2 * mix(vec3(1., 0.8, 0.6), 0.9 * vec3(0.3, 0.2, 0.35), den);\r\n\t\tcol = col + (0.05 * sin(0.05 * q));\r\n\t\tcol = col * (1. - 0.8 * smoothstep(0.6, 1., sin(0.7 * q.x) * sin(0.7 * q.y) * sin(0.7 * q.z)) * vec3(0.6, 1., 0.8));\r\n\t\tcol = col * (1. + 1. * smoothstep(0.5, 1., 1. - length((fract(q.xz * 0.12) - 0.5) / 0.5)) * vec3(1., 0.9, 0.8));\r\n\t\t\r\n\t\t//col = mix(vec3(0.8, 0.32, 0.2), col, clamp((r.y + 0.1) / 1.5, 0., 1.));\r\n\t\t\r\n\t\treturn vec4(col, den);\r\n\t} \r\n\t\r\n\tfn debugImage(invocation_id: vec2) -> vec4 {\r\n\t\t\treturn vec4(1.0,0.,0.,0.5);\r\n\t}\r\n\r\n\tfn mainImage(invocation_id: vec2) -> vec4 {\r\n\r\n\t\tlet mouse: vec4 = uniforms.mouse;\r\n\t\r\n\t\tlet R: vec2 = uniforms.resolution.xy;\r\n\t\tlet y_inverted_location = vec2(i32(invocation_id.x), i32(R.y) - i32(invocation_id.y));\r\n\t\tlet location = vec2(i32(invocation_id.x), i32(invocation_id.y));\r\n\t\t\r\n\t\tvar fragColor: vec4;\r\n\t\tvar fragCoord = vec2(f32(location.x), f32(location.y) );\r\n\t\r\n\t\tlet q: vec2 = fragCoord.xy / uniforms.resolution.xy;\r\n\t\tlet p: vec2 = (-1. + 2. * q) * vec2(uniforms.resolution.x / uniforms.resolution.y, 1.);\r\n\t\tvar mo: vec2 = mouse.xy / uniforms.resolution.xy;\r\n\t\t\r\n\t\t//if (mouse.w <= 0.00001) { mo = vec2(0.); }\r\n\r\n\t\tlet an: f32 = -0.07 * uniforms.time + 3. * mo.x;\r\n\t\tvar ro: vec3 = 4.5 * normalize(vec3(cos(an), 0.5, sin(an)));\r\n\t\tro.y = ro.y + (1.);\r\n\t\tlet ta: vec3 = vec3(0., 0.5, 0.);\r\n\t\tlet cr: f32 = -0.4 * cos(0.02 * uniforms.time);\r\n\t\tlet ww: vec3 = normalize(ta - ro);\r\n\t\tlet uu: vec3 = normalize(cross(vec3(sin(cr), cos(cr), 0.), ww));\r\n\t\tlet vv: vec3 = normalize(cross(ww, uu));\r\n\t\tlet rd: vec3 = normalize(p.x * uu + p.y * vv + 2.5 * ww);\r\n\t\tvar sum: vec4 = vec4(0.);\r\n\t\tlet bg: vec3 = vec3(0.4, 0.5, 0.5) * 1.3;\r\n\t\tvar t: f32 = 0.05 * fract(10.5421 * dot(vec2(0.0149451, 0.038921), fragCoord));\r\n\t\r\n\t\tfor (var i: i32 = 0; i < 128; i = i + 1) {\r\n\t\t\tif (sum.a > 0.99) {\t\r\n\t\t\t\t\tbreak;\r\n\t\t \t}\r\n\r\n\t\t\tlet pos: vec3 = ro + t * rd;\r\n\t\tvar col: vec4 = map(pos);\r\n\t\tcol.a = col.a * (0.5);\r\n\t\tvar colrgb = col.rgb;\r\n\t\tcolrgb = mix(bg, col.rgb, exp(-0.002 * t * t * t)) * col.a;\r\n\t\tcol.r = colrgb.x;\r\n\t\tcol.g = colrgb.y;\r\n\t\tcol.b = colrgb.z;\r\n\t\t\tsum = sum + col * (1. - sum.a);\r\n\t\t\tt = t + (0.05);\r\n\t\t}\r\n\t\r\n\t\t// Ensure bg, sum.xyz, and sum.w are all vec3 values\r\n\t\t// var bg: vec3; // assuming bg is a vec3\r\n\t\t// var sum: vec4; // assuming sum is a vec4\r\n\r\n\t\t// Calculate the mixed value\r\n\t\tvar mixedValue: vec3 = mix(bg, sum.xyz / (0.001 + sum.w), sum.w);\r\n\r\n// \t\tClamp each component individually between 0 and 1\r\n\t\tvar col: vec3 = clamp(mixedValue, vec3(0.0), vec3(1.0));\r\n\r\n\t\t// var col: vec3 = clamp(mix(bg, sum.xyz / (0.001 + sum.w), sum.w), 0., 1.);\r\n\t\tcol = col * col * (3. - 2. * col) * 1.4 - 0.4;\r\n\t\tcol = col * (0.25 + 0.75 * pow(16. * q.x * q.y * (1. - q.x) * (1. - q.y), 0.1));\r\n\t\treturn vec4(col, 1.);\r\n\t} \r\n\t\t\r\n\r\n\r\n\t@fragment\r\n\tfn main_fragment(vert: VertexOutput) -> @location(0) vec4 { \r\n\t\t\r\n\t\treturn mainImage(vert.pos.xy);\r\n\t}\r\n\r\n`\n};\n\n\n//# sourceURL=webpack://demolishedwebgpu/./example/shaders/wglsl/flamesShader.js?"); /***/ }), @@ -96,7 +96,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument \**********************/ /***/ (function(__unused_webpack_module, exports, __webpack_require__) { -eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Scene = void 0;\nconst TextureLoader_1 = __webpack_require__(/*! ./TextureLoader */ \"./src/TextureLoader.js\");\nclass Scene {\n getMesh(index = 0) {\n return Array.from(this.meshes.values())[index];\n }\n setDimensions(width, height, dpr = 0) {\n this.setUniforms([width, height, dpr], 0);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset); // time \n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n constructor(key, device, canvas) {\n this.key = key;\n this.device = device;\n this.canvas = canvas;\n this.meshes = new Map();\n this.textures = new Array();\n this.bindingGroupEntrys = new Array();\n const dpr = window.devicePixelRatio || 1;\n this.uniformBuffer = this.device.createBuffer({\n size: 40,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST,\n });\n this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0]);\n this.updateUniformBuffer();\n }\n getBindingGroupEntrys() {\n const bindingGroupEntrys = [];\n bindingGroupEntrys.push({\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n });\n // todo: cache the samplers passed + default sampler ( linearSampler)\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n // add the GPUSampler\n bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + 2,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + 2,\n resource: this.device.importExternalTexture({ source: t.data }),\n };\n }\n bindingGroupEntrys.push(entry);\n });\n return bindingGroupEntrys;\n }\n addAssets(textures, samplers) {\n return __awaiter(this, void 0, void 0, function* () {\n for (let i = 0; i < textures.length; i++) {\n const texture = textures[i];\n if (texture.type == 0) {\n this.textures.push({ type: 0, data: yield TextureLoader_1.TextureLoader.createImageTexture(this.device, texture) });\n }\n else\n this.textures.push({ type: 1, data: yield TextureLoader_1.TextureLoader.createVideoTextue(this.device, texture) });\n }\n this.bindingGroupEntrys = [{\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n }];\n let textureBindingOffset = (samplers ? samplers.length : 0);\n if (textures.length > 0 && !samplers) {\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n this.bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n textureBindingOffset = 2;\n }\n else {\n samplers.forEach((value, index) => {\n const sampler = this.device.createSampler(value);\n this.bindingGroupEntrys.push({\n binding: index + 1,\n resource: sampler\n });\n textureBindingOffset++;\n });\n }\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + textureBindingOffset,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + textureBindingOffset,\n resource: this.device.importExternalTexture({ source: t.data })\n };\n }\n this.bindingGroupEntrys.push(entry);\n });\n });\n }\n addMesh(key, mesh) {\n this.meshes.set(key, mesh);\n }\n removeMesh(key) {\n return this.meshes.delete(key);\n }\n}\nexports.Scene = Scene;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/Scene.js?"); +eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Scene = void 0;\nconst TextureLoader_1 = __webpack_require__(/*! ./TextureLoader */ \"./src/TextureLoader.js\");\nclass Scene {\n getMesh(index = 0) {\n return Array.from(this.meshes.values())[index];\n }\n setDimensions(width, height, dpr = 0) {\n this.setUniforms([width, height, dpr], 0);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset);\n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n constructor(key, device, canvas) {\n this.key = key;\n this.device = device;\n this.canvas = canvas;\n this.meshes = new Map();\n this.textures = new Array();\n this.bindingGroupEntrys = new Array();\n const dpr = window.devicePixelRatio || 1;\n this.uniformBuffer = this.device.createBuffer({\n size: 60,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST,\n });\n this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0, 0, 0, 0, 0, 0]);\n canvas.addEventListener(\"mousemove\", (evt) => {\n // if(evt.button){\n const rect = canvas.getBoundingClientRect();\n const x = evt.clientX - rect.left;\n const y = evt.clientY - rect.top;\n //this.mouse = {x: x, y: y,z: evt.button,a:0};\n this.setUniforms([x, y, evt.button, 0], 4); // time\n // this.updateUniformBuffer();\n // console.log([x,y,evt.button,0]);\n // }\n });\n this.updateUniformBuffer();\n }\n getBindingGroupEntrys() {\n const bindingGroupEntrys = [];\n bindingGroupEntrys.push({\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n });\n // todo: cache the samplers passed + default sampler ( linearSampler)\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n // add the GPUSampler\n bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + 2,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + 2,\n resource: this.device.importExternalTexture({ source: t.data }),\n };\n }\n bindingGroupEntrys.push(entry);\n });\n return bindingGroupEntrys;\n }\n addAssets(textures, samplers) {\n return __awaiter(this, void 0, void 0, function* () {\n for (let i = 0; i < textures.length; i++) {\n const texture = textures[i];\n if (texture.type == 0) {\n this.textures.push({ type: 0, data: yield TextureLoader_1.TextureLoader.createImageTexture(this.device, texture) });\n }\n else\n this.textures.push({ type: 1, data: yield TextureLoader_1.TextureLoader.createVideoTextue(this.device, texture) });\n }\n this.bindingGroupEntrys = [{\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n }];\n let textureBindingOffset = (samplers ? samplers.length : 0);\n if (textures.length > 0 && !samplers) {\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n this.bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n textureBindingOffset = 2;\n }\n else {\n samplers.forEach((value, index) => {\n const sampler = this.device.createSampler(value);\n this.bindingGroupEntrys.push({\n binding: index + 1,\n resource: sampler\n });\n textureBindingOffset++;\n });\n }\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + textureBindingOffset,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + textureBindingOffset,\n resource: this.device.importExternalTexture({ source: t.data })\n };\n }\n this.bindingGroupEntrys.push(entry);\n });\n });\n }\n addMesh(key, mesh) {\n this.meshes.set(key, mesh);\n }\n removeMesh(key) {\n return this.meshes.delete(key);\n }\n}\nexports.Scene = Scene;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/Scene.js?"); /***/ }), diff --git a/example/build/frag-bundle.js b/example/build/frag-bundle.js index f0f1e95..9e68af0 100644 --- a/example/build/frag-bundle.js +++ b/example/build/frag-bundle.js @@ -96,7 +96,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument \**********************/ /***/ (function(__unused_webpack_module, exports, __webpack_require__) { -eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Scene = void 0;\nconst TextureLoader_1 = __webpack_require__(/*! ./TextureLoader */ \"./src/TextureLoader.js\");\nclass Scene {\n getMesh(index = 0) {\n return Array.from(this.meshes.values())[index];\n }\n setDimensions(width, height, dpr = 0) {\n this.setUniforms([width, height, dpr], 0);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset); // time \n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n constructor(key, device, canvas) {\n this.key = key;\n this.device = device;\n this.canvas = canvas;\n this.meshes = new Map();\n this.textures = new Array();\n this.bindingGroupEntrys = new Array();\n const dpr = window.devicePixelRatio || 1;\n this.uniformBuffer = this.device.createBuffer({\n size: 40,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST,\n });\n this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0]);\n this.updateUniformBuffer();\n }\n getBindingGroupEntrys() {\n const bindingGroupEntrys = [];\n bindingGroupEntrys.push({\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n });\n // todo: cache the samplers passed + default sampler ( linearSampler)\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n // add the GPUSampler\n bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + 2,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + 2,\n resource: this.device.importExternalTexture({ source: t.data }),\n };\n }\n bindingGroupEntrys.push(entry);\n });\n return bindingGroupEntrys;\n }\n addAssets(textures, samplers) {\n return __awaiter(this, void 0, void 0, function* () {\n for (let i = 0; i < textures.length; i++) {\n const texture = textures[i];\n if (texture.type == 0) {\n this.textures.push({ type: 0, data: yield TextureLoader_1.TextureLoader.createImageTexture(this.device, texture) });\n }\n else\n this.textures.push({ type: 1, data: yield TextureLoader_1.TextureLoader.createVideoTextue(this.device, texture) });\n }\n this.bindingGroupEntrys = [{\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n }];\n let textureBindingOffset = (samplers ? samplers.length : 0);\n if (textures.length > 0 && !samplers) {\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n this.bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n textureBindingOffset = 2;\n }\n else {\n samplers.forEach((value, index) => {\n const sampler = this.device.createSampler(value);\n this.bindingGroupEntrys.push({\n binding: index + 1,\n resource: sampler\n });\n textureBindingOffset++;\n });\n }\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + textureBindingOffset,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + textureBindingOffset,\n resource: this.device.importExternalTexture({ source: t.data })\n };\n }\n this.bindingGroupEntrys.push(entry);\n });\n });\n }\n addMesh(key, mesh) {\n this.meshes.set(key, mesh);\n }\n removeMesh(key) {\n return this.meshes.delete(key);\n }\n}\nexports.Scene = Scene;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/Scene.js?"); +eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Scene = void 0;\nconst TextureLoader_1 = __webpack_require__(/*! ./TextureLoader */ \"./src/TextureLoader.js\");\nclass Scene {\n getMesh(index = 0) {\n return Array.from(this.meshes.values())[index];\n }\n setDimensions(width, height, dpr = 0) {\n this.setUniforms([width, height, dpr], 0);\n }\n setUniforms(values, offset) {\n this.uniformBufferArray.set(values, offset);\n }\n updateUniformBuffer() {\n this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength);\n }\n constructor(key, device, canvas) {\n this.key = key;\n this.device = device;\n this.canvas = canvas;\n this.meshes = new Map();\n this.textures = new Array();\n this.bindingGroupEntrys = new Array();\n const dpr = window.devicePixelRatio || 1;\n this.uniformBuffer = this.device.createBuffer({\n size: 60,\n usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST,\n });\n this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0, 0, 0, 0, 0, 0]);\n canvas.addEventListener(\"mousemove\", (evt) => {\n // if(evt.button){\n const rect = canvas.getBoundingClientRect();\n const x = evt.clientX - rect.left;\n const y = evt.clientY - rect.top;\n //this.mouse = {x: x, y: y,z: evt.button,a:0};\n this.setUniforms([x, y, evt.button, 0], 4); // time\n // this.updateUniformBuffer();\n // console.log([x,y,evt.button,0]);\n // }\n });\n this.updateUniformBuffer();\n }\n getBindingGroupEntrys() {\n const bindingGroupEntrys = [];\n bindingGroupEntrys.push({\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n });\n // todo: cache the samplers passed + default sampler ( linearSampler)\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n // add the GPUSampler\n bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + 2,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + 2,\n resource: this.device.importExternalTexture({ source: t.data }),\n };\n }\n bindingGroupEntrys.push(entry);\n });\n return bindingGroupEntrys;\n }\n addAssets(textures, samplers) {\n return __awaiter(this, void 0, void 0, function* () {\n for (let i = 0; i < textures.length; i++) {\n const texture = textures[i];\n if (texture.type == 0) {\n this.textures.push({ type: 0, data: yield TextureLoader_1.TextureLoader.createImageTexture(this.device, texture) });\n }\n else\n this.textures.push({ type: 1, data: yield TextureLoader_1.TextureLoader.createVideoTextue(this.device, texture) });\n }\n this.bindingGroupEntrys = [{\n binding: 0,\n resource: {\n buffer: this.uniformBuffer\n }\n }];\n let textureBindingOffset = (samplers ? samplers.length : 0);\n if (textures.length > 0 && !samplers) {\n const sampler = this.device.createSampler({\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n magFilter: 'linear',\n minFilter: 'nearest'\n });\n this.bindingGroupEntrys.push({\n binding: 1,\n resource: sampler\n });\n textureBindingOffset = 2;\n }\n else {\n samplers.forEach((value, index) => {\n const sampler = this.device.createSampler(value);\n this.bindingGroupEntrys.push({\n binding: index + 1,\n resource: sampler\n });\n textureBindingOffset++;\n });\n }\n this.textures.forEach((t, i) => {\n let entry;\n if (t.type === 0) {\n entry = {\n binding: i + textureBindingOffset,\n resource: t.data.createView()\n };\n }\n else {\n entry = {\n binding: i + textureBindingOffset,\n resource: this.device.importExternalTexture({ source: t.data })\n };\n }\n this.bindingGroupEntrys.push(entry);\n });\n });\n }\n addMesh(key, mesh) {\n this.meshes.set(key, mesh);\n }\n removeMesh(key) {\n return this.meshes.delete(key);\n }\n}\nexports.Scene = Scene;\n\n\n//# sourceURL=webpack://demolishedwebgpu/./src/Scene.js?"); /***/ }), diff --git a/example/index3.html b/example/index3.html index f50f37d..0374fb5 100644 --- a/example/index3.html +++ b/example/index3.html @@ -23,8 +23,8 @@
- +
- + \ No newline at end of file diff --git a/example/shaders/wglsl/flamesShader.js b/example/shaders/wglsl/flamesShader.js index df46a53..81cc74b 100644 --- a/example/shaders/wglsl/flamesShader.js +++ b/example/shaders/wglsl/flamesShader.js @@ -13,7 +13,8 @@ exports.flamesShader = { struct Uniforms { resolution: vec3, - time: f32 + time: f32, + mouse: vec4 }; @group(0) @binding(0) var uniforms: Uniforms; @@ -94,7 +95,7 @@ exports.flamesShader = { fn mainImage(invocation_id: vec2) -> vec4 { - let mouse: vec4 = vec4(0.0,0.0,0.0,0.); + let mouse: vec4 = uniforms.mouse; let R: vec2 = uniforms.resolution.xy; let y_inverted_location = vec2(i32(invocation_id.x), i32(R.y) - i32(invocation_id.y)); @@ -106,7 +107,9 @@ exports.flamesShader = { let q: vec2 = fragCoord.xy / uniforms.resolution.xy; let p: vec2 = (-1. + 2. * q) * vec2(uniforms.resolution.x / uniforms.resolution.y, 1.); var mo: vec2 = mouse.xy / uniforms.resolution.xy; - if (mouse.w <= 0.00001) { mo = vec2(0.); } + + //if (mouse.w <= 0.00001) { mo = vec2(0.); } + let an: f32 = -0.07 * uniforms.time + 3. * mo.x; var ro: vec3 = 4.5 * normalize(vec3(cos(an), 0.5, sin(an))); ro.y = ro.y + (1.); diff --git a/example/shaders/wglsl/flamesShader.ts b/example/shaders/wglsl/flamesShader.ts index c1ab4de..11b385c 100644 --- a/example/shaders/wglsl/flamesShader.ts +++ b/example/shaders/wglsl/flamesShader.ts @@ -13,7 +13,8 @@ export const flamesShader: IMaterialShader = { struct Uniforms { resolution: vec3, - time: f32 + time: f32, + mouse: vec4 }; @group(0) @binding(0) var uniforms: Uniforms; @@ -94,7 +95,7 @@ export const flamesShader: IMaterialShader = { fn mainImage(invocation_id: vec2) -> vec4 { - let mouse: vec4 = vec4(0.0,0.0,0.0,0.); + let mouse: vec4 = uniforms.mouse; let R: vec2 = uniforms.resolution.xy; let y_inverted_location = vec2(i32(invocation_id.x), i32(R.y) - i32(invocation_id.y)); @@ -106,7 +107,9 @@ export const flamesShader: IMaterialShader = { let q: vec2 = fragCoord.xy / uniforms.resolution.xy; let p: vec2 = (-1. + 2. * q) * vec2(uniforms.resolution.x / uniforms.resolution.y, 1.); var mo: vec2 = mouse.xy / uniforms.resolution.xy; - if (mouse.w <= 0.00001) { mo = vec2(0.); } + + //if (mouse.w <= 0.00001) { mo = vec2(0.); } + let an: f32 = -0.07 * uniforms.time + 3. * mo.x; var ro: vec3 = 4.5 * normalize(vec3(cos(an), 0.5, sin(an))); ro.y = ro.y + (1.); diff --git a/package-lock.json b/package-lock.json index 6fccede..4301512 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ }, "devDependencies": { "stanford-dragon": "^1.1.1", - "webpack": "^5.61.0" + "webpack": "^5.91.0" } }, "node_modules/@jridgewell/gen-mapping": { @@ -118,9 +118,9 @@ } }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", - "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", "dev": true, "dependencies": { "@webassemblyjs/helper-numbers": "1.11.6", @@ -140,9 +140,9 @@ "dev": true }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz", - "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", "dev": true }, "node_modules/@webassemblyjs/helper-numbers": { @@ -163,15 +163,15 @@ "dev": true }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz", - "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6" + "@webassemblyjs/wasm-gen": "1.12.1" } }, "node_modules/@webassemblyjs/ieee754": { @@ -199,28 +199,28 @@ "dev": true }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz", - "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-opt": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6", - "@webassemblyjs/wast-printer": "1.11.6" + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz", - "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", "@webassemblyjs/leb128": "1.11.6", @@ -228,24 +228,24 @@ } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz", - "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6" + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz", - "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-api-error": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", @@ -254,12 +254,12 @@ } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz", - "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", "dev": true, "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@xtuc/long": "4.2.2" } }, @@ -406,9 +406,9 @@ "dev": true }, "node_modules/enhanced-resolve": { - "version": "5.15.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", - "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", + "version": "5.16.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", + "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -901,9 +901,9 @@ } }, "node_modules/watchpack": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", - "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", + "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", "dev": true, "dependencies": { "glob-to-regexp": "^0.4.1", @@ -922,34 +922,34 @@ } }, "node_modules/webpack": { - "version": "5.89.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz", - "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==", + "version": "5.91.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", + "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", - "@types/estree": "^1.0.0", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", "acorn-import-assertions": "^1.9.0", - "browserslist": "^4.14.5", + "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.16.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.3.7", - "watchpack": "^2.4.0", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "bin": { diff --git a/package.json b/package.json index 43c0dc8..0fc683b 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,6 @@ }, "devDependencies": { "stanford-dragon": "^1.1.1", - "webpack": "^5.61.0" + "webpack": "^5.91.0" } } diff --git a/src/Scene.js b/src/Scene.js index 27563e0..c497d31 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -19,7 +19,7 @@ class Scene { this.setUniforms([width, height, dpr], 0); } setUniforms(values, offset) { - this.uniformBufferArray.set(values, offset); // time + this.uniformBufferArray.set(values, offset); } updateUniformBuffer() { this.device.queue.writeBuffer(this.uniformBuffer, 0, this.uniformBufferArray.buffer, this.uniformBufferArray.byteOffset, this.uniformBufferArray.byteLength); @@ -33,10 +33,21 @@ class Scene { this.bindingGroupEntrys = new Array(); const dpr = window.devicePixelRatio || 1; this.uniformBuffer = this.device.createBuffer({ - size: 40, + size: 60, usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST, }); - this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0]); + this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0, 0, 0, 0, 0, 0]); + canvas.addEventListener("mousemove", (evt) => { + // if(evt.button){ + const rect = canvas.getBoundingClientRect(); + const x = evt.clientX - rect.left; + const y = evt.clientY - rect.top; + //this.mouse = {x: x, y: y,z: evt.button,a:0}; + this.setUniforms([x, y, evt.button, 0], 4); // time + // this.updateUniformBuffer(); + // console.log([x,y,evt.button,0]); + // } + }); this.updateUniformBuffer(); } getBindingGroupEntrys() { diff --git a/src/Scene.ts b/src/Scene.ts index d9faa65..150558b 100644 --- a/src/Scene.ts +++ b/src/Scene.ts @@ -23,6 +23,8 @@ export class Scene { uniformBufferArray: Float32Array; uniformBuffer: GPUBuffer; + mouse: { x: number; y: number; z: number; a: number; }; + getMesh(index: number = 0): Mesh { return Array.from(this.meshes.values())[index]; } @@ -30,7 +32,8 @@ export class Scene { this.setUniforms([width, height, dpr], 0); } setUniforms(values: ArrayLike, offset: number) { - this.uniformBufferArray.set(values, offset); // time + this.uniformBufferArray.set(values, offset); + } updateUniformBuffer() { this.device.queue.writeBuffer( @@ -49,12 +52,26 @@ export class Scene { const dpr = window.devicePixelRatio || 1; this.uniformBuffer = this.device.createBuffer({ - size: 40, + size: 60, usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST, }); - - this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0]); + this.uniformBufferArray = new Float32Array([this.canvas.width, this.canvas.height, 0, 1.0,0,0,0,0,0]); + + + canvas.addEventListener("mousemove",(evt:MouseEvent) => { + // if(evt.button){ + const rect = canvas.getBoundingClientRect(); + const x = evt.clientX - rect.left; + const y = evt.clientY - rect.top; + //this.mouse = {x: x, y: y,z: evt.button,a:0}; + this.setUniforms([x,y,evt.button,0],4) // time + // this.updateUniformBuffer(); + // console.log([x,y,evt.button,0]); + // } + }); + + this.updateUniformBuffer(); } diff --git a/src/compute/Uniforms.js b/src/compute/Uniforms.js index 3e4a86c..b47f27b 100644 --- a/src/compute/Uniforms.js +++ b/src/compute/Uniforms.js @@ -5,7 +5,7 @@ class Uniforms { constructor(device, canvas) { this.device = device; this.uniformBuffer = this.device.createBuffer({ - size: 40, + size: 32, usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT, }); this.uniformBufferArray = new Float32Array([canvas.width, canvas.height, 0, 1]); diff --git a/src/compute/Uniforms.ts b/src/compute/Uniforms.ts index 048b3e2..1915fcc 100644 --- a/src/compute/Uniforms.ts +++ b/src/compute/Uniforms.ts @@ -6,7 +6,7 @@ export class Uniforms { constructor(public device: GPUDevice, canvas: HTMLCanvasElement) { this.uniformBuffer = this.device.createBuffer({ - size: 40, + size: 32, usage: window.GPUBufferUsage.UNIFORM | window.GPUBufferUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT, }); this.uniformBufferArray = new Float32Array([canvas.width, canvas.height, 0, 1]); diff --git a/webpack.config.js b/webpack.config.js index 92174a7..c66d9d6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,7 @@ module.exports = { entry: { "frag": './example/Example.js', "comp": './example/ExampleCompute.js', - "massive": "./example/ExampleMassive.js" + "flames": "./example/ExampleMassive.js" }, output: { path: __dirname + '/example/build',