glre 0.23.0 → 0.25.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 +11 -13
- package/dist/index.d.ts +39 -22
- package/dist/index.js +17 -15
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +17 -15
- package/dist/index.mjs.map +1 -1
- package/dist/native.d.ts +1 -1
- package/dist/native.js +17 -15
- package/dist/native.js.map +1 -1
- package/dist/native.mjs +17 -15
- package/dist/native.mjs.map +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +17 -15
- package/dist/react.js.map +1 -1
- package/dist/react.mjs +17 -15
- package/dist/react.mjs.map +1 -1
- package/dist/solid.d.ts +1 -1
- package/dist/solid.js +17 -15
- package/dist/solid.js.map +1 -1
- package/dist/solid.mjs +17 -15
- package/dist/solid.mjs.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +14 -14
- package/src/node/index.ts +2 -2
- package/src/types.ts +7 -0
- package/src/utils/pipeline.ts +59 -75
- package/src/utils/program.ts +23 -17
- package/src/webgl.ts +34 -58
- package/src/webgpu.ts +72 -50
package/README.md
CHANGED
|
@@ -114,11 +114,11 @@ npm install glre
|
|
|
114
114
|
|
|
115
115
|
```ts
|
|
116
116
|
import { createRoot } from 'react-dom/client'
|
|
117
|
-
import { useGL, vec4, fract,
|
|
118
|
-
const
|
|
117
|
+
import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/react'
|
|
118
|
+
const frag = vec4(fract(fragCoord.xy / iResolution), 0, 1)
|
|
119
119
|
|
|
120
120
|
const App = () => {
|
|
121
|
-
const gl = useGL({
|
|
121
|
+
const gl = useGL({ frag })
|
|
122
122
|
return <canvas ref={gl.ref} />
|
|
123
123
|
}
|
|
124
124
|
|
|
@@ -136,10 +136,10 @@ react-native supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre
|
|
|
136
136
|
import { GLView } from 'expo-gl'
|
|
137
137
|
import { registerRootComponent } from 'expo'
|
|
138
138
|
import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/native'
|
|
139
|
-
const
|
|
139
|
+
const frag = vec4(fract(fragCoord.xy / iResolution), 0, 1)
|
|
140
140
|
|
|
141
141
|
const App = () => {
|
|
142
|
-
const { gl, ref } = useGL({
|
|
142
|
+
const { gl, ref } = useGL({ frag })
|
|
143
143
|
return <GLView style={{ flex: 1 }} onContextCreate={ref} />
|
|
144
144
|
}
|
|
145
145
|
|
|
@@ -157,10 +157,10 @@ solid js supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre-sol
|
|
|
157
157
|
```ts
|
|
158
158
|
import { render } from 'solid-js/web'
|
|
159
159
|
import { onGL, vec4, fract, fragCoord, iResolution } from 'glre/solid'
|
|
160
|
-
const
|
|
160
|
+
const frag = vec4(fract(fragCoord.xy / iResolution), 0, 1)
|
|
161
161
|
|
|
162
162
|
const App = () => {
|
|
163
|
-
const gl = onGL({
|
|
163
|
+
const gl = onGL({ frag })
|
|
164
164
|
return <canvas ref={gl.ref} />
|
|
165
165
|
}
|
|
166
166
|
|
|
@@ -177,13 +177,11 @@ esm supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr
|
|
|
177
177
|
|
|
178
178
|
```html
|
|
179
179
|
<script type="module">
|
|
180
|
-
import createGL from 'https://esm.sh/glre'
|
|
181
|
-
|
|
182
|
-
const fragment = vec4(fract(fragCoord.xy / iResolution), 0, 1)
|
|
180
|
+
import { createGL, vec4, fract, fragCoord, iResolution } from 'https://esm.sh/glre'
|
|
181
|
+
const frag = vec4(fract(fragCoord.xy / iResolution), 0, 1)
|
|
183
182
|
function App() {
|
|
184
183
|
const el = document.createElement('canvas')
|
|
185
|
-
|
|
186
|
-
createGL({ el, gl, fragment }).mount()
|
|
184
|
+
createGL({ el, frag }).mount()
|
|
187
185
|
document.body.append(el)
|
|
188
186
|
}
|
|
189
187
|
document.addEventListener('DOMContentLoaded', App)
|
|
@@ -209,7 +207,7 @@ The node system provides various types and functions that mirror GLSL functional
|
|
|
209
207
|
import { float, int, vec2, vec3, vec4, mat3, mat4 } from 'glre'
|
|
210
208
|
|
|
211
209
|
// Built-in variables
|
|
212
|
-
import {
|
|
210
|
+
import { fragCoord, gl_Position, iResolution, iTime } from 'glre'
|
|
213
211
|
|
|
214
212
|
// Math functions
|
|
215
213
|
import { sin, cos, abs, pow, mix, clamp, normalize } from 'glre'
|
package/dist/index.d.ts
CHANGED
|
@@ -124,8 +124,8 @@ declare const updateUniforms: (context: UpdateContext) => void;
|
|
|
124
124
|
|
|
125
125
|
declare const Fn: (jsFunc: Function) => FunctionNode;
|
|
126
126
|
declare const If: (condition: X, callback: () => void) => ConditionalNode;
|
|
127
|
-
declare const
|
|
128
|
-
declare const
|
|
127
|
+
declare const fragCoord: X;
|
|
128
|
+
declare const position: X;
|
|
129
129
|
declare const iTime: UniformNode;
|
|
130
130
|
declare const iResolution: UniformNode;
|
|
131
131
|
declare const iMouse: UniformNode;
|
|
@@ -144,6 +144,7 @@ type GPUContext = any;
|
|
|
144
144
|
type GPUDevice = any;
|
|
145
145
|
type GPUBuffer = any;
|
|
146
146
|
type GPUPipeline = any;
|
|
147
|
+
type GPUBindGroup = any;
|
|
147
148
|
type Uniform = number | number[];
|
|
148
149
|
type Attribute = number[];
|
|
149
150
|
type Attributes = Record<string, Attribute>;
|
|
@@ -157,9 +158,15 @@ interface WebGLState {
|
|
|
157
158
|
program: WebGLProgram;
|
|
158
159
|
}
|
|
159
160
|
interface WebGPUState {
|
|
161
|
+
uniforms: any;
|
|
162
|
+
textures: any;
|
|
160
163
|
device: GPUDevice;
|
|
161
164
|
context: GPUContext;
|
|
165
|
+
groups: any[];
|
|
162
166
|
pipeline: GPUPipeline;
|
|
167
|
+
resources: any[];
|
|
168
|
+
loadingImg: number;
|
|
169
|
+
needsUpdate: boolean;
|
|
163
170
|
}
|
|
164
171
|
type GL = EventState<{
|
|
165
172
|
/**
|
|
@@ -271,12 +278,12 @@ declare const fig: (x?: number) => number;
|
|
|
271
278
|
declare const dig: (x?: number) => number;
|
|
272
279
|
declare const sig: (value?: number, digit?: number) => number;
|
|
273
280
|
|
|
274
|
-
declare const
|
|
281
|
+
declare const createDevive: (c: GPUContext) => Promise<{
|
|
275
282
|
device: any;
|
|
276
|
-
context: any;
|
|
277
283
|
format: any;
|
|
278
|
-
}
|
|
279
|
-
declare const
|
|
284
|
+
}>;
|
|
285
|
+
declare const createPipeline: (device: GPUDevice, format: string, buffers: any[], layouts: any[], vs?: string | X, fs?: string | X) => GPUPipeline;
|
|
286
|
+
declare const createBindGroup: (device: GPUDevice, resources: any[]) => any[];
|
|
280
287
|
declare const createDescriptor: (c: GPUContext) => {
|
|
281
288
|
colorAttachments: {
|
|
282
289
|
view: any;
|
|
@@ -291,28 +298,38 @@ declare const createDescriptor: (c: GPUContext) => {
|
|
|
291
298
|
}[];
|
|
292
299
|
};
|
|
293
300
|
declare const alignTo256: (size: number) => number;
|
|
294
|
-
declare const createUniformBuffer: (device: GPUDevice,
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
declare const
|
|
299
|
-
declare const createDeviceTexture: (device: GPUDevice, image: HTMLImageElement) => any;
|
|
300
|
-
declare const createSampler: (device: GPUDevice) => any;
|
|
301
|
-
declare const getDefaultVertices: () => Float32Array<ArrayBuffer>;
|
|
301
|
+
declare const createUniformBuffer: (device: GPUDevice, value: number[]) => {
|
|
302
|
+
array: Float32Array<ArrayBuffer>;
|
|
303
|
+
buffer: Buffer;
|
|
304
|
+
};
|
|
305
|
+
declare const createTextureSampler: (device: GPUDevice, width?: number, height?: number) => readonly [any, any];
|
|
302
306
|
|
|
303
307
|
declare const defaultVertexGLSL = "\n#version 300 es\nvoid main() {\n float x = float(gl_VertexID % 2) * 4.0 - 1.0;\n float y = float(gl_VertexID / 2) * 4.0 - 1.0;\n gl_Position = vec4(x, y, 0.0, 1.0);\n}\n";
|
|
304
308
|
declare const defaultFragmentGLSL = "\n#version 300 es\nprecision mediump float;\nuniform vec2 iResolution;\nout vec4 fragColor;\nvoid main() {\n fragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);\n}\n";
|
|
305
|
-
declare const
|
|
306
|
-
declare const createProgram: (c: WebGLRenderingContext, vs?: string, fs?: string) => WebGLProgram;
|
|
309
|
+
declare const createProgram: (c: WebGLRenderingContext, vs?: string | X, fs?: string | X) => WebGLProgram;
|
|
307
310
|
declare const createVbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
|
|
308
311
|
declare const createIbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
|
|
309
|
-
declare const
|
|
310
|
-
declare const
|
|
311
|
-
declare const
|
|
312
|
+
declare const getStride: (count: number, value: number[], iboValue?: number[]) => number;
|
|
313
|
+
declare const createAttrib: (c: WebGLRenderingContext, stride: number, loc: any, vbo: WebGLBuffer, ibo?: WebGLBuffer) => void;
|
|
314
|
+
declare const createTexture: (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => void;
|
|
312
315
|
|
|
313
|
-
declare const webgl: (gl: GL) => Promise<
|
|
316
|
+
declare const webgl: (gl: Partial<GL>) => Promise<{
|
|
317
|
+
webgl: WebGLState;
|
|
318
|
+
render: () => void;
|
|
319
|
+
clean: () => void;
|
|
320
|
+
_attribute: (key: string | undefined, value: number[], iboValue: number[]) => void;
|
|
321
|
+
_uniform: (key: string, value: number | number[]) => void;
|
|
322
|
+
_texture: (alt: string, src: string) => void;
|
|
323
|
+
}>;
|
|
314
324
|
|
|
315
|
-
declare const webgpu: (gl: GL) => Promise<
|
|
325
|
+
declare const webgpu: (gl: Partial<GL>) => Promise<{
|
|
326
|
+
webgpu: WebGPUState;
|
|
327
|
+
render: () => void;
|
|
328
|
+
clean: () => void;
|
|
329
|
+
_attribute: (key: string | undefined, value: number[]) => void;
|
|
330
|
+
_uniform: (key: string, value: number | number[]) => void;
|
|
331
|
+
_texture: (key: string, src: string) => void;
|
|
332
|
+
}>;
|
|
316
333
|
|
|
317
334
|
declare const isGL: (a: unknown) => a is EventState<GL>;
|
|
318
335
|
declare const isServer: () => boolean;
|
|
@@ -363,4 +380,4 @@ declare const createGL: (props?: Partial<GL>) => EventState<{
|
|
|
363
380
|
}): GL;
|
|
364
381
|
}, any[] | unknown[]>;
|
|
365
382
|
|
|
366
|
-
export { Attribute, Attributes, CACHE_BOOLS, CACHE_FLOATS, CACHE_INTS, ConditionalNode, ConversionContext, FUNCTIONS, Fn, FunctionNode, GL, GLClearMode, GLDrawMode, GLDrawType, GPUBuffer, GPUContext, GPUDevice, GPUPipeline, If, MathFunction, MathMethods, Node, NodeCreator, NodeType, OPERATORS, Operator, OperatorMethods, PrecisionMode, ProxyCallback, SWIZZLES, Swillzes, SwizzleProperties, TYPES, Uniform, UniformNode, Uniforms, WebGLState, WebGPUState, X, abs,
|
|
383
|
+
export { Attribute, Attributes, CACHE_BOOLS, CACHE_FLOATS, CACHE_INTS, ConditionalNode, ConversionContext, FUNCTIONS, Fn, FunctionNode, GL, GLClearMode, GLDrawMode, GLDrawType, GPUBindGroup, GPUBuffer, GPUContext, GPUDevice, GPUPipeline, If, MathFunction, MathMethods, Node, NodeCreator, NodeType, OPERATORS, Operator, OperatorMethods, PrecisionMode, ProxyCallback, SWIZZLES, Swillzes, SwizzleProperties, TYPES, Uniform, UniformNode, Uniforms, WebGLState, WebGPUState, X, abs, alignTo256, bool, ceil, color, convertToNode, cos, createAttrib, createBindGroup, createDescriptor, createDevive, createGL, createIbo, createNode, createPipeline, createProgram, createTexture, createTextureSampler, createUniformBuffer, createVbo, createGL as default, defaultFragmentGLSL, defaultVertexGLSL, dig, each, ext, fig, findDuplicateNodes, float, floor, flush, fract, fragCoord, getCachedBool, getCachedFloat, getCachedInt, getStride, glsl, iDeltaTime, iMouse, iPrevTime, iResolution, iTime, int, is, isGL, isServer, isWebGPUSupported, length, node, nodeToGLSL, nodeToWGSL, normalize, position, replace, sig, sin, sqrt, tan, uniform, updateUniforms, vec2, vec3, vec4, webgl, webgpu, wgsl };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
`),u+=`precision ${
|
|
1
|
+
"use strict";var P=Object.defineProperty;var Ee=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var we=Object.prototype.hasOwnProperty;var Le=(e,t)=>{for(var r in t)P(e,r,{get:t[r],enumerable:!0})},Ne=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of $e(t))!we.call(e,o)&&o!==r&&P(e,o,{get:()=>t[o],enumerable:!(n=Ee(t,o))||n.enumerable});return e};var Se=e=>Ne(P({},"__esModule",{value:!0}),e);var Gt={};Le(Gt,{CACHE_BOOLS:()=>J,CACHE_FLOATS:()=>te,CACHE_INTS:()=>ee,FUNCTIONS:()=>Q,Fn:()=>ct,If:()=>pt,OPERATORS:()=>Z,SWIZZLES:()=>K,TYPES:()=>qe,abs:()=>bt,alignTo256:()=>me,bool:()=>Ze,ceil:()=>$t,color:()=>et,convertToNode:()=>He,cos:()=>yt,createAttrib:()=>O,createBindGroup:()=>V,createDescriptor:()=>j,createDevive:()=>D,createGL:()=>Te,createIbo:()=>I,createNode:()=>w,createPipeline:()=>q,createProgram:()=>F,createTexture:()=>z,createTextureSampler:()=>H,createUniformBuffer:()=>Y,createVbo:()=>M,default:()=>Ct,defaultFragmentGLSL:()=>ce,defaultVertexGLSL:()=>fe,dig:()=>Ue,each:()=>ae,ext:()=>Re,fig:()=>_e,findDuplicateNodes:()=>je,float:()=>_,floor:()=>Et,flush:()=>Ce,fract:()=>wt,fragCoord:()=>mt,getCachedBool:()=>C,getCachedFloat:()=>R,getCachedInt:()=>G,getStride:()=>B,glsl:()=>L,iDeltaTime:()=>be,iMouse:()=>ht,iPrevTime:()=>he,iResolution:()=>gt,iTime:()=>dt,int:()=>Ke,is:()=>i,isGL:()=>St,isServer:()=>xe,isWebGPUSupported:()=>ye,length:()=>Nt,node:()=>s,nodeToGLSL:()=>se,nodeToWGSL:()=>pe,normalize:()=>Lt,position:()=>lt,replace:()=>Ge,sig:()=>Xe,sin:()=>xt,sqrt:()=>vt,tan:()=>Tt,uniform:()=>h,updateUniforms:()=>ft,vec2:()=>Qe,vec3:()=>de,vec4:()=>Je,webgl:()=>W,webgpu:()=>k,wgsl:()=>S});module.exports=Se(Gt);var v=require("reev"),X=require("refr");var N=require("reev");var i={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)},ae=(e,t)=>e.forEach(t),Ce=(e,...t)=>{ae(e,r=>r(...t))},Ge=(e="",t="_",r="/")=>e.split(t).join(r),Re=(e=".pdf")=>e.split(".").pop()?.toLowerCase()??"",_e=(e=0)=>`${e}`.split(".")[1]?.length??0,Ue=(e=0)=>`${e}`.split(".")[0]?.length-(e<0?1:0),Xe=(e=0,t=-2)=>(t*=-1,t=Math.pow(10,t),e*=t,e=Math.round(e),e/=t,e);var se=(e,t)=>{let r={target:"webgl",precision:"mediump",version:"300 es",nodes:new Map,variables:new Map,functions:new Map,...t};return E(e,r)},E=(e,t)=>e?i.und(e.value)?e.property&&e.parent?`${E(e.parent,t)}.${e.property}`:e.operator&&e.children&&e.children.length>=2?Pe(e,t):e.mathFunction&&e.children&&e.children.length>=1?Fe(e,t):"0.0":Ae(e.value,e.type):"0.0",Ae=(e,t)=>{if(t==="float"){let r=Number(e);return r%1===0?`${r}.0`:`${r}`}if(t==="int")return`${Math.floor(Number(e))}`;if(t==="bool")return e?"true":"false";if(i.arr(e)){let r=e.map(n=>{let o=Number(n);return o%1===0?`${o}.0`:`${o}`}).join(", ");if(t==="vec2")return`vec2(${r})`;if(t==="vec3")return`vec3(${r})`;if(t==="vec4")return`vec4(${r})`;if(t==="color")return`vec3(${r})`}return"0.0"},Pe=(e,t)=>{if(!e.children||e.children.length<2)return"0.0";let r=E(e.children[0],t),n=E(e.children[1],t);return e.operator==="add"?`(${r} + ${n})`:e.operator==="sub"?`(${r} - ${n})`:e.operator==="mul"?`(${r} * ${n})`:e.operator==="div"?`(${r} / ${n})`:e.operator==="mod"?`mod(${r}, ${n})`:e.operator==="equal"?`(${r} == ${n})`:e.operator==="notEqual"?`(${r} != ${n})`:e.operator==="lessThan"?`(${r} < ${n})`:e.operator==="lessThanEqual"?`(${r} <= ${n})`:e.operator==="greaterThan"?`(${r} > ${n})`:e.operator==="greaterThanEqual"?`(${r} >= ${n})`:e.operator==="and"?`(${r} && ${n})`:e.operator==="or"?`(${r} || ${n})`:`(${r} + ${n})`},Fe=(e,t)=>{if(!e.children||e.children.length<1)return"0.0";let r=e.mathFunction,n=e.children.map(l=>E(l,t)),[o,a,u]=n;return n.length===1?`${r}(${o})`:n.length===2?`${r}(${o}, ${a})`:n.length===3?`${r}(${o}, ${a}, ${u})`:o||"0.0"},Me=e=>{if(i.num(e))return"float";if(i.bol(e))return"bool";if(i.arr(e)){let t=e.length;if(t===2)return"vec2";if(t===3)return"vec3";if(t===4)return"vec4"}return"float"},L=(e,t)=>{let r=t?.precision||"mediump",o=(t?.version||"300 es")==="300 es",a=se(e),u="";return o&&(u+=`#version 300 es
|
|
2
|
+
`),u+=`precision ${r} float;
|
|
3
3
|
|
|
4
|
-
`,
|
|
4
|
+
`,t?.uniforms&&(Object.entries(t.uniforms).forEach(([l,b])=>{let x=Me(b);u+=`uniform ${x} ${l};
|
|
5
5
|
`}),u+=`
|
|
6
6
|
`),o&&(u+=`out vec4 fragColor;
|
|
7
7
|
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
`,u+=o?` fragColor = ${a};
|
|
10
10
|
`:` gl_FragColor = ${a};
|
|
11
11
|
`,u+=`}
|
|
12
|
-
`,u};var
|
|
12
|
+
`,u};var fe=`
|
|
13
13
|
#version 300 es
|
|
14
14
|
void main() {
|
|
15
15
|
float x = float(gl_VertexID % 2) * 4.0 - 1.0;
|
|
16
16
|
float y = float(gl_VertexID / 2) * 4.0 - 1.0;
|
|
17
17
|
gl_Position = vec4(x, y, 0.0, 1.0);
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`,ce=`
|
|
20
20
|
#version 300 es
|
|
21
21
|
precision mediump float;
|
|
22
22
|
uniform vec2 iResolution;
|
|
@@ -24,23 +24,25 @@ out vec4 fragColor;
|
|
|
24
24
|
void main() {
|
|
25
25
|
fragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
|
|
26
26
|
}
|
|
27
|
-
`,
|
|
28
|
-
`}),
|
|
29
|
-
`),
|
|
30
|
-
`,
|
|
31
|
-
`;let n=
|
|
32
|
-
`,
|
|
33
|
-
`,
|
|
27
|
+
`,ue=(e,t,r)=>{let n=e.createShader(r);if(!n)throw new Error("Failed to create shader");if(e.shaderSource(n,t.trim()),e.compileShader(n),e.getShaderParameter(n,e.COMPILE_STATUS))return n;let o=e.getShaderInfoLog(n);throw e.deleteShader(n),new Error(`Could not compile shader: ${o}`)},F=(e,t=fe,r=ce)=>{i.obj(r)&&(r=L(r)),i.obj(t)&&(t=L(t));let n=e.createProgram();if(e.attachShader(n,ue(e,t,e.VERTEX_SHADER)),e.attachShader(n,ue(e,r,e.FRAGMENT_SHADER)),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS))return n;let o=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`Could not link pg: ${o}`)},M=(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},I=(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},B=(e,t,r)=>{r&&(e=Math.max(...r)+1);let n=t.length/e;return Math.floor(n)},O=(e,t,r,n,o)=>{e.bindBuffer(e.ARRAY_BUFFER,n),e.enableVertexAttribArray(r),e.vertexAttribPointer(r,t,e.FLOAT,!1,0,0),o&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,o)},z=(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)};var W=async e=>{let t=e.el.getContext("webgl2"),r=F(t,e.vs,e.fs),n={context:t,program:r};t.useProgram(r);let o=0,a=(0,N.nested)(()=>o++),u=(0,N.nested)(p=>t.getUniformLocation(r,p)),l=(0,N.nested)(p=>t.getAttribLocation(r,p));return{webgl:n,render:()=>{t.clear(t.COLOR_BUFFER_BIT),t.viewport(0,0,...e.size),t.drawArrays(t.TRIANGLES,0,3)},clean:()=>t.deleteProgram(r),_attribute:(p="",f,c)=>{let m=l(p,!0),T=M(t,f),A=I(t,c),ve=B(e.count,f,c);O(t,ve,m,T,A)},_uniform:(p,f)=>{let c=u(p);if(i.num(f))return t.uniform1f(c,f);let m=f.length;if(m<=4)return t[`uniform${m}fv`](c,f);m=Math.sqrt(m)<<0,t[`uniformMatrix${m}fv`](c,!1,f)},_texture:(p,f)=>{let c=new Image;Object.assign(c,{src:f,alt:p,crossOrigin:"anonymous"}),c.decode().then(()=>{let m=u(c.alt),T=a(c.alt);z(t,c,m,T)})}}};var pe=(e,t)=>{let r={target:"webgpu",nodes:new Map,variables:new Map,functions:new Map,...t};return $(e,r)},$=(e,t)=>e?e.value!==void 0?Ie(e.value,e.type):e.property&&e.parent?`${$(e.parent,t)}.${e.property}`:e.operator&&e.children&&e.children.length>=2?Be(e,t):e.mathFunction&&e.children&&e.children.length>=1?Oe(e,t):"0.0":"0.0",Ie=(e,t)=>{if(t==="float"){let r=Number(e);return r%1===0?`${r}.0`:`${r}`}if(t==="int")return`${Math.floor(Number(e))}`;if(t==="bool")return e?"true":"false";if(i.arr(e)){let r=e.map(n=>{let o=Number(n);return o%1===0?`${o}.0`:`${o}`}).join(", ");if(t==="vec2")return`vec2<f32>(${r})`;if(t==="vec3")return`vec3<f32>(${r})`;if(t==="vec4")return`vec4<f32>(${r})`;if(t==="color")return`vec3<f32>(${r})`}return"0.0"},Be=(e,t)=>{if(!e.children||e.children.length<2)return"0.0";let r=$(e.children[0],t),n=$(e.children[1],t);return e.operator==="add"?`(${r} + ${n})`:e.operator==="sub"?`(${r} - ${n})`:e.operator==="mul"?`(${r} * ${n})`:e.operator==="div"?`(${r} / ${n})`:e.operator==="mod"?`(${r} % ${n})`:e.operator==="equal"?`(${r} == ${n})`:e.operator==="notEqual"?`(${r} != ${n})`:e.operator==="lessThan"?`(${r} < ${n})`:e.operator==="lessThanEqual"?`(${r} <= ${n})`:e.operator==="greaterThan"?`(${r} > ${n})`:e.operator==="greaterThanEqual"?`(${r} >= ${n})`:e.operator==="and"?`(${r} && ${n})`:e.operator==="or"?`(${r} || ${n})`:`(${r} + ${n})`},Oe=(e,t)=>{if(!e.children||e.children.length<1)return"0.0";let r=e.mathFunction,n=e.children.map(l=>$(l,t)),[o,a,u]=n;return n.length===1?`${r}(${o})`:n.length===2?`${r}(${o}, ${a})`:n.length===3?`${r}(${o}, ${a}, ${u})`:o||"0.0"},S=(e,t)=>{let r="";t?.uniforms&&(Object.entries(t.uniforms).forEach(([o,a])=>{let u=ze(a);r+=`@group(0) @binding(0) var<uniform> ${o}: ${u};
|
|
28
|
+
`}),r+=`
|
|
29
|
+
`),r+=`@fragment
|
|
30
|
+
`,r+=`fn main() -> @location(0) vec4<f32> {
|
|
31
|
+
`;let n=pe(e);return r+=` return ${n};
|
|
32
|
+
`,r+=`}
|
|
33
|
+
`,r},ze=e=>{if(i.num(e))return"f32";if(i.bol(e))return"bool";if(i.arr(e)){let t=e.length;if(t===2)return"vec2<f32>";if(t===3)return"vec3<f32>";if(t===4)return"vec4<f32>"}return"f32"};var We=`
|
|
34
34
|
@vertex
|
|
35
35
|
fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
|
|
36
36
|
let x = f32(vertex_index % 2u) * 4.0 - 1.0;
|
|
37
37
|
let y = f32(vertex_index / 2u) * 4.0 - 1.0;
|
|
38
38
|
return vec4f(x, y, 0.0, 1.0);
|
|
39
39
|
}
|
|
40
|
-
`,
|
|
40
|
+
`,De=`
|
|
41
|
+
@group(0) @binding(0) var<uniform> iResolution: vec2f;
|
|
42
|
+
|
|
41
43
|
@fragment
|
|
42
44
|
fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
|
|
43
|
-
return vec4f(position.xy /
|
|
45
|
+
return vec4f(position.xy / iResolution, 0.0, 1.0);
|
|
44
46
|
}
|
|
45
|
-
`,
|
|
47
|
+
`,D=async e=>{let t=navigator.gpu,r=t.getPreferredCanvasFormat(),o=await(await t.requestAdapter()).requestDevice();return e.configure({device:o,format:r,alphaMode:"opaque"}),{device:o,format:r}},q=(e,t,r,n,o=We,a=De)=>{i.obj(a)&&(a=S(a)),i.obj(o)&&(o=S(o));let u=e.createPipelineLayout({bindGroupLayouts:n});return e.createRenderPipeline({vertex:{module:e.createShaderModule({code:o.trim()}),entryPoint:"main",buffers:r},fragment:{module:e.createShaderModule({code:a.trim()}),entryPoint:"main",targets:[{format:t}]},layout:u,primitive:{topology:"triangle-list"}})},V=(e,t)=>{let r=[],n=[];t.forEach((u,l)=>{if(!u)return;let b="buffer"in u,x=u instanceof GPUTextureView,d=u instanceof GPUSampler;if(b)r.push({binding:l,visibility:3,buffer:{type:"uniform"}});else if(x)r.push({binding:l,visibility:2,texture:{}});else if(d)r.push({binding:l,visibility:2,sampler:{}});else return;n.push({binding:l,resource:u})});let o=e.createBindGroupLayout({entries:r}),a=e.createBindGroup({layout:o,entries:n});return[o,a]},j=e=>({colorAttachments:[{view:e.getCurrentTexture().createView(),clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}]}),me=e=>Math.ceil(e/256)*256,Y=(e,t)=>{let r=new Float32Array(t),n=me(r.byteLength),o=e.createBuffer({size:n,usage:72});return{array:r,buffer:o}},H=(e,t=1280,r=800)=>{let n=e.createTexture({size:[t,r],format:"rgba8unorm",usage:22}),o=e.createSampler({magFilter:"linear",minFilter:"linear"});return[n,o]};var k=async e=>{let t=e.el.getContext("webgpu"),{device:r,format:n}=await D(t),o={device:r,context:t,uniforms:{},textures:{},resources:[[],[]],loadingImg:0,needsUpdate:!0},a=p=>{let{array:f,buffer:c}=Y(r,p);return o.resources[0].push({buffer:c}),o.needsUpdate=!0,{array:f,buffer:c}},u=p=>{let{width:f,height:c}=p,[m,T]=H(r,f,c);return o.resources[1].push(T,m.createView()),o.needsUpdate=!0,{texture:m,width:f,height:c}},l=()=>{let p=[];o.groups=[],o.resources.forEach(f=>{if(!f.length)return;let[c,m]=V(r,f);p.push(c),o.groups.push(m)}),o.pipeline=q(r,n,[],p,e.vs,e.fs)};return{webgpu:o,render:()=>{if(o.loadingImg)return;o.needsUpdate&&l(),o.needsUpdate=!1;let p=r.createCommandEncoder(),f=p.beginRenderPass(j(t));f.setPipeline(o.pipeline),o.groups.forEach((c,m)=>f.setBindGroup(m,c)),f.draw(e.count,1,0,0),f.end(),r.queue.submit([p.finish()])},clean:()=>{},_attribute:(p="",f)=>{},_uniform:(p,f)=>{i.num(f)&&(f=[f]),o.uniforms[p]||(o.uniforms[p]=a(f));let{array:c,buffer:m}=o.uniforms[p];c.set(f),r.queue.writeBuffer(m,0,c)},_texture:(p,f)=>{o.loadingImg++;let c=Object.assign(new Image,{src:f,crossOrigin:"anonymous"});c.decode().then(()=>{o.textures[p]||(o.textures[p]=u(c));let{texture:m,width:T,height:A}=o.textures[p];r.queue.copyExternalImageToTexture({source:c},{texture:m},{width:T,height:A}),o.loadingImg--})}}};var qe=["float","int","uint","bool","color","vec2","vec3","vec4","mat2","mat3","mat4","ivec2","ivec3","ivec4","uvec2","uvec3","uvec4","bvec2","bvec3","bvec4"],K=["x","y","z","w","r","g","b","a","s","t","p","q"],Z=["add","sub","mul","div","mod","equal","notEqual","lessThan","lessThanEqual","greaterThan","greaterThanEqual","and","or","not","assign","xor","bitAnd","bitNot","bitOr","bitXor","shiftLeft","shiftRight"],Q=["abs","acos","asin","atan","atan2","ceil","clamp","cos","cross","degrees","distance","dot","exp","exp2","faceforward","floor","fract","length","all","any","bitcast","cbrt","dFdx","dFdy","difference","equals","fwidth","inverseSqrt","lengthSq","log","log2","max","min","mix","negate","normalize","oneMinus","pow","pow2","pow3","pow4","radians","reciprocal","reflect","refract","round","saturate","sign","sin","smoothstep","sqrt","step","tan","transformDirection","trunc"],J=[!0,!1],ee=[0,1,2,3,4,5],te=[0,1,.5,2];var re=new Map,ne=new Map,oe=new Map,Ve=()=>{J.forEach(e=>{re.set(e,s("bool",e))}),ee.forEach(e=>{ne.set(e,s("int",e))}),te.forEach(e=>{oe.set(e,s("float",e))})},C=e=>(re.has(e)||Ve(),re.get(e)||s("bool",e)),G=e=>ne.has(e)?ne.get(e):s("int",e),R=e=>oe.has(e)?oe.get(e):s("float",e),je=e=>{let t=new Map,r=new Map;return e.forEach(n=>{let o=Ye(n);r.has(o)?(t.has(o)||t.set(o,[r.get(o)]),t.get(o).push(n)):r.set(o,n)}),t},Ye=e=>[e.type,`${e.value}`,e.property||""].join("|");var He=e=>i.bol(e)?C(e):i.num(e)?i.int(e)?G(e):R(e):i.arr(e)?le(e):i.obj(e)?ke(e):s("float",0),le=e=>{let t=e.length;return t===2?s("vec2",e):t===3?s("vec3",e):t===4?s("vec4",e):t===9?s("mat3",e):t===16?s("mat4",e):s("float",e[0])},ke=e=>{if("r"in e&&"g"in e&&"b"in e){let t=[e.r,e.g,e.b];return"a"in e&&t.push(e.a),s("color",t)}if("x"in e&&"y"in e){let t=[e.x,e.y];return"z"in e&&t.push(e.z),"w"in e&&t.push(e.w),le(t)}return s("float",0)},_=e=>i.num(e)?R(e):s("float",Number(e)),Ke=e=>i.num(e)&&Number.isInteger(e)?G(e):s("int",Math.floor(Number(e))),Ze=e=>C(!!e),Qe=(e,t)=>i.und(e)?s("vec2",[0,0]):i.und(t)?i.arr(e)?s("vec2",e.slice(0,2)):i.obj(e)&&"x"in e&&"y"in e?s("vec2",[e.x,e.y]):s("vec2",[Number(e),Number(e)]):s("vec2",[Number(e),Number(t)]),de=(e,t,r)=>i.und(e)?s("vec3",[0,0,0]):i.und(t)?i.arr(e)?s("vec3",e.slice(0,3)):i.obj(e)&&"x"in e&&"y"in e&&"z"in e?s("vec3",[e.x,e.y,e.z]):s("vec3",[Number(e),Number(e),Number(e)]):r===void 0?s("vec3",[Number(e),Number(t),0]):s("vec3",[Number(e),Number(t),Number(r)]),Je=(e,t,r,n)=>i.und(e)?s("vec4",[0,0,0,1]):i.und(t)?i.arr(e)?s("vec4",e.slice(0,4)):i.obj(e)&&"x"in e&&"y"in e&&"z"in e&&"w"in e?s("vec4",[e.x,e.y,e.z,e.w]):s("vec4",[Number(e),Number(e),Number(e),1]):s("vec4",[Number(e),Number(t),Number(r),Number(n)]),et=(e,t,r)=>{if(e===void 0)return s("color",[1,1,1]);if(i.str(e)&&e.startsWith("#")){let n=e.slice(1),o=parseInt(n,16);return s("color",[(o>>16&255)/255,(o>>8&255)/255,(o&255)/255])}return i.num(e)&&t===void 0&&r===void 0?s("color",[(e>>16&255)/255,(e>>8&255)/255,(e&255)/255]):de(e,t,r)};var tt=0,rt=()=>`node_${++tt}`,w=(e,t,r)=>({id:rt(),type:e,value:t,children:[],...r}),nt=(e="")=>K.includes(e),ot=(e="")=>Z.includes(e),it=(e="")=>Q.includes(e),U=(e,t)=>{let r=(o,a)=>{if(!(!i.str(a)||a==="then"))return a==="id"?e.id:a==="type"?e.type:a==="value"?e.value:a==="property"?e.property:nt(a)?U(w(at(a),void 0,{parent:e,property:a}),t):ot(a)?(...u)=>U(w(e.type,void 0,{operator:a,children:[e,...u]}),t):it(a)?(...u)=>U(w(st(a,e.type),void 0,{mathFunction:a,children:[e,...u]}),t):t?.({path:[a],args:[]})},n=(o,a,u)=>t?.({path:[],args:u});return new Proxy(()=>{},{get:r,apply:n})},at=e=>e.length===1?"float":e.length===2?"vec2":e.length===3?"vec3":e.length===4?"vec4":"float",st=(e,t)=>e==="length"?"float":t,s=(e,t,r)=>{let n=w(e,t,r);return U(n)};var ut=e=>{if(i.num(e))return"float";if(i.bol(e))return"bool";if(i.arr(e)){let t=e.length;if(t===2)return"vec2";if(t===3)return"vec3";if(t===4)return"vec4";if(t===9)return"mat3";if(t===16)return"mat4"}return i.obj(e)&&"r"in e&&"g"in e&&"b"in e?"color":"float"},h=e=>{let t=ut(e),r=e,n=null,o=null,a=s(t,r),u=g=>{r=g,a.value=g},l=g=>(n=g,d),b=g=>(o=g,d),x=g=>{if(n){let y=n(g);y!==void 0&&u(y)}if(o){let y=o(g);y!==void 0&&u(y)}},d=Object.create(a);return d.set=u,d.onObjectUpdate=l,d.onRenderUpdate=b,d._updateFromContext=x,d.isUniform=!0,d},ge=h(0),he=h(0),be=h(0),sr=h([1920,1080]),ur=h([0,0]),ft=e=>{if(e.time!==void 0){let t=ge.value||0;ge.set(e.time),he.set(t),be.set(e.time-t)}};var ct=e=>{let t=(...r)=>{let n=r.map(a=>i.obj(a)&&"type"in a&&a.type?a:_(a));return e(n)||_(0)};return t.call=r=>e(r),t},pt=(e,t)=>{t();let r={ElseIf(n,o){return o(),r},Else(n){n()}};return r},mt=s("vec4",void 0),lt=s("vec4",void 0),dt=h(0),gt=h([1920,1080]),ht=h([0,0]),bt=e=>e.abs(),xt=e=>e.sin(),yt=e=>e.cos(),Tt=e=>e.tan(),vt=e=>e.sqrt(),Et=e=>e.floor(),$t=e=>e.ceil(),wt=e=>e.fract(),Lt=e=>e.normalize(),Nt=e=>e.length();var St=e=>i.obj(e)?"isGL"in e:!1,xe=()=>typeof window>"u",ye=()=>xe()?!1:"gpu"in navigator,ie=performance.now(),Te=e=>{let t=(0,v.event)({isNative:!1,isWebGL:!0,isLoop:!0,isGL:!0,size:[0,0],mouse:[0,0],count:3,webgl:{},webgpu:{}});return t.queue=(0,X.createQueue)(),t.frame=(0,X.createFrame)(),t.attribute=(0,v.durable)((r,n,o)=>t.queue(()=>t._attribute?.(r,n,o))),t.texture=(0,v.durable)((r,n)=>t.queue(()=>t._texture?.(r,n))),t.uniform=(0,v.durable)((r,n,o)=>t.queue(()=>t._uniform?.(r,n,o))),t.uniform({iResolution:t.size,iMouse:[0,0],iTime:ie}),t("mount",async()=>{t.vs=t.vs||t.vert||t.vertex,t.fs=t.fs||t.frag||t.fragment,ye()||(t.isWebGL=!0),t.isWebGL?t(await W(t)):t(await k(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,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[a,u]=t.size,{top:l,left:b}=t.el.getBoundingClientRect();t.mouse[0]=(n-l-a/2)/(a/2),t.mouse[1]=-(o-b-u/2)/(u/2),t.uniform("iMouse",t.mouse)}),t("loop",()=>{ie=performance.now()/1e3,t.uniform("iTime",ie)}),t(e)},Ct=Te;0&&(module.exports={CACHE_BOOLS,CACHE_FLOATS,CACHE_INTS,FUNCTIONS,Fn,If,OPERATORS,SWIZZLES,TYPES,abs,alignTo256,bool,ceil,color,convertToNode,cos,createAttrib,createBindGroup,createDescriptor,createDevive,createGL,createIbo,createNode,createPipeline,createProgram,createTexture,createTextureSampler,createUniformBuffer,createVbo,defaultFragmentGLSL,defaultVertexGLSL,dig,each,ext,fig,findDuplicateNodes,float,floor,flush,fract,fragCoord,getCachedBool,getCachedFloat,getCachedInt,getStride,glsl,iDeltaTime,iMouse,iPrevTime,iResolution,iTime,int,is,isGL,isServer,isWebGPUSupported,length,node,nodeToGLSL,nodeToWGSL,normalize,position,replace,sig,sin,sqrt,tan,uniform,updateUniforms,vec2,vec3,vec4,webgl,webgpu,wgsl});
|
|
46
48
|
//# sourceMappingURL=index.js.map
|