glre 0.42.0 → 0.44.0

package/src/utils/helpers.ts

@@ -94,7 +94,8 @@ export const getStride = (arrayLength: number, count = 1, error = console.warn)
 
 export const GLSL_FS = /* cpp */ `
 #version 300 es
-precision mediump float;
+precision highp float;
+precision highp int;
 out vec4 fragColor;
 uniform vec2 iResolution;
 void main() {

package/src/utils/program.ts

@@ -32,12 +32,7 @@ export const createArrayBuffer = (c: WebGL2RenderingContext, data: number[]) =>
         return { array, buffer }
 }
 
-export const setArrayBuffer = (
-        c: WebGL2RenderingContext,
-        array: Float32Array,
-        buffer: WebGLBuffer,
-        value: number[]
-) => {
+export const setArrayBuffer = (c: WebGL2RenderingContext, array: Float32Array, buffer: WebGLBuffer, value: number[]) => {
         array.set(value)
         c.bindBuffer(c.ARRAY_BUFFER, buffer)
         c.bufferData(c.ARRAY_BUFFER, array, c.STATIC_DRAW)
@@ -65,13 +60,7 @@ export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocati
         c[`uniformMatrix${l as 2}fv`](loc, false, value)
 }
 
-export const createTexture = (
-        c: WebGL2RenderingContext,
-        el: HTMLImageElement | HTMLVideoElement,
-        loc: WebGLUniformLocation,
-        unit: number,
-        isVideo = false
-) => {
+export const createTexture = (c: WebGL2RenderingContext, el: HTMLImageElement | HTMLVideoElement, loc: WebGLUniformLocation, unit: number, isVideo = false) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
         c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
@@ -100,16 +89,7 @@ interface TextureBuffer {
         buffer: WebGLFramebuffer
 }
 
-export const createStorage = (
-        c: WebGL2RenderingContext,
-        value: number[],
-        width: number,
-        height: number,
-        ping: TextureBuffer,
-        pong: TextureBuffer,
-        unit: number,
-        array: Float32Array
-) => {
+export const createStorage = (c: WebGL2RenderingContext, value: number[], width: number, height: number, ping: TextureBuffer, pong: TextureBuffer, unit: number, array: Float32Array) => {
         const particleCount = width * height
         const vectorSize = value.length / particleCount
         for (let i = 0; i < particleCount; i++) {
@@ -132,10 +112,7 @@ export const createStorage = (
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
 }
 
-export const cleanStorage = (
-        c: WebGL2RenderingContext,
-        map: Iterable<{ ping: TextureBuffer; pong: TextureBuffer }>
-) => {
+export const cleanStorage = (c: WebGL2RenderingContext, map: Iterable<{ ping: TextureBuffer; pong: TextureBuffer }>) => {
         for (const { ping, pong } of map) {
                 c.deleteTexture(ping.texture)
                 c.deleteTexture(pong.texture)
@@ -144,14 +121,7 @@ export const cleanStorage = (
         }
 }
 
-export const createAttachment = (
-        c: WebGL2RenderingContext,
-        i: TextureBuffer,
-        o: TextureBuffer,
-        loc: WebGLUniformLocation,
-        unit: number,
-        index: number
-) => {
+export const createAttachment = (c: WebGL2RenderingContext, i: TextureBuffer, o: TextureBuffer, loc: WebGLUniformLocation, unit: number, index: number) => {
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, i.texture)
         c.uniform1i(loc, unit)
@@ -168,19 +138,13 @@ export const storageSize = (particleCount: number | number[] = 1024) => {
         if (is.num(particleCount)) {
                 const sqrt = Math.sqrt(particleCount)
                 const size = Math.ceil(sqrt)
-                if (!Number.isInteger(sqrt)) {
-                        console.warn(
-                                `GLRE Storage Warning: particleCount (${particleCount}) is not a square. Using ${size}x${size} texture may waste GPU memory. Consider using [width, height] format for optimal storage.`
-                        )
-                }
+                if (!Number.isInteger(sqrt)) console.warn(`GLRE Storage Warning: particleCount (${particleCount}) is not a square. Using ${size}x${size} texture may waste GPU memory. Consider using [width, height] format for optimal storage.`)
                 return { x: size, y: size }
         }
         const [x, y, z] = particleCount
         if (z !== undefined) {
                 const yz = y * z
-                console.warn(
-                        `GLRE Storage Warning: 3D particleCount [${x}, ${y}, ${z}] specified but WebGL storage textures only support 2D. Flattening to 2D by multiplying height=${y} * depth=${z} = ${yz}.`
-                )
+                console.warn(`GLRE Storage Warning: 3D particleCount [${x}, ${y}, ${z}] specified but WebGL storage textures only support 2D. Flattening to 2D by multiplying height=${y} * depth=${z} = ${yz}.`)
                 return { x, y: yz }
         }
         return { x, y }

package/src/utils/webgl.ts

@@ -1,19 +1,7 @@
 import { nested as cached } from 'reev'
 import { is, getStride, GLSL_VS, GLSL_FS, loadingTexture } from './helpers'
-import {
-        createArrayBuffer,
-        cleanStorage,
-        createAttachment,
-        createProgram,
-        createStorage,
-        createTexture,
-        setArrayBuffer,
-        storageSize,
-        updateAttrib,
-        updateInstance,
-        updateUniform,
-} from './program'
-import type { GL, WebGLState } from '../types'
+import { createArrayBuffer, cleanStorage, createAttachment, createProgram, createStorage, createTexture, setArrayBuffer, storageSize, updateAttrib, updateInstance, updateUniform } from './program'
+import type { GL } from '../types'
 
 const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
         if (!gl.cs) return null // ignore if no compute shader
@@ -67,17 +55,17 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
 
 export const webgl = async (gl: GL) => {
         const config = { isWebGL: true, gl }
-        const c = gl.el!.getContext('webgl2')!
+        const c = (gl.webgl.context = gl.el!.getContext('webgl2')!)
         const cp = computeProgram(gl, c)
         const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs!.fragment(config)) : GLSL_FS
         const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs!.vertex(config)) : GLSL_VS
-        const pg = createProgram(c, fs, vs, gl)!
+        const pg = (gl.webgl.program = createProgram(c, fs, vs, gl)!)
         c.useProgram(pg)
 
         let activeUnit = 0 // for texture units
 
         const units = cached(() => activeUnit++)
-        const uniforms = cached((key) => c.getUniformLocation(pg, key))
+        const uniforms = (gl.webgl.uniforms = cached((key) => c.getUniformLocation(pg, key)))
 
         const attribs = cached((key, value: number[], isInstance = false) => {
                 const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count, gl.error)
@@ -138,7 +126,10 @@ export const webgl = async (gl: GL) => {
                 c.cullFace(c.BACK)
         }
 
-        const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }
+        if (gl.wireframe) {
+                const ext = c.getExtension('WEBGL_polygon_mode')
+                ext.polygonModeWEBGL(c.FRONT_AND_BACK, ext.LINE_WEBGL)
+        }
 
-        return { webgl, render, clean, _attribute, _instance, _uniform, _texture, _storage: cp?._storage }
+        return { render, clean, _attribute, _instance, _uniform, _texture, _storage: cp?._storage }
 }