glre 0.34.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -98
- package/dist/index.cjs +34 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +104 -178
- package/dist/index.js +35 -31
- package/dist/index.js.map +1 -1
- package/dist/native.cjs +34 -30
- package/dist/native.cjs.map +1 -1
- package/dist/native.d.ts +29 -19
- package/dist/native.js +35 -31
- package/dist/native.js.map +1 -1
- package/dist/react.cjs +34 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +35 -31
- package/dist/react.js.map +1 -1
- package/dist/solid.cjs +34 -30
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.ts +1 -1
- package/dist/solid.js +35 -31
- package/dist/solid.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +13 -6
- package/src/node/core.ts +100 -0
- package/src/node/index.ts +22 -97
- package/src/node/node.ts +28 -20
- package/src/node/scope.ts +7 -13
- package/src/node/types.ts +28 -20
- package/src/node/{code.ts → utils/index.ts} +16 -11
- package/src/node/{infer.ts → utils/infer.ts} +15 -6
- package/src/node/{parse.ts → utils/parse.ts} +44 -41
- package/src/node/{utils.ts → utils/utils.ts} +25 -41
- package/src/types.ts +70 -60
- package/src/utils/helpers.ts +16 -0
- package/src/utils/pipeline.ts +41 -12
- package/src/utils/program.ts +56 -19
- package/src/webgl.ts +91 -37
- package/src/webgpu.ts +77 -47
- /package/src/node/{const.ts → utils/const.ts} +0 -0
package/README.md
CHANGED
|
@@ -114,15 +114,13 @@ npm install glre
|
|
|
114
114
|
|
|
115
115
|
```ts
|
|
116
116
|
import { createRoot } from 'react-dom/client'
|
|
117
|
-
import { useGL, vec4,
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
const App = () => {
|
|
121
|
-
const gl = useGL({ frag })
|
|
117
|
+
import { useGL, vec4, uv } from 'glre/react'
|
|
118
|
+
const Canvas = () => {
|
|
119
|
+
const gl = useGL({ frag: vec4(uv, 0, 1) })
|
|
122
120
|
return <canvas ref={gl.ref} />
|
|
123
121
|
}
|
|
124
122
|
|
|
125
|
-
createRoot(document.getElementById('root')).render(<
|
|
123
|
+
createRoot(document.getElementById('root')).render(<Canvas />)
|
|
126
124
|
```
|
|
127
125
|
|
|
128
126
|
<details>
|
|
@@ -135,15 +133,13 @@ react-native supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre
|
|
|
135
133
|
```ts
|
|
136
134
|
import { GLView } from 'expo-gl'
|
|
137
135
|
import { registerRootComponent } from 'expo'
|
|
138
|
-
import { useGL, vec4,
|
|
139
|
-
const
|
|
140
|
-
|
|
141
|
-
const App = () => {
|
|
142
|
-
const gl = useGL({ frag })
|
|
136
|
+
import { useGL, vec4, uv } from 'glre/native'
|
|
137
|
+
const Canvas = () => {
|
|
138
|
+
const gl = useGL({ frag: vec4(uv, 0, 1) })
|
|
143
139
|
return <GLView style={{ flex: 1 }} onContextCreate={gl.ref} />
|
|
144
140
|
}
|
|
145
141
|
|
|
146
|
-
registerRootComponent(
|
|
142
|
+
registerRootComponent(Canvas)
|
|
147
143
|
```
|
|
148
144
|
|
|
149
145
|
</details>
|
|
@@ -156,15 +152,13 @@ solid js supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre-sol
|
|
|
156
152
|
|
|
157
153
|
```ts
|
|
158
154
|
import { render } from 'solid-js/web'
|
|
159
|
-
import { onGL, vec4,
|
|
160
|
-
const
|
|
161
|
-
|
|
162
|
-
const App = () => {
|
|
163
|
-
const gl = onGL({ frag })
|
|
155
|
+
import { onGL, vec4, uv } from 'glre/solid'
|
|
156
|
+
const Canvas = () => {
|
|
157
|
+
const gl = onGL({ frag: vec4(uv, 0, 1) })
|
|
164
158
|
return <canvas ref={gl.ref} />
|
|
165
159
|
}
|
|
166
160
|
|
|
167
|
-
render(() => <
|
|
161
|
+
render(() => <Canvas />, document.getElementById('root'))
|
|
168
162
|
```
|
|
169
163
|
|
|
170
164
|
</details>
|
|
@@ -176,16 +170,11 @@ esm supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr
|
|
|
176
170
|
</summary>
|
|
177
171
|
|
|
178
172
|
```html
|
|
173
|
+
<canvas id="canvas"></canvas>
|
|
179
174
|
<script type="module">
|
|
180
|
-
import createGL from 'https://esm.sh/glre'
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
function App() {
|
|
184
|
-
const el = document.createElement('canvas')
|
|
185
|
-
createGL({ el, frag }).mount()
|
|
186
|
-
document.body.append(el)
|
|
187
|
-
}
|
|
188
|
-
document.addEventListener('DOMContentLoaded', App)
|
|
175
|
+
import { createGL, vec4, uv } from 'https://esm.sh/glre'
|
|
176
|
+
const el = document.getElementById('canvas')
|
|
177
|
+
createGL({ el, fs: vec4(uv, 0, 1) }).mount()
|
|
189
178
|
</script>
|
|
190
179
|
```
|
|
191
180
|
|
|
@@ -195,113 +184,122 @@ esm supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr
|
|
|
195
184
|
|
|
196
185
|
## Node System
|
|
197
186
|
|
|
198
|
-
glre
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
The node system provides various types and functions that mirror GLSL functionality:
|
|
187
|
+
glre's node system reconstructs shader authoring through TypeScript syntax,
|
|
188
|
+
dissolving the boundary between CPU logic and GPU computation.
|
|
189
|
+
Rather than traditional string-based shader composition,
|
|
190
|
+
this system materializes shaders as abstract syntax trees,
|
|
191
|
+
enabling unprecedented code mobility across WebGL2 and WebGPU architectures.
|
|
205
192
|
|
|
206
193
|
```ts
|
|
207
|
-
//
|
|
208
|
-
|
|
194
|
+
// Shader logic materializes through method chaining
|
|
195
|
+
const fragment = vec4(fract(position.xy.div(iResolution)), 0, 1)
|
|
196
|
+
.mul(uniform(brightness))
|
|
197
|
+
.mix(texture(backgroundMap, uv()), blend)
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
The system operates through proxy objects that capture mathematical operations
|
|
201
|
+
as node graphs, later transpiled to target shader languages.
|
|
202
|
+
This deconstructed approach eliminates the traditional separation
|
|
203
|
+
between shader compilation and runtime execution.
|
|
209
204
|
|
|
210
|
-
|
|
211
|
-
import { position, position, iResolution, iTime } from 'glre'
|
|
205
|
+
### Type System Deconstruction
|
|
212
206
|
|
|
213
|
-
|
|
214
|
-
import { sin, cos, abs, pow, mix, clamp, normalize } from 'glre'
|
|
207
|
+
Traditional shader types dissolve into factory functions that generate node proxies:
|
|
215
208
|
|
|
216
|
-
|
|
217
|
-
|
|
209
|
+
```ts
|
|
210
|
+
// Types emerge from function calls rather than declarations
|
|
211
|
+
const position = vec3(x, y, z) // Becomes position node
|
|
212
|
+
const transform = mat4().mul(modelView) // Matrix composition
|
|
213
|
+
const sampled = texture(map, uv()) // Sampling operation
|
|
218
214
|
```
|
|
219
215
|
|
|
220
|
-
|
|
216
|
+
Each operation generates immutable node structures,
|
|
217
|
+
building computation graphs that exist independently of their eventual compilation target.
|
|
221
218
|
|
|
222
|
-
|
|
219
|
+
### Function Composition Reimagined
|
|
223
220
|
|
|
224
|
-
|
|
225
|
-
import { Fn, vec3, sin, cos, float } from 'glre'
|
|
221
|
+
The `Fn` constructor dissolves function boundaries, creating reusable computation patterns:
|
|
226
222
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
223
|
+
```ts
|
|
224
|
+
// Functions exist as first-class node compositions
|
|
225
|
+
const noise = Fn(([coord]) => {
|
|
226
|
+
return sin(coord.x.mul(12.9898))
|
|
227
|
+
.add(sin(coord.y.mul(78.233)))
|
|
228
|
+
.mul(43758.5453)
|
|
229
|
+
.fract()
|
|
232
230
|
})
|
|
233
231
|
|
|
234
|
-
//
|
|
235
|
-
const
|
|
232
|
+
// Composition becomes transparent
|
|
233
|
+
const surface = noise(position.xz.mul(scale)).mix(noise(position.xz.mul(scale.mul(2))), 0.5)
|
|
236
234
|
```
|
|
237
235
|
|
|
238
|
-
###
|
|
236
|
+
### Control Flow Dissolution
|
|
239
237
|
|
|
240
|
-
|
|
238
|
+
Traditional control structures become node compositions, eliminating imperative sequence:
|
|
241
239
|
|
|
242
240
|
```ts
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
If(position.y.lessThan(0.5), () => {
|
|
249
|
-
color.assign(vec4(0, 1, 0, 1))
|
|
241
|
+
// Conditional logic as expression trees
|
|
242
|
+
If(height.greaterThan(waterLevel), () => {
|
|
243
|
+
return grassTexture.sample(worldUV)
|
|
244
|
+
}).Else(() => {
|
|
245
|
+
return waterTexture.sample(worldUV.add(wave))
|
|
250
246
|
})
|
|
251
247
|
|
|
252
|
-
//
|
|
253
|
-
|
|
248
|
+
// Loops decompose into iteration patterns
|
|
249
|
+
Loop(samples, ({ i }) => {
|
|
250
|
+
accumulator.assign(accumulator.add(sample(position.add(offsets.element(i)))))
|
|
251
|
+
})
|
|
254
252
|
```
|
|
255
253
|
|
|
256
|
-
###
|
|
254
|
+
### Reactive Uniform Architecture
|
|
257
255
|
|
|
258
|
-
|
|
256
|
+
Uniforms transcend static parameter passing, becoming reactive data channels:
|
|
259
257
|
|
|
260
258
|
```ts
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
const
|
|
266
|
-
|
|
267
|
-
// Create a simple pulsing color shader
|
|
268
|
-
const App = () => {
|
|
269
|
-
const gl = useGL({
|
|
270
|
-
fragment: vec4(vec3(uRand), 1.0),
|
|
271
|
-
loop() {
|
|
272
|
-
pulse.set(0.5 + 0.5 * Math.random())
|
|
273
|
-
},
|
|
274
|
-
})
|
|
275
|
-
return <canvas ref={gl.ref} />
|
|
276
|
-
}
|
|
259
|
+
const time = uniform(0) // Creates reactive binding
|
|
260
|
+
const amplitude = uniform(1) // Automatic GPU synchronization
|
|
261
|
+
|
|
262
|
+
// Values flow reactively without explicit updates
|
|
263
|
+
const wave = sin(time.mul(frequency)).mul(amplitude)
|
|
277
264
|
|
|
278
|
-
|
|
265
|
+
// Runtime updates propagate automatically
|
|
266
|
+
time.value = performance.now() / 1000
|
|
279
267
|
```
|
|
280
268
|
|
|
281
|
-
###
|
|
269
|
+
### Attribute Data Streams
|
|
282
270
|
|
|
283
|
-
|
|
271
|
+
Vertex attributes dissolve into data stream abstractions:
|
|
284
272
|
|
|
285
273
|
```ts
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
274
|
+
// Attributes become typed data channels
|
|
275
|
+
const positions = attribute(vertexData) // Raw data binding
|
|
276
|
+
const normals = attribute(normalData) // Parallel stream
|
|
277
|
+
const uvs = attribute(textureCoords) // Coordinate mapping
|
|
278
|
+
|
|
279
|
+
// Streams compose transparently
|
|
280
|
+
const worldPosition = positions.transform(modelMatrix)
|
|
281
|
+
const viewNormal = normals.transform(normalMatrix)
|
|
282
|
+
```
|
|
289
283
|
|
|
290
|
-
|
|
291
|
-
const positions = attribute(-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 0.0)
|
|
284
|
+
### Cross-Platform Transparency
|
|
292
285
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
286
|
+
The system dissolves platform-specific shader languages into unified abstractions.
|
|
287
|
+
WebGL2 GLSL and WebGPU WGSL become implementation details, hidden beneath consistent node operations.
|
|
288
|
+
|
|
289
|
+
```ts
|
|
290
|
+
// Same code generates different targets
|
|
291
|
+
const shader = {
|
|
292
|
+
vertex: worldPosition.transform(projectionMatrix),
|
|
293
|
+
fragment: lighting(worldNormal, worldPosition),
|
|
297
294
|
}
|
|
298
295
|
|
|
299
|
-
|
|
296
|
+
// Backend selection becomes transparent
|
|
297
|
+
// WebGL2: Generates GLSL ES 3.0
|
|
298
|
+
// WebGPU: Generates WGSL
|
|
300
299
|
```
|
|
301
300
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
The node system is designed to work with both WebGL2 and WebGPU, providing a seamless transition path as browsers adopt the new standard. Your shader code written with the node system will automatically compile to the appropriate shading language (GLSL ES 3.0 for WebGL2, WGSL for WebGPU) based on the available renderer.
|
|
301
|
+
This architectural dissolution enables shader code to exist as pure mathematical relationships,
|
|
302
|
+
freed from the constraints of traditional GPU programming models.
|
|
305
303
|
|
|
306
304
|
## PRs
|
|
307
305
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,40 +1,44 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var pe=Object.defineProperty;var At=Object.getOwnPropertyDescriptor;var Ut=Object.getOwnPropertyNames;var It=Object.prototype.hasOwnProperty;var Ot=(e,t)=>{for(var r in t)pe(e,r,{get:t[r],enumerable:!0})},Dt=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Ut(t))!It.call(e,o)&&o!==r&&pe(e,o,{get:()=>t[o],enumerable:!(n=At(t,o))||n.enumerable});return e};var Mt=e=>Dt(pe({},"__esModule",{value:!0}),e);var nn={};Ot(nn,{Fn:()=>Qt,If:()=>jt,Loop:()=>Kt,Return:()=>ft,Switch:()=>Zt,abs:()=>Yr,acos:()=>oo,acosh:()=>po,all:()=>Vr,any:()=>qr,asin:()=>ro,asinh:()=>uo,assign:()=>he,atan:()=>no,atan2:()=>Uo,atanh:()=>fo,attribute:()=>ct,bitcast:()=>Bo,bool:()=>br,builtin:()=>P,bvec2:()=>Gr,bvec3:()=>Nr,bvec4:()=>$r,cbrt:()=>Wo,ceil:()=>Kr,clamp:()=>So,color:()=>Sr,compute:()=>Ee,constant:()=>dt,conversion:()=>b,cos:()=>eo,cosh:()=>io,createGL:()=>Lt,cross:()=>zr,cubeTexture:()=>Or,dFdx:()=>Eo,dFdy:()=>Co,default:()=>on,degrees:()=>Po,difference:()=>ko,distance:()=>Wr,dot:()=>kr,element:()=>ye,equals:()=>Vo,exp:()=>co,exp2:()=>lo,faceforward:()=>qo,float:()=>j,floor:()=>jr,fract:()=>Pe,fragDepth:()=>sr,fragment:()=>Y,frontFacing:()=>nr,function_:()=>p,fwidth:()=>_o,iMouse:()=>Fr,iResolution:()=>ne,iTime:()=>Ar,instanceIndex:()=>or,int:()=>q,inverseSqrt:()=>go,isGL:()=>en,isServer:()=>$t,isWebGPUSupported:()=>wt,ivec2:()=>Xr,ivec3:()=>Er,ivec4:()=>Cr,length:()=>Mr,lengthSq:()=>Br,log:()=>xo,log2:()=>mo,mat2:()=>vr,mat3:()=>hr,mat4:()=>yr,max:()=>wo,member:()=>ee,min:()=>$o,mix:()=>Lo,mod:()=>Yo,negate:()=>yo,node:()=>x,normalLocal:()=>dr,normalView:()=>xr,normalWorld:()=>lr,normalize:()=>bo,oneMinus:()=>vo,operator:()=>mt,pointCoord:()=>ur,position:()=>te,positionLocal:()=>pr,positionView:()=>cr,positionWorld:()=>fr,pow:()=>Io,pow2:()=>Oo,pow3:()=>Do,pow4:()=>Mo,radians:()=>Ro,reciprocal:()=>Xo,reflect:()=>Go,refract:()=>No,round:()=>Zr,sampleIndex:()=>ir,sampleMask:()=>ar,sampler2D:()=>Lr,saturate:()=>ho,screenCoordinate:()=>mr,screenUV:()=>Tr,select:()=>er,sign:()=>Hr,sin:()=>Jr,sinh:()=>so,smoothstep:()=>Ao,sqrt:()=>To,step:()=>Fo,struct:()=>Ht,tan:()=>to,tanh:()=>ao,texture:()=>Ir,texture2D:()=>wr,textureSize:()=>Dr,toVar:()=>ve,transformDirection:()=>zo,trunc:()=>Qr,uint:()=>gr,uniform:()=>V,uv:()=>Ur,uvec2:()=>_r,uvec3:()=>Pr,uvec4:()=>Rr,variable:()=>lt,vec2:()=>_e,vec3:()=>Ce,vec4:()=>oe,vertex:()=>H,vertexIndex:()=>re,vertexStage:()=>xt,webgl:()=>Ne,webgpu:()=>$e});module.exports=Mt(nn);var B=require("reev"),ie=require("refr");var z=require("reev");var l={arr:Array.isArray,bol:e=>typeof e=="boolean",str:e=>typeof e=="string",num:e=>typeof e=="number",int:e=>Number.isInteger(e),fun:e=>typeof e=="function",und:e=>typeof e>"u",nul:e=>e===null,set:e=>e instanceof Set,map:e=>e instanceof Map,obj:e=>!!e&&e.constructor.name==="Object",nan:e=>typeof e=="number"&&Number.isNaN(e)};var Fe=e=>e instanceof Float32Array,Z=(e,t,r)=>{e.loading++;let n=new Image;Object.assign(n,{src:t,crossOrigin:"anonymous"}),n.decode().then(()=>{r(n),e.loading--})};var fe={bool:"bool",uint:"u32",int:"i32",float:"f32",bvec2:"vec2<bool>",ivec2:"vec2i",uvec2:"vec2u",vec2:"vec2f",bvec3:"vec3<bool>",ivec3:"vec3i",uvec3:"vec3u",vec3:"vec3f",bvec4:"vec4<bool>",ivec4:"vec4i",uvec4:"vec4u",vec4:"vec4f",color:"color",mat2:"mat2x2f",mat3:"mat3x3f",mat4:"mat4x4f",texture:"texture_2d<f32>",sampler2D:"sampler",struct:"struct"},ce=Object.keys(fe),de=["toBool","toUint","toInt","toFloat","toBvec2","toIvec2","toUvec2","toVec2","toBvec3","toIvec3","toUvec3","toVec3","toBvec4","toIvec4","toUvec4","toVec4","toColor","toMat2","toMat3","toMat4"],le={add:"+",sub:"-",mul:"*",div:"/",mod:"%",equal:"==",notEqual:"!=",lessThan:"<",lessThanEqual:"<=",greaterThan:">",greaterThanEqual:">=",and:"&&",or:"||",bitAnd:"&",bitOr:"|",bitXor:"^",shiftLeft:"<<",shiftRight:">>"},Ae=Object.keys(le),Ue=["dot","distance","length","lengthSq","determinant","luminance","all","any","abs","sign","floor","ceil","round","fract","trunc","sin","cos","tan","asin","acos","atan","sinh","cosh","tanh","asinh","acosh","atanh","exp","exp2","log","log2","sqrt","inverseSqrt","normalize","oneMinus","saturate","negate","reciprocal","dFdx","dFdy","fwidth","degrees","radians","cross","reflect","refract","min","max","mix","clamp","step","smoothstep","pow","atan2","texture","textureLod","textureSize","cubeTexture","faceforward","bitcast","cbrt","difference","equals","pow2","pow3","pow4","transformDirection"],xe={1:"float",2:"vec2",3:"vec3",4:"vec4",9:"mat3",16:"mat4"},Ie={texture:"vec4",cubeTexture:"vec4",textureSize:"vec4",length:"float",lengthSq:"float",distance:"float",dot:"float",all:"bool",any:"bool",cross:"vec3"},Oe={position:"vec4",vertex_index:"uint",instance_index:"uint",front_facing:"bool",frag_depth:"float",sample_index:"uint",sample_mask:"uint",point_coord:"vec2",positionLocal:"vec3",positionWorld:"vec3",positionView:"vec3",normalLocal:"vec3",normalWorld:"vec3",normalView:"vec3",screenCoordinate:"vec2",screenUV:"vec2",gl_FragCoord:"vec4",gl_VertexID:"uint",gl_InstanceID:"uint",gl_FrontFacing:"bool",gl_FragDepth:"float",gl_SampleID:"uint",gl_SampleMask:"uint",gl_PointCoord:"vec2",normal:"vec3",uv:"vec2",color:"vec4"},De=["equal","notEqual","lessThan","lessThanEqual","greaterThan","greaterThanEqual"],Me=["and","or"],Be={position:"gl_FragCoord",vertex_index:"gl_VertexID",instance_index:"gl_InstanceID",front_facing:"gl_FrontFacing",frag_depth:"gl_FragDepth",sample_index:"gl_SampleID",sample_mask:"gl_SampleMask",point_coord:"gl_PointCoord",uv:"gl_FragCoord.xy"};var We=e=>l.str(e)&&/^[xyzwrgbastpq]{1,4}$/.test(e),ke=e=>Ae.includes(e),Ve=e=>Ue.includes(e),qe=e=>de.includes(e),Q=e=>!e||typeof e!="object"?!1:e.isProxy,me=e=>l.str(e)?ce.includes(e):!1,ze=e=>{let t=(e>>16&255)/255,r=(e>>8&255)/255,n=(e&255)/255;return[t,r,n]},Bt=0,_=()=>`x${Bt++}`,Ye=e=>Be[e],L=(e,t)=>l.str(e)?t?.isWebGL?e:fe[e]||e:"",He=e=>le[e]||e,je=e=>{let t=de.indexOf(e);return t!==-1?ce[t]:"float"},Te=(e,t,r=!1,n=!1)=>e.isWebGL?r?o=>e.gl?.attribute?.(t,o):n?o=>e.gl?.texture?.(t,o):o=>e.gl?.uniform?.(t,o):r?o=>e.gl?._attribute?.(t,o):n?o=>e.gl?._texture?.(t,o):o=>e.gl?._uniform?.(t,o),ge=(e,t)=>{if(l.und(e))return;if(!Q(e))return t(e);if(e.type!=="conversion")return;let r=e.props.children?.slice(1).filter(Boolean);r?.length&&t(r)},Ke=e=>(e.code||(e.code={headers:new Map,fragInputs:new Map,vertInputs:new Map,vertOutputs:new Map,vertVaryings:new Map,dependencies:new Map},e.isWebGL)||(e.code.fragInputs.set("position","@builtin(position) position: vec4f"),e.code.vertOutputs.set("position","@builtin(position) position: vec4f")),e),Ze=e=>l.num(e)||l.str(e)&&/^\d+$/.test(e),J=(e,t="",r)=>{e.code?.dependencies?.has(t)||e.code.dependencies.set(t,new Set),me(r)||e.code.dependencies.get(t).add(r)};var Wt=e=>Oe[e],Qe=(e,t,r)=>De.includes(r)||Me.includes(r)?"bool":e===t?e:e==="float"||e==="int"?t:t==="float"||t==="int"?e:e==="mat4"&&t==="vec4"||e==="mat3"&&t==="vec3"||e==="mat2"&&t==="vec2"?t:e,kt=e=>e==="mat4"?"vec4":e==="mat3"?"vec3":e==="mat2"?"vec2":"float",Vt=e=>l.bol(e)?"bool":l.str(e)?"texture":l.num(e)?"float":l.arr(e)?xe[e.length]:"float",be=e=>xe[e],qt=(e,t)=>{if(e.length===0)return"void";let[r]=e;if(l.str(r))return r;let n=X(r,t);for(let o of e.slice(1))if(n!==X(o,t))throw new Error("glre node system error: defined scope return mismatch");return n},zt=e=>Ie[e],Yt=(e,t)=>{let{type:r,props:n}=e,{id:o,children:s=[],inferFrom:a,layout:f}=n,[i,u,d]=s;if(r==="conversion")return i;if(r==="operator")return Qe(X(u,t),X(d,t),i);if(r==="ternary")return Qe(X(u,t),X(d,t),"add");if(r==="builtin")return Wt(o);if(r==="function")return zt(i)||X(u,t);if(r==="define"&&me(f?.type))return f?.type;if(r==="attribute"&&l.arr(i)&&t.gl?.count)return be(i.length/t.gl.count);if(r==="element")return kt(X(i,t));if(r==="member"){if(We(u))return be(u.length);if(Q(i)){let G=i.props.fields[u];if(G)return X(G,t)}return"float"}return a?qt(a,t):X(i,t)},X=(e,t)=>{if(t||(t={}),!Q(e))return Vt(e);if(l.arr(e))return be(e.length);if(t.infers||(t.infers=new WeakMap),t.infers.has(e))return t.infers.get(e);let r=Yt(e,t);return t.infers.set(e,r),r};var U=(e,t)=>e.filter(r=>!l.und(r)&&!l.nul(r)).map(r=>c(r,t)).join(", "),Je=(e,t,r,n)=>{if(e.isWebGL)return`texture(${U(n?[t,r,n]:[t,r],e)})`;let o=c(t,e),s=[o,o+"Sampler",c(r,e)];return n?(s.push(c(n,e)),`textureSampleLevel(${s})`):`textureSample(${s})`},et=(e,t,r,n)=>{let o=`if (${c(t,e)}) {
|
|
2
2
|
${c(r,e)}
|
|
3
|
-
}`;for(let s=2;s<
|
|
4
|
-
${c(
|
|
5
|
-
}`:` else if (${c(
|
|
6
|
-
${c(
|
|
7
|
-
}`}return
|
|
8
|
-
`;for(let
|
|
9
|
-
${c(r[
|
|
3
|
+
}`;for(let s=2;s<n.length;s+=2){let a=s>=n.length-1;o+=a?` else {
|
|
4
|
+
${c(n[s],e)}
|
|
5
|
+
}`:` else if (${c(n[s],e)}) {
|
|
6
|
+
${c(n[s+1],e)}
|
|
7
|
+
}`}return o},tt=(e,t,r)=>{let n=`switch (${c(t,e)}) {
|
|
8
|
+
`;for(let o=1;o<r.length;o+=2)o>=r.length-1&&r.length%2===0?n+=`default:
|
|
9
|
+
${c(r[o],e)}
|
|
10
10
|
break;
|
|
11
|
-
`:
|
|
12
|
-
${c(r[
|
|
11
|
+
`:o+1<r.length&&(n+=`case ${c(r[o],e)}:
|
|
12
|
+
${c(r[o+1],e)}
|
|
13
13
|
break;
|
|
14
|
-
`);return
|
|
15
|
-
`)},ct=(e,t,r={})=>{let o=[];for(let s in r){let i=r[s],p=v(i,e);e.isWebGL&&z(e,t,p),o.push(e.isWebGL?`${p} ${s};`:`${s}: ${w(p,e)},`)}let n=o.join(`
|
|
14
|
+
`);return n+="}",n},rt=(e,t,r)=>{let n=X(t,e),o=r?.props?.id;if(e.isWebGL)return`${n} ${o} = ${c(t,e)};`;let s=L(n);return`var ${o}: ${s} = ${c(t,e)};`},ot=(e,t,r={})=>{let n=[];for(let s in r){let a=r[s],f=X(a,e);e.isWebGL&&J(e,t,f),n.push(e.isWebGL?`${f} ${s};`:`${s}: ${L(f,e)},`)}let o=n.join(`
|
|
16
15
|
`);return`struct ${t} {
|
|
17
|
-
${
|
|
18
|
-
};`},
|
|
19
|
-
|
|
20
|
-
`);if(r==="
|
|
21
|
-
${c(
|
|
22
|
-
|
|
23
|
-
${c(
|
|
24
|
-
|
|
16
|
+
${o}
|
|
17
|
+
};`},nt=(e,t,r="",n,o)=>{if(e.isWebGL)if(o){let s=[];for(let a in n)s.push(o[a]);return`${t} ${r} = ${t}(${U(s,e)});`}else return`${t} ${r};`;else if(o){let s=[];for(let a in n)s.push(o[a]);return`var ${r}: ${t} = ${t}(${U(s,e)});`}else return`var ${r}: ${t};`},st=(e,t,r)=>{let{id:n,children:o=[],layout:s}=t,[a,...f]=o,i=[],u=[];if(s?.inputs)for(let h of s.inputs)i.push([h.name,h.type]);else for(let h=0;h<f.length;h++)i.push([`p${h}`,X(f[h],e)]);let d=[];if(e?.isWebGL){for(let[h,T]of i)J(e,n,T),u.push(`${T} ${h}`);J(e,n,r),d.push(`${r} ${n}(${u}) {`)}else{for(let[h,T]of i)u.push(`${h}: ${L(T,e)}`);d.push(`fn ${n}(${u}) -> ${L(r,e)} {`)}let G=c(a,e);return G&&d.push(G),d.push("}"),d.join(`
|
|
18
|
+
`)},it=(e,t,r)=>e.isWebGL?`${r} ${t};`:`@location(${e.code?.vertVaryings?.size||0}) ${t}: ${L(r,e)}`,at=(e,t,r)=>{let n=r==="sampler2D"||r==="texture";if(e.isWebGL)return n?`uniform sampler2D ${t};`:`uniform ${r} ${t};`;if(n){let{group:f=1,binding:i=0}=e.gl?.webgpu?.textures.map.get(t)||{};return`@group(${f}) @binding(${i}) var ${t}Sampler: sampler;
|
|
19
|
+
@group(${f}) @binding(${i+1}) var ${t}: texture_2d<f32>;`}let{group:o=0,binding:s=0}=e.gl?.webgpu?.uniforms.map.get(t)||{},a=L(r,e);return`@group(${o}) @binding(${s}) var<uniform> ${t}: ${a};`},ut=(e,t,r)=>{if(e.isWebGL)return`${r} ${t};`;let{location:n=0}=e.gl?.webgpu?.attribs.map.get(t)||{},o=L(r,e);return`@location(${n}) ${t}: ${o}`},pt=(e,t,r,n)=>e.isWebGL?`const ${r} ${t} = ${n};`:`const ${t}: ${L(r,e)} = ${n};`;var c=(e,t)=>{if(t||(t={}),Ke(t),l.arr(e))return U(e,t);if(l.str(e))return e;if(l.num(e)){let T=`${e}`;return T.includes(".")?T:T+".0"}if(l.bol(e))return e?"true":"false";if(!e)return"";let{type:r,props:n={}}=e,{id:o="i",children:s=[],fields:a,initialValues:f}=n,[i,u,d,G]=s;if(r==="variable")return o;if(r==="member")return`${c(i,t)}.${c(u,t)}`;if(r==="element")return`${c(i,t)}[${c(u,t)}]`;if(r==="ternary")return t.isWebGL?`(${c(d,t)} ? ${c(i,t)} : ${c(u,t)})`:`select(${c(i,t)}, ${c(u,t)}, ${c(d,t)})`;if(r==="conversion")return`${L(i,t)}(${U(s.slice(1),t)})`;if(r==="operator")return i==="not"||i==="bitNot"?`!${c(u,t)}`:`(${c(u,t)} ${He(i)} ${c(d,t)})`;if(r==="function")return i==="negate"?`(-${c(u,t)})`:i==="oneMinus"?`(1.0-${c(u,t)})`:i==="texture"?Je(t,u,d,G):i==="atan2"&&t.isWebGL?`atan(${c(u,t)}, ${c(d,t)})`:`${i}(${U(s.slice(1),t)})`;if(r==="scope")return s.map(T=>c(T,t)).join(`
|
|
20
|
+
`);if(r==="assign")return`${c(i,t)} = ${c(u,t)};`;if(r==="return")return`return ${c(i,t)};`;if(r==="loop")return t.isWebGL?`for (int ${o} = 0; ${o} < ${c(i,t)}; ${o} += 1) {
|
|
21
|
+
${c(u,t)}
|
|
22
|
+
}`:`for (var ${o}: i32 = 0; ${o} < ${c(i,t)}; ${o}++) {
|
|
23
|
+
${c(u,t)}
|
|
24
|
+
}`;if(r==="if")return et(t,i,u,s);if(r==="switch")return tt(t,i,s);if(r==="declare")return rt(t,i,u);if(r==="define")return t.code?.headers.has(o)||t.code?.headers.set(o,st(t,n,X(e,t))),`${o}(${U(s.slice(1),t)})`;if(r==="struct")return t.code?.headers.has(o)||t.code?.headers.set(o,ot(t,o,a)),nt(t,o,i.props.id,a,f);if(r==="varying"){if(t.code?.vertOutputs.has(o))return t.isWebGL?`${o}`:`out.${o}`;let T=it(t,o,X(e,t));return t.code?.fragInputs.set(o,T),t.code?.vertOutputs.set(o,T),t.code?.vertVaryings.set(o,c(i,t)),t.isWebGL?`${o}`:`out.${o}`}if(r==="builtin"){if(t.isWebGL)return Ye(o);if(o==="position")return"out.position";let T=`@builtin(${o}) ${o}: ${L(X(e,t),t)}`;return t.isFrag?t.code?.fragInputs.set(o,T):t.code?.vertInputs.set(o,T),`in.${o}`}if(r==="attribute"){let T=Te(t,o,!0);return ge(i,T),e.listeners.add(T),t.code?.vertInputs.set(o,ut(t,o,X(e,t))),t.isWebGL?`${o}`:`in.${o}`}if(t.code?.headers.has(o))return o;let h="";if(r==="uniform"){let T=X(e,t),F=Te(t,o,!1,T==="texture");ge(i,F),e.listeners.add(F),h=at(t,o,T)}return r==="constant"&&(h=pt(t,o,X(e,t),c(i,t))),h?(t.code?.headers.set(o,h),o):c(i,t)};var O=null,k=null,M=e=>{if(!O||(O.props.children||(O.props.children=[]),O.props.children.push(e),e.type!=="return"||!k))return;let{props:t}=k;t.inferFrom||(t.inferFrom=[]),t.inferFrom.push(e)},ve=(e,t)=>{t||(t=_());let r=x("variable",{id:t,inferFrom:[e]}),n=x("declare",null,e,r);return M(n),r},he=(e,t)=>{let r=x("assign",null,e,t);return M(r),e},ft=e=>{let t=x("return",{inferFrom:[e]},e);return M(t),t},Ht=(e,t=_())=>(r={},n=_())=>{let o=x("variable",{id:n,inferFrom:[t]}),s=x("struct",{id:t,fields:e,initialValues:r},o);return M(s),o},D=(e,t,r=k)=>{let[n,o]=[O,k];[O,k]=[e,r];let s=t();s&&ft(s),[O,k]=[n,o]},jt=(e,t)=>{let r=x("scope");D(r,t);let n=x("if",null,e,r);M(n);let o=()=>({ElseIf:(s,a)=>{let f=x("scope");return D(f,a),n.props.children.push(s,f),o()},Else:s=>{let a=x("scope");D(a,s),n.props.children.push(a)}});return o()},Kt=(e,t)=>{let r=x("scope"),n=_();D(r,()=>t({i:x("variable",{id:n,inferFrom:[b("int",0)]})}));let o=x("loop",{id:n},e,r);return M(o),o},Zt=e=>{let t=x("switch",null,e);M(t);let r=()=>({Case:(...n)=>o=>{let s=x("scope");D(s,o);for(let a of n)t.props.children.push(a,s);return r()},Default:n=>{let o=x("scope");D(o,n),t.props.children.push(o)}});return r()},Qt=(e,t=_())=>{let r,n=(...o)=>{let s=r?.name||t,a=x("scope"),f=[],i=[];if(r?.inputs)for(let d of r.inputs)i.push({id:d.name,inferFrom:[b(d.type)]});else for(let d=0;d<o.length;d++)i.push({id:`p${d}`,inferFrom:[o[d]]});for(let d of i)f.push(x("variable",d));let u=x("define",{id:s,layout:r},a,...o);return D(a,()=>e(f),u),u};return n.setLayout=o=>(r=o,n),n};var Jt=(e,t)=>{if(t==="string")return c(e)},x=(e,t,...r)=>{t||(t={}),r.length&&(t.children=r);let n=new Set,o=(f,i)=>{if(i==="type")return e;if(i==="props")return t;if(i==="toVar")return ve.bind(null,a);if(i==="assign")return he.bind(null,a);if(i==="isProxy")return!0;if(i==="toString")return c.bind(null,a);if(i===Symbol.toPrimitive)return Jt.bind(null,a);if(i==="listeners")return n;if(i==="attribute")return(u=_())=>ct(a,u);if(i==="constant")return(u=_())=>dt(a,u);if(i==="uniform")return(u=_())=>V(a,u);if(i==="variable")return(u=_())=>lt(u);if(i==="builtin")return(u=_())=>P(u);if(i==="vertexStage")return(u=_())=>xt(a,u);if(i==="element")return u=>ye(a,u);if(i==="member")return u=>ee(a,u);if(ke(i))return(...u)=>mt(i,a,...u);if(Ve(i))return(...u)=>p(i,a,...u);if(qe(i))return()=>b(je(i),a);if(l.str(i))return Ze(i)?ye(a,i):ee(a,i)},s=(f,i,u)=>(i==="value"&&n.forEach(d=>d(u)),l.str(i)&&ee(a,i).assign(u),!0),a=new Proxy({},{get:o,set:s});return a},ct=(e,t=_())=>x("attribute",{id:t},e),dt=(e,t=_())=>x("constant",{id:t},e),V=(e,t=_())=>x("uniform",{id:t},e),lt=(e=_())=>x("variable",{id:e}),P=(e=_())=>x("builtin",{id:e}),xt=(e,t=_())=>x("varying",{id:t,inferFrom:[e]},e),ee=(e,t)=>x("member",null,e,t),ye=(e,t)=>x("element",null,e,t),er=(e,t,r)=>x("ternary",null,e,t,r),mt=(e,...t)=>x("operator",null,e,...t),p=(e,...t)=>x("function",null,e,...t),b=(e,...t)=>x("conversion",null,e,...t);var tr=`
|
|
25
25
|
#version 300 es
|
|
26
26
|
precision mediump float;
|
|
27
27
|
out vec4 fragColor;
|
|
28
|
-
`.trim(),
|
|
29
|
-
`):
|
|
30
|
-
`),[
|
|
28
|
+
`.trim(),rr=(e,t)=>{let r=[],n=new Set,o=new Set,s=a=>{if(o.has(a)||n.has(a))return;o.add(a);let f=t.get(a)||new Set;for(let i of f)e.has(i)&&s(i);o.delete(a),n.add(a),e.has(a)&&r.push([a,e.get(a)])};for(let[a]of e)s(a);return r},Tt=(e,t)=>{let r=c(e,t),n="";return t.isWebGL&&t.code?.dependencies?n=rr(t.code.headers,t.code.dependencies).map(([,s])=>s).join(`
|
|
29
|
+
`):n=Array.from(t.code?.headers?.values()||[]).join(`
|
|
30
|
+
`),[n,r]},Xe=(e,t)=>`struct ${e} {
|
|
31
31
|
${Array.from(t.values()).join(`,
|
|
32
32
|
`)}
|
|
33
|
-
}`,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
${s}`),s},Q=y("position"),J=y("vertex_index"),Jt=y("instance_index"),er=y("front_facing"),tr=y("frag_depth"),rr=y("sample_index"),nr=y("sample_mask"),or=y("point_coord"),sr=y("position"),ir=y("positionWorld"),ar=y("positionView"),ur=y("normalLocal"),pr=y("normalWorld"),cr=y("normalView"),fr=y("screenCoordinate"),dr=y("screenUV"),H=e=>T("float",e),A=e=>T("int",e),lr=e=>T("uint",e),xr=e=>T("bool",e),$e=(e,t)=>T("vec2",e,t),Ne=(e,t,r)=>T("vec3",e,t,r),ee=(e,t,r,o)=>T("vec4",e,t,r,o),mr=(...e)=>T("mat2",...e),Tr=(...e)=>T("mat3",...e),gr=(...e)=>T("mat4",...e),br=(e,t)=>T("ivec2",e,t),vr=(e,t,r)=>T("ivec3",e,t,r),hr=(e,t,r,o)=>T("ivec4",e,t,r,o),yr=(e,t)=>T("uvec2",e,t),Cr=(e,t,r)=>T("uvec3",e,t,r),Xr=(e,t,r,o)=>T("uvec4",e,t,r,o),_r=(e,t)=>T("bvec2",e,t),Pr=(e,t,r)=>T("bvec3",e,t,r),Er=(e,t,r,o)=>T("bvec4",e,t,r,o),wr=e=>T("texture",e),Nr=()=>T("sampler2D"),$r=(e,t,r)=>d.num(e)&&d.und(t)&&d.und(r)?Ne(...ge(e)):Ne(e,t,r),te=k($e(),"iResolution"),Gr=k($e(),"iMouse"),Lr=k(H(),"iTime"),Sr=Q.xy.div(te),Rr=(e,t,r)=>u("texture",e,t,r),Or=(e,t,r)=>u("cubeTexture",e,t,r),Ir=(e,t)=>u("textureSize",e,t),Fr=e=>u("length",e),Ur=e=>u("lengthSq",e),Ar=(e,t)=>u("distance",e,t),Br=(e,t)=>u("dot",e,t),Dr=e=>u("all",e),Mr=e=>u("any",e),Wr=(e,t)=>u("cross",e,t),Vr=e=>u("abs",e),zr=e=>u("sign",e),kr=e=>u("floor",e),qr=e=>u("ceil",e),Yr=e=>u("round",e),Ge=e=>u("fract",e),Hr=e=>u("trunc",e),jr=e=>u("sin",e),Kr=e=>u("cos",e),Zr=e=>u("tan",e),Qr=e=>u("asin",e),Jr=e=>u("acos",e),en=e=>u("atan",e),tn=e=>u("sinh",e),rn=e=>u("cosh",e),nn=e=>u("tanh",e),on=e=>u("asinh",e),sn=e=>u("acosh",e),an=e=>u("atanh",e),un=e=>u("exp",e),pn=e=>u("exp2",e),cn=e=>u("log",e),fn=e=>u("log2",e),dn=e=>u("sqrt",e),ln=e=>u("inverseSqrt",e),xn=e=>u("normalize",e),mn=e=>u("oneMinus",e),Tn=e=>u("saturate",e),gn=e=>u("negate",e),bn=e=>u("reciprocal",e),vn=e=>u("dFdx",e),hn=e=>u("dFdy",e),yn=e=>u("fwidth",e),Cn=e=>u("degrees",e),Xn=e=>u("radians",e),_n=(e,t)=>u("reflect",e,t),Pn=(e,t,r)=>u("refract",e,t,r),En=(e,t)=>u("min",e,t),wn=(e,t)=>u("max",e,t),Nn=(e,t,r)=>u("mix",e,t,r),$n=(e,t,r)=>u("clamp",e,t,r),Gn=(e,t)=>u("step",e,t),Ln=(e,t,r)=>u("smoothstep",e,t,r),Sn=(e,t)=>u("atan2",e,t),Rn=(e,t)=>u("pow",e,t),On=e=>u("pow2",e),In=e=>u("pow3",e),Fn=e=>u("pow4",e),Un=(e,t)=>u("bitcast",e,t),An=e=>u("cbrt",e),Bn=(e,t)=>u("difference",e,t),Dn=(e,t)=>u("equals",e,t),Mn=(e,t,r)=>u("faceforward",e,t,r),Wn=(e,t)=>u("transformDirection",e,t);var vt=(e,t,r)=>{let o=e.createShader(r);if(!o)throw new Error("Failed to create shader");if(e.shaderSource(o,t.trim()),e.compileShader(o),e.getShaderParameter(o,e.COMPILE_STATUS))return o;let n=e.getShaderInfoLog(o);e.deleteShader(o),console.warn(`Could not compile shader: ${n}`)},Le=(e,t,r,o=()=>{})=>{let n=e.createProgram(),s=vt(e,r,e.FRAGMENT_SHADER),i=vt(e,t,e.VERTEX_SHADER);if(!s||!i)return o();if(e.attachShader(n,i),e.attachShader(n,s),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS))return n;let p=e.getProgramInfoLog(n);e.deleteProgram(n),o(),console.warn(`Could not link program: ${p}`)},Se=(e,t)=>{let r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),r},Re=(e,t)=>{let r=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,r),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(t),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),r},Oe=(e,t,r)=>{r&&(e=Math.max(...r)+1);let o=t.length/e;return Math.floor(o)},Ie=(e,t,r,o,n)=>{e.bindBuffer(e.ARRAY_BUFFER,o),e.enableVertexAttribArray(r),e.vertexAttribPointer(r,t,e.FLOAT,!1,0,0),n&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n)},Fe=(e,t,r,o)=>{let n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),e.uniform1i(r,o),e.activeTexture(e.TEXTURE0+o),e.bindTexture(e.TEXTURE_2D,n)};var Ue=async e=>{let t=e.el.getContext("webgl2"),r={isWebGL:!0,gl:e},o=Y(e.fs,r),n=q(e.vs,r),s=Le(t,n,o,()=>void(e.isLoop=!1));t.useProgram(s);let i=0,p=(0,re.nested)($=>t.getUniformLocation(s,$)),a=(0,re.nested)($=>t.getAttribLocation(s,$)),f=(0,re.nested)(()=>i++);return{render:()=>{t.clear(t.COLOR_BUFFER_BIT),t.viewport(0,0,...e.size),t.drawArrays(t.TRIANGLES,0,3)},clean:()=>t.deleteProgram(s),_attribute:($="",_,G)=>{let L=a($,!0),M=Se(t,_),se=Re(t,G),h=Oe(e.count,_,G);Ie(t,h,L,M,se)},_uniform:($,_)=>{let G=p($);if(d.num(_))return t.uniform1f(G,_);let L=_.length;if(L<=4)return t[`uniform${L}fv`](G,_);L=Math.sqrt(L)<<0,t[`uniformMatrix${L}fv`](G,!1,_)},_texture:($,_)=>{let G=new Image;Object.assign(G,{src:_,crossOrigin:"anonymous"}),G.decode().then(()=>{let L=p($),M=f($);Fe(t,G,L,M)})},webgl:{context:t,program:s}}};var ne=require("reev");var Ae=async e=>{let t=navigator.gpu,r=t.getPreferredCanvasFormat(),n=await(await t.requestAdapter()).requestDevice();return e.configure({device:n,format:r,alphaMode:"opaque"}),{device:n,format:r}},Be=()=>{let e=0,t=0,r=0;return{uniform:()=>{let o=Math.floor(e/12),n=e%12;return e++,{group:o,binding:n}},texture:()=>{let n=Math.floor(e/12)+1+Math.floor(t/6),s=t%6*2;return t++,{group:n,binding:s}},attrib:()=>{let o=r;return r++,{location:o}}}},Vn=e=>e===2?"float32x2":e===3?"float32x3":e===4?"float32x4":"float32",De=e=>{let t=[],r=[];for(let{buffer:o,location:n,stride:s}of e)t[n]=o,r[n]={arrayStride:s*4,attributes:[{shaderLocation:n,offset:0,format:Vn(s)}]};return{vertexBuffers:t,bufferLayouts:r}},Me=(e,t,r)=>{let o=new Map,n={bindGroups:[],bindGroupLayouts:[]},s=(i,p,a)=>{o.has(i)||o.set(i,{layouts:[],bindings:[]});let{layouts:f,bindings:l}=o.get(i);f.push(p),l.push(a)};for(let{binding:i,buffer:p,group:a}of t)s(a,{binding:i,visibility:3,buffer:{type:"uniform"}},{binding:i,resource:{buffer:p}});for(let{binding:i,group:p,sampler:a,view:f}of r)s(p,{binding:i,visibility:2,sampler:{}},{binding:i,resource:a}),s(p,{binding:i+1,visibility:2,texture:{}},{binding:i+1,resource:f});for(let[i,{layouts:p,bindings:a}]of o)n.bindGroupLayouts[i]=e.createBindGroupLayout({entries:p}),n.bindGroups[i]=e.createBindGroup({layout:n.bindGroupLayouts[i],entries:a});return n},We=(e,t,r,o,n,s)=>e.createRenderPipeline({vertex:{module:e.createShaderModule({label:"vert",code:n}),entryPoint:"main",buffers:r},fragment:{module:e.createShaderModule({label:"frag",code:s}),entryPoint:"main",targets:[{format:t}]},layout:e.createPipelineLayout({bindGroupLayouts:o}),primitive:{topology:"triangle-list"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}}),Ve=(e,t)=>{let r=new Float32Array(t),o=Math.ceil(r.byteLength/256)*256,n=e.createBuffer({size:o,usage:72});return{array:r,buffer:n}},ze=(e,t)=>{let r=new Float32Array(t),o=e.createBuffer({size:r.byteLength,usage:40});return{array:r,buffer:o}},ke=(e,t)=>({colorAttachments:[{view:e.getCurrentTexture().createView(),clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:t.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}}),qe=(e,t=1280,r=800)=>{let o=e.createTexture({size:[t,r],format:"rgba8unorm",usage:22}),n=e.createSampler({magFilter:"linear",minFilter:"linear"});return{texture:o,sampler:n}},Ye=(e,t,r)=>e.createTexture({size:[t,r],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT});var He=async e=>{let t=e.el.getContext("webgpu"),{device:r,format:o}=await Ae(t),n=Be(),s,i,p=h=>{},a=0,f=!0,l,N=(0,ne.nested)((h,g)=>{f=!0;let{array:C,buffer:X}=Ve(r,g),{binding:S,group:P}=n.uniform();return{binding:S,group:P,array:C,buffer:X}}),b=(0,ne.nested)((h,g=0,C=0)=>{f=!0;let{texture:X,sampler:S}=qe(r,g,C),{binding:P,group:W}=n.texture();return{binding:P,group:W,texture:X,sampler:S,view:X.createView()}}),m=(0,ne.nested)((h,g)=>{f=!0;let C=g.length/e.count,{location:X}=n.attrib(),{array:S,buffer:P}=ze(r,g);return{array:S,buffer:P,location:X,stride:C}}),D=()=>{let{vertexBuffers:h,bufferLayouts:g}=De(m.map.values()),{bindGroups:C,bindGroupLayouts:X}=Me(r,N.map.values(),b.map.values()),S=We(r,o,g,X,i,s);p=P=>{P.setPipeline(S),C.forEach((W,ie)=>P.setBindGroup(ie,W)),h.forEach((W,ie)=>P.setVertexBuffer(ie,W)),P.draw(e.count,1,0,0),P.end()}},$=()=>{if(!s||!i){let g={isWebGL:!1,gl:e};s=Y(e.fs,g),i=q(e.vs,g)}if(a)return;f&&D(),f=!1;let h=r.createCommandEncoder();p(h.beginRenderPass(ke(t,l))),r.queue.submit([h.finish()])},_=()=>{let h=e.el;l?.destroy(),l=Ye(r,h.width,h.height)},G=()=>{l?.destroy()},L=(h="",g)=>{let{array:C,buffer:X}=m(h,g);C.set(g),r.queue.writeBuffer(X,0,C)},M=(h,g)=>{d.num(g)&&(g=[g]);let{array:C,buffer:X}=N(h,g);C.set(g),r.queue.writeBuffer(X,0,C)},se=(h,g)=>{a++;let C=Object.assign(new Image,{src:g,crossOrigin:"anonymous"});C.decode().then(()=>{let{width:X,height:S}=C,{texture:P}=b(h,X,S);r.queue.copyExternalImageToTexture({source:C},{texture:P},{width:X,height:S}),a--})};return _(),{webgpu:{device:r,uniforms:N,textures:b,attribs:m},render:$,resize:_,clean:G,_attribute:L,_uniform:M,_texture:se}};var zn=e=>d.obj(e)?"isGL"in e:!1,ht=()=>typeof window>"u",yt=()=>ht()?!1:"gpu"in navigator,je=performance.now(),kn=()=>ee(Ge(Q.xy.div(te)),0,1),qn=()=>ee(H(A(J).mod(A(2))).mul(4).sub(1),H(A(J).div(A(2))).mul(4).sub(1),0,1),Ct=e=>{let t=(0,B.event)({isNative:!1,isWebGL:!0,isLoop:!0,isGL:!0,size:[0,0],mouse:[0,0],count:6,webgl:{},webgpu:{}});return t.queue=(0,oe.createQueue)(),t.frame=(0,oe.createFrame)(),t.attribute=(0,B.durable)((r,o,n)=>t.queue(()=>t._attribute?.(r,o,n)),t),t.uniform=(0,B.durable)((r,o,n)=>t.queue(()=>t._uniform?.(r,o,n)),t),t.texture=(0,B.durable)((r,o)=>t.queue(()=>t._texture?.(r,o)),t),t.uniform({iResolution:t.size,iMouse:[0,0],iTime:je}),t("mount",async()=>{t.vs=t.vs||t.vert||t.vertex||qn(),t.fs=t.fs||t.frag||t.fragment||kn(),yt()||(t.isWebGL=!0),t.isWebGL?t(await Ue(t)):t(await He(t)),t.resize(),t.frame(()=>(t.loop(),t.queue.flush(),t.render(),t.isLoop)),!t.isNative&&(window.addEventListener("resize",t.resize),t.el.addEventListener("mousemove",t.mousemove))}),t("clean",()=>{t.frame.stop(),t.frame.clean(t.render),!t.isNative&&(window.removeEventListener("resize",t.resize),t.el.removeEventListener("mousemove",t.mousemove))}),t("resize",()=>{let r=t.width||window.innerWidth,o=t.height||window.innerHeight;t.size[0]=t.el.width=r,t.size[1]=t.el.height=o,t.uniform("iResolution",t.size)}),t("mousemove",(r,o=r.clientX,n=r.clientY)=>{let[s,i]=t.size,{top:p,left:a}=t.el.getBoundingClientRect();t.mouse[0]=(o-p-s/2)/(s/2),t.mouse[1]=-(n-a-i/2)/(i/2),t.uniform("iMouse",t.mouse)}),t("loop",()=>{je=performance.now()/1e3,t.uniform("iTime",je)}),t(e)},Yn=Ct;0&&(module.exports={Fn,If,Loop,Return,Switch,abs,acos,acosh,addDependency,all,any,asin,asinh,assign,atan,atan2,atanh,attribute,bitcast,bool,builtin,bvec2,bvec3,bvec4,cbrt,ceil,clamp,code,color,constant,conversion,conversionToConstant,cos,cosh,createAttrib,createAttribBuffer,createBindGroup,createBindings,createDepthTexture,createDescriptor,createDevice,createGL,createIbo,createPipeline,createProgram,createTexture,createTextureSampler,createUniformBuffer,createVbo,createVertexBuffers,cross,cubeTexture,dFdx,dFdy,degrees,difference,dig,distance,dot,each,equals,exp,exp2,ext,faceforward,fig,float,floor,flush,formatConversions,fract,fragDepth,fragment,frontFacing,function_,fwidth,getBluiltin,getEventFun,getId,getOperator,getStride,hex2rgb,iMouse,iResolution,iTime,initNodeContext,instanceIndex,int,inverseSqrt,is,isConstants,isConversion,isFunction,isGL,isNodeProxy,isOperator,isServer,isSwizzle,isWebGPUSupported,ivec2,ivec3,ivec4,length,lengthSq,log,log2,mat2,mat3,mat4,max,member,min,mix,negate,node,normalLocal,normalView,normalWorld,normalize,oneMinus,operator,pointCoord,position,positionLocal,positionView,positionWorld,pow,pow2,pow3,pow4,radians,reciprocal,reflect,refract,replace,round,safeEventCall,sampleIndex,sampleMask,sampler2D,saturate,screenCoordinate,screenUV,select,sig,sign,sin,sinh,smoothstep,sortHeadersByDependencies,sqrt,step,struct,tan,tanh,texture,texture2D,textureSize,toVar,transformDirection,trunc,uint,uniform,uv,uvec2,uvec3,uvec4,variable,vec2,vec3,vec4,vertex,vertexIndex,vertexStage,webgl,webgpu});
|
|
33
|
+
}`,Y=(e,t)=>{if(l.str(e))return e.trim();t.code?.headers?.clear(),t.isFrag=!0;let[r,n]=Tt(e,t),o=[];if(t.isWebGL){o.push(tr);for(let a of t.code?.fragInputs?.values()||[])o.push(`in ${a}`);o.push(r),o.push(`void main() {
|
|
34
|
+
fragColor = ${n};`)}else t.code?.fragInputs?.size&&o.push(Xe("Out",t.code.fragInputs)),o.push(r),o.push(`@fragment
|
|
35
|
+
fn main(out: Out) -> @location(0) vec4f {`),o.push(` return ${n};`);return o.push("}"),o.filter(Boolean).join(`
|
|
36
|
+
`).trim()},H=(e,t)=>{if(l.str(e))return e.trim();t.code?.headers?.clear(),t.isFrag=!1;let[r,n]=Tt(e,t),o=[];if(t.isWebGL){o.push("#version 300 es");for(let a of t.code?.vertInputs?.values()||[])o.push(`in ${a}`);for(let a of t.code?.vertOutputs?.values()||[])o.push(`out ${a}`);o.push(r),o.push("void main() {"),o.push(` gl_Position = ${n};`);for(let[a,f]of t.code?.vertVaryings?.entries()||[])o.push(` ${a} = ${f};`)}else{t.code?.vertInputs?.size&&o.push(Xe("In",t.code.vertInputs)),t.code?.vertOutputs?.size&&o.push(Xe("Out",t.code.vertOutputs)),o.push(r),o.push("@vertex"),o.push(`fn main(${t.code?.vertInputs?.size?"in: In":""}) -> Out {`),o.push(" var out: Out;"),o.push(` out.position = ${n};`);for(let[a,f]of t.code?.vertVaryings?.entries()||[])o.push(` out.${a} = ${f};`);o.push(" return out;")}return o.push("}"),o.filter(Boolean).join(`
|
|
37
|
+
`).trim()},Ee=(e,t)=>l.str(e)?e.trim():"";var te=P("position"),re=P("vertex_index"),or=P("instance_index"),nr=P("front_facing"),sr=P("frag_depth"),ir=P("sample_index"),ar=P("sample_mask"),ur=P("point_coord"),pr=P("position"),fr=P("positionWorld"),cr=P("positionView"),dr=P("normalLocal"),lr=P("normalWorld"),xr=P("normalView"),mr=P("screenCoordinate"),Tr=P("screenUV"),j=e=>b("float",e),q=e=>b("int",e),gr=e=>b("uint",e),br=e=>b("bool",e),_e=(e,t)=>b("vec2",e,t),Ce=(e,t,r)=>b("vec3",e,t,r),oe=(e,t,r,n)=>b("vec4",e,t,r,n),vr=(...e)=>b("mat2",...e),hr=(...e)=>b("mat3",...e),yr=(...e)=>b("mat4",...e),Xr=(e,t)=>b("ivec2",e,t),Er=(e,t,r)=>b("ivec3",e,t,r),Cr=(e,t,r,n)=>b("ivec4",e,t,r,n),_r=(e,t)=>b("uvec2",e,t),Pr=(e,t,r)=>b("uvec3",e,t,r),Rr=(e,t,r,n)=>b("uvec4",e,t,r,n),Gr=(e,t)=>b("bvec2",e,t),Nr=(e,t,r)=>b("bvec3",e,t,r),$r=(e,t,r,n)=>b("bvec4",e,t,r,n),wr=e=>b("texture",e),Lr=()=>b("sampler2D"),Sr=(e,t,r)=>l.num(e)&&l.und(t)&&l.und(r)?Ce(...ze(e)):Ce(e,t,r),ne=V(_e(),"iResolution"),Fr=V(_e(),"iMouse"),Ar=V(j(),"iTime"),Ur=te.xy.div(ne),Ir=(e,t,r)=>p("texture",e,t,r),Or=(e,t,r)=>p("cubeTexture",e,t,r),Dr=(e,t)=>p("textureSize",e,t),Mr=e=>p("length",e),Br=e=>p("lengthSq",e),Wr=(e,t)=>p("distance",e,t),kr=(e,t)=>p("dot",e,t),Vr=e=>p("all",e),qr=e=>p("any",e),zr=(e,t)=>p("cross",e,t),Yr=e=>p("abs",e),Hr=e=>p("sign",e),jr=e=>p("floor",e),Kr=e=>p("ceil",e),Zr=e=>p("round",e),Pe=e=>p("fract",e),Qr=e=>p("trunc",e),Jr=e=>p("sin",e),eo=e=>p("cos",e),to=e=>p("tan",e),ro=e=>p("asin",e),oo=e=>p("acos",e),no=e=>p("atan",e),so=e=>p("sinh",e),io=e=>p("cosh",e),ao=e=>p("tanh",e),uo=e=>p("asinh",e),po=e=>p("acosh",e),fo=e=>p("atanh",e),co=e=>p("exp",e),lo=e=>p("exp2",e),xo=e=>p("log",e),mo=e=>p("log2",e),To=e=>p("sqrt",e),go=e=>p("inverseSqrt",e),bo=e=>p("normalize",e),vo=e=>p("oneMinus",e),ho=e=>p("saturate",e),yo=e=>p("negate",e),Xo=e=>p("reciprocal",e),Eo=e=>p("dFdx",e),Co=e=>p("dFdy",e),_o=e=>p("fwidth",e),Po=e=>p("degrees",e),Ro=e=>p("radians",e),Go=(e,t)=>p("reflect",e,t),No=(e,t,r)=>p("refract",e,t,r),$o=(e,t)=>p("min",e,t),wo=(e,t)=>p("max",e,t),Lo=(e,t,r)=>p("mix",e,t,r),So=(e,t,r)=>p("clamp",e,t,r),Fo=(e,t)=>p("step",e,t),Ao=(e,t,r)=>p("smoothstep",e,t,r),Uo=(e,t)=>p("atan2",e,t),Io=(e,t)=>p("pow",e,t),Oo=e=>p("pow2",e),Do=e=>p("pow3",e),Mo=e=>p("pow4",e),Bo=(e,t)=>p("bitcast",e,t),Wo=e=>p("cbrt",e),ko=(e,t)=>p("difference",e,t),Vo=(e,t)=>p("equals",e,t),qo=(e,t,r)=>p("faceforward",e,t,r),zo=(e,t)=>p("transformDirection",e,t),Yo=(e,t)=>e.sub(e.div(t).floor().mul(t));var gt=(e,t,r,n=console.warn)=>{let o=e.createShader(r);if(!o)return n("Failed to create shader");if(e.shaderSource(o,t.trim()),e.compileShader(o),e.getShaderParameter(o,e.COMPILE_STATUS))return o;let s=e.getShaderInfoLog(o);e.deleteShader(o),n(`Could not compile shader: ${s}`)},Re=(e,t,r,n)=>{if(!t||!r)return;let o={isWebGL:!0,gl:n};r=Y(r,o),t=H(t,o);let s=e.createProgram(),a=gt(e,t,e.VERTEX_SHADER,n.error),f=gt(e,r,e.FRAGMENT_SHADER,n.error);if(!f||!a)return;if(e.attachShader(s,a),e.attachShader(s,f),e.linkProgram(s),e.getProgramParameter(s,e.LINK_STATUS))return s;let i=e.getProgramInfoLog(s);e.deleteProgram(s),n.error(`Could not link program: ${i}`)},Ho=(e,t)=>{let r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),r},jo=(e,t)=>{let r=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,r),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(t),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),r},Ko=(e,t,r)=>{r&&(e=Math.max(...r)+1);let n=t.length/e;return Math.floor(n)},bt=(e,t,r,n,o)=>{let s=Ho(e,n),a=jo(e,o),f=Ko(r,n,o);e.bindBuffer(e.ARRAY_BUFFER,s),e.enableVertexAttribArray(t),e.vertexAttribPointer(t,f,e.FLOAT,!1,0,0),a&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,a)},Ge=(e,t,r)=>{if(l.num(r))return e.uniform1f(t,r);let n=r.length;if(n<=4)return e[`uniform${n}fv`](t,r);n=Math.sqrt(n)<<0,e[`uniformMatrix${n}fv`](t,!1,r)},vt=(e,t,r,n)=>{let o=e.createTexture();e.bindTexture(e.TEXTURE_2D,o),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),e.uniform1i(r,n),e.activeTexture(e.TEXTURE0+n),e.bindTexture(e.TEXTURE_2D,o)},ht=(e,t,r,n)=>{let o=new Float32Array(t*t*4);for(let s=0;s<n.length;s++)o[s*4]=n[s];e.activeTexture(e.TEXTURE0+r.unit),e.bindTexture(e.TEXTURE_2D,r.a.texture),e.texImage2D(e.TEXTURE_2D,0,e.RGBA32F,t,t,0,e.RGBA,e.FLOAT,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,r.b.texture),e.texImage2D(e.TEXTURE_2D,0,e.RGBA32F,t,t,0,e.RGBA,e.FLOAT,null),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)};var Zo=`
|
|
38
|
+
#version 300 es
|
|
39
|
+
void main() {
|
|
40
|
+
float x = float(gl_VertexID % 2) * 4.0 - 1.0;
|
|
41
|
+
float y = float(gl_VertexID / 2) * 4.0 - 1.0;
|
|
42
|
+
gl_Position = vec4(x, y, 0.0, 1.0);
|
|
43
|
+
}`.trim(),Ne=async e=>{let t=e.el.getContext("webgl2");t.getExtension("EXT_color_buffer_float");let r=Re(t,e.vs,e.fs,e),n=Re(t,Zo,e.cs,e);t.useProgram(r);let o=0,s=0,a=(0,z.nested)(g=>t.getAttribLocation(r,g)),f=(0,z.nested)(g=>t.getUniformLocation(r,g)),i=(0,z.nested)(g=>t.getUniformLocation(n,g)),u=(0,z.nested)(()=>o++),d=(0,z.nested)(()=>{let g=o++,y={texture:t.createTexture(),buffer:t.createFramebuffer()},$={texture:t.createTexture(),buffer:t.createFramebuffer()};return{a:y,b:$,unit:g,width:0,height:0}}),G=(g="",y,$)=>{let N=a(g,!0);bt(t,N,e.count,y,$)},h=(g,y)=>{Ge(t,f(g),y),n&&(t.useProgram(n),Ge(t,i(g),y),t.useProgram(r))},T=(g,y)=>{Z(e,y,$=>{let N=f(g),A=u(g);vt(t,$,N,A)})},F=(g,y)=>{let $=y instanceof Float32Array?y:new Float32Array(y),N=d(g),A=Math.ceil(Math.sqrt($.length));N.width=A,N.height=A,ht(t,A,N,$),t.uniform1i(f(g),N.unit)},W=()=>{t.deleteProgram(r),n&&t.deleteProgram(n);for(let{a:g,b:y}of d.map.values())t.deleteTexture(g.texture),t.deleteTexture(y.texture),t.deleteFramebuffer(g.buffer),t.deleteFramebuffer(y.buffer);t.getExtension("WEBGL_lose_context")?.loseContext()},ae=()=>{t.useProgram(n);for(let[,g]of d.map){let y=s%2?g.b:g.a;t.bindFramebuffer(t.FRAMEBUFFER,y.buffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,y.texture,0),t.viewport(0,0,g.width,g.height),t.drawArrays(t.TRIANGLES,0,6),t.bindFramebuffer(t.FRAMEBUFFER,null)}s++,t.useProgram(r)};return{webgl:{context:t,program:r},render:()=>{n&&ae(),t.bindFramebuffer(t.FRAMEBUFFER,null),t.clear(t.COLOR_BUFFER_BIT),t.viewport(0,0,...e.size);for(let[g,{unit:y,a:$,b:N}]of d.map){let A=f(g),m=s%2?$:N;t.activeTexture(t.TEXTURE0+y),t.bindTexture(t.TEXTURE_2D,m.texture),t.uniform1i(A,y)}t.drawArrays(t.TRIANGLES,0,e.count)},clean:W,_attribute:G,_uniform:h,_texture:T,_storage:F}};var K=require("reev");var yt=async(e,t=console.log)=>{let r=navigator.gpu,n=r.getPreferredCanvasFormat(),s=await(await r.requestAdapter()).requestDevice();return s.onuncapturederror=a=>t(a.error.message),e.configure({device:s,format:n,alphaMode:"opaque"}),{device:s,format:n}},Xt=()=>{let e=0,t=0,r=0,n=0;return{uniform:()=>{let o=Math.floor(e/12),s=e%12;return e++,{group:o,binding:s}},texture:()=>{let s=Math.floor(e/12)+1+Math.floor(t/6),a=t%6*2;return t++,{group:s,binding:a}},storage:()=>{let s=Math.floor(e/12)+Math.floor(t/6)+2+Math.floor(r/12),a=r%12;return r++,{group:s,binding:a}},attrib:()=>{let o=n;return n++,{location:o}}}},Qo=e=>e===2?"float32x2":e===3?"float32x3":e===4?"float32x4":"float32",Et=e=>{let t=[],r=[];for(let{buffer:n,location:o,stride:s}of e)t[o]=n,r[o]={arrayStride:s*4,attributes:[{shaderLocation:o,offset:0,format:Qo(s)}]};return{vertexBuffers:t,bufferLayouts:r}},Ct=(e,t,r,n=[])=>{let o=new Map,s={bindGroups:[],bindGroupLayouts:[]},a=(f,i,u)=>{o.has(f)||o.set(f,{layouts:[],bindings:[]});let{layouts:d,bindings:G}=o.get(f);d.push(i),G.push(u)};for(let{binding:f,buffer:i,group:u}of t)a(u,{binding:f,visibility:7,buffer:{type:"uniform"}},{binding:f,resource:{buffer:i}});for(let{binding:f,buffer:i,group:u}of n)a(u,{binding:f,visibility:6,buffer:{type:"storage"}},{binding:f,resource:{buffer:i}});for(let{binding:f,group:i,sampler:u,view:d}of r)a(i,{binding:f,visibility:2,sampler:{}},{binding:f,resource:u}),a(i,{binding:f+1,visibility:2,texture:{}},{binding:f+1,resource:d});for(let[f,{layouts:i,bindings:u}]of o)s.bindGroupLayouts[f]=e.createBindGroupLayout({entries:i}),s.bindGroups[f]=e.createBindGroup({layout:s.bindGroupLayouts[f],entries:u});return s},_t=(e,t,r,n,o,s)=>e.createRenderPipeline({vertex:{module:e.createShaderModule({label:"vert",code:o}),entryPoint:"main",buffers:r},fragment:{module:e.createShaderModule({label:"frag",code:s}),entryPoint:"main",targets:[{format:t}]},layout:e.createPipelineLayout({bindGroupLayouts:n}),primitive:{topology:"triangle-list"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}}),Pt=(e,t,r)=>e.createComputePipeline({compute:{module:e.createShaderModule({label:"compute",code:r}),entryPoint:"main"},layout:e.createPipelineLayout({bindGroupLayouts:t})}),Jo=e=>e==="uniform"?72:e==="attrib"?40:140,se=(e,t,r)=>{Fe(t)||(t=new Float32Array(t));let n=Jo(r),o=r==="uniform"?Math.ceil(t.byteLength/256)*256:t.byteLength,s=e.createBuffer({size:o,usage:n});return{array:t,buffer:s}},Rt=(e,t)=>({colorAttachments:[{view:e.getCurrentTexture().createView(),clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:t.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}}),Gt=(e,t=1280,r=800)=>{let n=e.createTexture({size:[t,r],format:"rgba8unorm",usage:22}),o=e.createSampler({magFilter:"linear",minFilter:"linear"});return{texture:n,sampler:o}},Nt=(e,t,r)=>e.createTexture({size:[t,r],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT});var $e=async e=>{let t=e.el.getContext("webgpu"),{device:r,format:n}=await yt(t,e.error),o=Xt(),s,a,f,i=m=>{},u=m=>{},d=!0,G,h=(0,K.nested)((m,v)=>{d=!0;let E=v.length/e.count,{location:C}=o.attrib(),{array:w,buffer:R}=se(r,v,"attrib");return{array:w,buffer:R,location:C,stride:E}}),T=(0,K.nested)((m,v)=>{d=!0;let{array:E,buffer:C}=se(r,v,"storage"),{binding:w,group:R}=o.storage();return{array:E,buffer:C,binding:w,group:R}}),F=(0,K.nested)((m,v)=>{d=!0;let{binding:E,group:C}=o.uniform(),{array:w,buffer:R}=se(r,v,"uniform");return{array:w,buffer:R,binding:E,group:C}}),W=(0,K.nested)((m,v=0,E=0)=>{d=!0;let{binding:C,group:w}=o.texture(),{texture:R,sampler:S}=Gt(r,v,E);return{texture:R,sampler:S,binding:C,group:w,view:R.createView()}}),ae=(m="",v)=>{let{array:E,buffer:C}=h(m,v);r.queue.writeBuffer(C,0,E)},Le=(m,v)=>{let{array:E,buffer:C}=T(m,v);r.queue.writeBuffer(C,0,E)},Se=(m,v)=>{l.num(v)&&(v=[v]);let{array:E,buffer:C}=F(m,v);r.queue.writeBuffer(C,0,E)},g=(m,v)=>{Z(e,v,E=>{let{width:C,height:w}=E,{texture:R}=W(m,C,w);r.queue.copyExternalImageToTexture({source:E},{texture:R},{width:C,height:w})})},y=()=>{let{vertexBuffers:m,bufferLayouts:v}=Et(h.map.values()),{bindGroups:E,bindGroupLayouts:C}=Ct(r,F.map.values(),W.map.values(),T.map.values()),w=_t(r,n,v,C,a,s);if(i=R=>{R.setPipeline(w),E.forEach((S,I)=>R.setBindGroup(I,S)),m.forEach((S,I)=>R.setVertexBuffer(I,S)),R.draw(e.count,1,0,0),R.end()},f){let R=Pt(r,C,f);u=S=>{S.setPipeline(R),E.forEach((ue,Ft)=>S.setBindGroup(Ft,ue));let I=1;for(let{array:ue}of T.map.values())I=Math.max(I,ue.length);let St=Math.ceil(I/64);S.dispatchWorkgroups(St),S.end()}}},$=()=>{if(!s||!a){let v={isWebGL:!1,gl:e};s=Y(e.fs,v),f=Ee(e.cs,v),a=H(e.vs,v)}if(e.loading)return;d&&y(),d=!1;let m=r.createCommandEncoder();f&&u(m.beginComputePass()),i(m.beginRenderPass(Rt(t,G))),r.queue.submit([m.finish()])},N=()=>{let m=e.el;G?.destroy(),G=Nt(r,m.width,m.height)},A=()=>{r.destroy(),G?.destroy();for(let{texture:m}of W.map.values())m.destroy();for(let{buffer:m}of F.map.values())m.destroy();for(let{buffer:m}of h.map.values())m.destroy();for(let{buffer:m}of T.map.values())m.destroy()};return N(),{webgpu:{device:r,uniforms:F,textures:W,attribs:h,storages:T},render:$,resize:N,clean:A,_attribute:ae,_uniform:Se,_texture:g,_storage:Le}};var en=e=>l.obj(e)?"isGL"in e:!1,$t=()=>typeof window>"u",wt=()=>$t()?!1:"gpu"in navigator,we=performance.now(),tn=()=>oe(Pe(te.xy.div(ne)),0,1),rn=()=>oe(j(q(re).mod(q(2))).mul(4).sub(1),j(q(re).div(q(2))).mul(4).sub(1),0,1),Lt=e=>{let t=(0,B.event)({isNative:!1,isWebGL:!0,isError:!1,isLoop:!0,isGL:!0,size:[0,0],mouse:[0,0],count:6,webgl:{},webgpu:{},loading:0,error(){t.isError=!0,t.isLoop=!1,t.clean()}});return t.queue=(0,ie.createQueue)(),t.frame=(0,ie.createFrame)(),t.attribute=(0,B.durable)((r,n,o)=>t.queue(()=>t._attribute?.(r,n,o)),t),t.storage=(0,B.durable)((r,n)=>t.queue(()=>t._storage?.(r,n)),t),t.uniform=(0,B.durable)((r,n)=>t.queue(()=>t._uniform?.(r,n)),t),t.texture=(0,B.durable)((r,n)=>t.queue(()=>t._texture?.(r,n)),t),t.uniform({iResolution:t.size,iMouse:[0,0],iTime:we}),t("mount",async()=>{t.vs=t.vs||t.vert||t.vertex||rn(),t.fs=t.fs||t.frag||t.fragment||tn(),t.cs=t.cs||t.comp||t.compute,wt()||(t.isWebGL=!0),t.isWebGL?t(await Ne(t)):t(await $e(t)),!t.isError&&(t.resize(),t.frame(()=>(t.loop(),t.queue.flush(),t.loading?!0:(t.render(),t.isLoop))),!t.isNative&&(window.addEventListener("resize",t.resize),t.el.addEventListener("mousemove",t.mousemove)))}),t("clean",()=>{t.frame.stop(),!t.isNative&&(window.removeEventListener("resize",t.resize),t.el.removeEventListener("mousemove",t.mousemove))}),t("resize",()=>{let r=t.width||window.innerWidth,n=t.height||window.innerHeight;t.size[0]=t.el.width=r,t.size[1]=t.el.height=n,t.uniform("iResolution",t.size)}),t("mousemove",(r,n=r.clientX,o=r.clientY)=>{let[s,a]=t.size,{top:f,left:i}=t.el.getBoundingClientRect();t.mouse[0]=(n-f-s/2)/(s/2),t.mouse[1]=-(o-i-a/2)/(a/2),t.uniform("iMouse",t.mouse)}),t("loop",()=>{we=performance.now()/1e3,t.uniform("iTime",we)}),t(e)},on=Lt;0&&(module.exports={Fn,If,Loop,Return,Switch,abs,acos,acosh,all,any,asin,asinh,assign,atan,atan2,atanh,attribute,bitcast,bool,builtin,bvec2,bvec3,bvec4,cbrt,ceil,clamp,color,compute,constant,conversion,cos,cosh,createGL,cross,cubeTexture,dFdx,dFdy,degrees,difference,distance,dot,element,equals,exp,exp2,faceforward,float,floor,fract,fragDepth,fragment,frontFacing,function_,fwidth,iMouse,iResolution,iTime,instanceIndex,int,inverseSqrt,isGL,isServer,isWebGPUSupported,ivec2,ivec3,ivec4,length,lengthSq,log,log2,mat2,mat3,mat4,max,member,min,mix,mod,negate,node,normalLocal,normalView,normalWorld,normalize,oneMinus,operator,pointCoord,position,positionLocal,positionView,positionWorld,pow,pow2,pow3,pow4,radians,reciprocal,reflect,refract,round,sampleIndex,sampleMask,sampler2D,saturate,screenCoordinate,screenUV,select,sign,sin,sinh,smoothstep,sqrt,step,struct,tan,tanh,texture,texture2D,textureSize,toVar,transformDirection,trunc,uint,uniform,uv,uvec2,uvec3,uvec4,variable,vec2,vec3,vec4,vertex,vertexIndex,vertexStage,webgl,webgpu});
|
|
40
44
|
//# sourceMappingURL=index.cjs.map
|