@1pizzateam/roostr 0.8.1 → 0.9.0

package/README.md

@@ -1,6 +1,6 @@
 [![License: MIT](https://img.shields.io/npm/l/@1pizzateam/roostr.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%401pizzateam%2Froostr.svg)](https://www.npmjs.com/package/@1pizzateam/roostr)
-![Jest:coverage](https://img.shields.io/badge/Jest:coverage-89%25-brightgreen.svg)
+![Jest:coverage](https://img.shields.io/badge/Jest:coverage-94%25-brightgreen.svg)
 
 ## Synopsis
 

package/dist/roostr.d.ts

@@ -25,7 +25,7 @@ https://github.com/1pizzateam/RoostR.js
 */
 
 import { Mat4x3, Vec3, Quat, Mat3, Box, Sphere as Sphere$1, Vec2, Mat4, Ray3, Frustum, Rect } from '@1pizzateam/spock';
-export { Accumulator, Bezier, Box as BoundingBox, Sphere as BoundingSphere, Circ, Frustum, Grid, Mat3, Mat4, Mat4x3, NumArray, Quat, Rand, Ray3 as Ray, Ray2, Rect, RollingAverage, Plane as SpatialPlane, Time, Trigo, Utils, Vec2, Vec3 } from '@1pizzateam/spock';
+export { Accumulator, Bezier, Box as BoundingBox, Sphere as BoundingSphere, Circ, Frustum, GRID_EMPTY_CELL, Grid, Mat3, Mat4, Mat4x3, NumArray, PointSource, Quat, Rand, Ray3 as Ray, Ray2, RayHit2D, Rect, RightTriangle, RollingAverage, Plane as SpatialPlane, Time, TriangleCorner, TriangleShape, Trigo, Utils, Vec, Vec2, Vec3, raycastSegment } from '@1pizzateam/spock';
 
 declare class SceneRenderer {
     context: WebGLRenderingContext;
@@ -148,11 +148,14 @@ declare class GLState {
     program: WebGLProgram | null;
     arrayBuffer: WebGLBuffer | null;
     elementBuffer: WebGLBuffer | null;
+    texture2D: WebGLTexture | null;
     attributeMask: number | null;
     maxAttributes: number;
     frameOfProgram: WeakMap<object, number>;
     materialOfProgram: WeakMap<object, object>;
     materialVersionOfProgram: WeakMap<object, number>;
+    samplerInitializedOfProgram: WeakSet<object>;
+    hasTextureOfProgram: WeakMap<object, number>;
     invalidate(): void;
     reset(): void;
 }
@@ -188,6 +191,7 @@ interface IGeometry {
     primitive: string | null;
     uvs?: number[] | Float32Array | null;
     nbSubMeshes?: number;
+    bufferUsage?: 'STATIC_DRAW' | 'DYNAMIC_DRAW';
     quad?: {
         vertices: number[] | null;
         indices: number[] | null;
@@ -327,6 +331,7 @@ declare class Mesh extends Node<Mesh> implements IMesh {
     subMeshes: SubMesh[];
     nbSubMeshes: number;
     primitive: string | null;
+    bufferUsage: 'STATIC_DRAW' | 'DYNAMIC_DRAW';
     customUniforms: ICustomUniforms;
     context: WebGLRenderingContext;
     renderer: MeshRenderer;
@@ -368,6 +373,7 @@ declare class Mesh extends Node<Mesh> implements IMesh {
     private applyTextureOption;
     private releaseTexture;
     setTexture(img: TextureSource, options?: ITextureOptions): void;
+    setSharedTexture(texture: WebGLTexture | null): void;
     addCustomUniform(name: string, type: string, value: UniformValue): void;
     setCustomUniform(name: string, value: UniformValue): void;
     private createIndexData;
@@ -530,7 +536,7 @@ declare class SceneCollector {
     blendedList: Mesh[];
     scratchFrustum: Frustum;
     private scratchVec;
-    collect(meshes: Mesh[], camera: Camera, frustum: Frustum | null, opaque: boolean, blended: boolean, stamp: number): void;
+    collect(meshes: Mesh[], camera: Camera, frustum: Frustum | null, opaque: boolean, blended: boolean, stamp: number, maxDrawDistance?: number): void;
     drawBlended(scene: Scene, camera: Camera, time: number, flatLights: IFlatLights, frame: IFrameInfo): number;
 }
 
@@ -552,6 +558,7 @@ interface ISceneOptions {
         far: number;
     } | null;
     enableFrustumCulling?: boolean;
+    maxDrawDistance?: number;
 }
 declare class Scene {
     meshes: Mesh[];
@@ -564,6 +571,7 @@ declare class Scene {
         far: number;
     } | null;
     enableFrustumCulling: boolean;
+    maxDrawDistance: number;
     context: WebGLRenderingContext;
     renderer: SceneRenderer;
     graph: SceneGraph;
@@ -734,6 +742,27 @@ declare class OrbitControls {
     update(deltaTime?: number): void;
 }
 
+interface IQuadBatchOptions {
+    capacity: number;
+    vertexShader?: string;
+    fragmentShader?: string;
+    material?: Material;
+    texture?: TextureSource;
+    textureOptions?: ITextureOptions;
+    sharedTexture?: WebGLTexture | null;
+}
+declare class QuadBatch extends Mesh {
+    capacity: number;
+    used: number;
+    bounds: Box;
+    private scratchPoint;
+    constructor(context: WebGLRenderingContext, options: IQuadBatchOptions);
+    begin(): this;
+    quad(corners: ArrayLike<number>, uv: ArrayLike<number>): boolean;
+    end(): this;
+    show(visible: boolean): void;
+}
+
 declare class BasicMesh implements IGeometry {
     vertices: number[] | Float32Array | null;
     indices: number[] | Int32Array | Uint16Array | null;
@@ -821,6 +850,7 @@ declare class CustomMesh implements IGeometry {
     itemSize: number;
     primitive: string;
     primitives: string[];
+    bufferUsage: 'STATIC_DRAW' | 'DYNAMIC_DRAW';
     constructor();
     private static toFloat32;
     setVertices(array: Vec3[]): void;
@@ -932,10 +962,5 @@ declare const NormalShader: {
     create(context: WebGLRenderingContext): WebGLProgram | null;
 };
 
-type Vec3Like = Vec3 | ArrayLike<number>;
-type Vec2Like = Vec2 | ArrayLike<number>;
-declare function assignVec3(target: Vec3, xOrVec: Vec3Like | number, y?: number, z?: number): Vec3;
-declare function assignVec2(target: Vec2, xOrVec: Vec2Like | number, y?: number): Vec2;
-
-export { AmbientLight, BasicMesh, BasicShader, Camera, Cannon, Cube, CustomMesh, Cylinder, DirectionalLight, FullscreenQuad, Hemisphere, Lights, Line, MAX_LIGHTS, Material, Mesh, MultiQuad, Node, NormalShader, OrbitControls, OrthographicCamera, PerspectiveCamera, PhongShader, Plane, PointLight, Program, Quad, RenderTarget, Renderer, Scene, Shader, Sphere, SpotLight, Sprite, SpriteShader, SubMesh, Texture, Uniform, VWing, assignVec2, assignVec3, eDrawMethod };
-export type { AnyLight, ICustomUniforms, IFlatLights, IFrameInfo, IGeometry, IMaterialOptions, IMaterialUniforms, IMesh, IProgram, IRendererOptions, ISceneOptions, ISpriteOptions, ITextureOptions, SpriteAnchor, SpriteBillboard, TextureSource, UniformValue, Vec2Like, Vec3Like };
+export { AmbientLight, BasicMesh, BasicShader, Camera, Cannon, Cube, CustomMesh, Cylinder, DirectionalLight, FullscreenQuad, Hemisphere, Lights, Line, MAX_LIGHTS, Material, Mesh, MultiQuad, Node, NormalShader, OrbitControls, OrthographicCamera, PerspectiveCamera, PhongShader, Plane, PointLight, Program, Quad, QuadBatch, RenderTarget, Renderer, Scene, Shader, Sphere, SpotLight, Sprite, SpriteShader, SubMesh, Texture, Uniform, VWing, eDrawMethod };
+export type { AnyLight, ICustomUniforms, IFlatLights, IFrameInfo, IGeometry, IMaterialOptions, IMaterialUniforms, IMesh, IProgram, IQuadBatchOptions, IRendererOptions, ISceneOptions, ISpriteOptions, ITextureOptions, SpriteAnchor, SpriteBillboard, TextureSource, UniformValue };

package/dist/roostr.js

@@ -25,21 +25,25 @@ https://github.com/1pizzateam/RoostR.js
 */
 
 import { Mat4x3, Vec3, Frustum, Vec2, Utils, Time, Mat4, Ray3, Trigo, Quat, Mat3, Box, Sphere as Sphere$1, Rect } from '@1pizzateam/spock';
-export { Accumulator, Bezier, Box as BoundingBox, Sphere as BoundingSphere, Circ, Frustum, Grid, Mat3, Mat4, Mat4x3, NumArray, Quat, Rand, Ray3 as Ray, Ray2, Rect, RollingAverage, Plane as SpatialPlane, Time, Trigo, Utils, Vec2, Vec3 } from '@1pizzateam/spock';
+export { Accumulator, Bezier, Box as BoundingBox, Sphere as BoundingSphere, Circ, Frustum, GRID_EMPTY_CELL, Grid, Mat3, Mat4, Mat4x3, NumArray, Quat, Rand, Ray3 as Ray, Ray2, Rect, RightTriangle, RollingAverage, Plane as SpatialPlane, Time, Trigo, Utils, Vec2, Vec3, raycastSegment } from '@1pizzateam/spock';
 
 class GLState {
     program = null;
     arrayBuffer = null;
     elementBuffer = null;
+    texture2D = null;
     attributeMask = null;
     maxAttributes = 0;
     frameOfProgram = new WeakMap();
     materialOfProgram = new WeakMap();
     materialVersionOfProgram = new WeakMap();
+    samplerInitializedOfProgram = new WeakSet();
+    hasTextureOfProgram = new WeakMap();
     invalidate() {
         this.program = null;
         this.arrayBuffer = null;
         this.elementBuffer = null;
+        this.texture2D = null;
         this.attributeMask = null;
     }
     reset() {
@@ -48,6 +52,8 @@ class GLState {
         this.frameOfProgram = new WeakMap();
         this.materialOfProgram = new WeakMap();
         this.materialVersionOfProgram = new WeakMap();
+        this.samplerInitializedOfProgram = new WeakSet();
+        this.hasTextureOfProgram = new WeakMap();
     }
 }
 const states = new WeakMap();
@@ -253,7 +259,7 @@ function packLights(directionals, points, spots, ambients, flatArrays, maxLights
         pushLight(flatArrays, index++, 'point', points[i]);
     for (let i = 0; i < directionals.length && index < count; i++)
         pushLight(flatArrays, index++, 'directional', directionals[i]);
-    const ambient = scratchAmbient.setScalar(0, 0, 0);
+    const ambient = scratchAmbient.origin();
     if (extraAmbient)
         ambient.add(extraAmbient);
     for (let i = 0; i < ambients.length; i++)
@@ -261,7 +267,7 @@ function packLights(directionals, points, spots, ambients, flatArrays, maxLights
     if (!flatArrays.floatAmbient)
         flatArrays.floatAmbient = new Float32Array(3);
     ambient.toArray(flatArrays.floatAmbient);
-    flatArrays.ambient = [ambient.x, ambient.y, ambient.z];
+    ambient.toArray(flatArrays.ambient);
     return flatArrays;
 }
 
@@ -408,20 +414,34 @@ class SceneCollector {
     blendedList = [];
     scratchFrustum = new Frustum();
     scratchVec = new Vec3();
-    collect(meshes, camera, frustum, opaque, blended, stamp) {
+    collect(meshes, camera, frustum, opaque, blended, stamp, maxDrawDistance = 0) {
         this.opaqueList.length = 0;
         this.blendedList.length = 0;
+        const camPos = camera.position;
         const visit = (mesh) => {
             if (!mesh.isActive())
                 return;
             const wanted = mesh.blendMode ? blended : opaque;
-            if (wanted && !(frustum && !frustum.intersectsSphere(mesh.computeBoundingSphere()))) {
-                if (mesh.blendMode) {
-                    mesh.sortKey = mesh.getWorldPosition(this.scratchVec).getDistance(camera.position, true);
-                    this.blendedList.push(mesh);
+            if (wanted) {
+                let visible = true;
+                if (frustum || maxDrawDistance > 0) {
+                    const sphere = mesh.computeBoundingSphere();
+                    if (maxDrawDistance > 0) {
+                        const limit = maxDrawDistance + sphere.radius;
+                        if (sphere.center.getDistance(camPos, true) > limit * limit)
+                            visible = false;
+                    }
+                    if (visible && frustum && !frustum.intersectsSphere(sphere))
+                        visible = false;
+                }
+                if (visible) {
+                    if (mesh.blendMode) {
+                        mesh.sortKey = mesh.getWorldPosition(this.scratchVec).getDistance(camPos, true);
+                        this.blendedList.push(mesh);
+                    }
+                    else
+                        this.opaqueList.push(mesh);
                 }
-                else
-                    this.opaqueList.push(mesh);
             }
             for (const child of mesh.children)
                 visit(child);
@@ -458,6 +478,7 @@ class Scene {
     ambientColor;
     fog;
     enableFrustumCulling;
+    maxDrawDistance;
     context;
     renderer;
     graph;
@@ -473,6 +494,7 @@ class Scene {
         this.ambientColor = new Vec3(0, 0, 0);
         this.fog = null;
         this.enableFrustumCulling = false;
+        this.maxDrawDistance = 0;
         this.collector = new SceneCollector();
         let ctx = null;
         let opts = null;
@@ -490,6 +512,8 @@ class Scene {
                 this.fog = opts.fog;
             if (opts.enableFrustumCulling !== undefined)
                 this.enableFrustumCulling = opts.enableFrustumCulling;
+            if (opts.maxDrawDistance !== undefined)
+                this.maxDrawDistance = opts.maxDrawDistance;
         }
         else
             ctx = contextOrOptions;
@@ -649,7 +673,7 @@ class Scene {
         const frustum = this.enableFrustumCulling
             ? this.collector.scratchFrustum.setFromProjectionViewMatrix(camera.getProjectionViewMatrix())
             : null;
-        this.collector.collect(this.meshes, camera, frustum, true, true, this.traversalStamp);
+        this.collector.collect(this.meshes, camera, frustum, true, true, this.traversalStamp, this.maxDrawDistance);
         const frame = this.beginFrame();
         this.disableBlendMode();
         const projMatrix = camera.getProjectionMatrix();
@@ -670,17 +694,19 @@ class Scene {
         const mark = (mesh) => {
             for (const child of mesh.children) {
                 child.traversalStamp = stamp;
-                mark(child);
+                if (child.children.length > 0)
+                    mark(child);
             }
         };
         for (const mesh of this.meshes)
-            mark(mesh);
+            if (mesh.children.length > 0)
+                mark(mesh);
         return stamp;
     }
     computeWorldMatrices() {
         const stamp = this.markDescendants();
         for (const mesh of this.meshes)
-            if (mesh.traversalStamp !== stamp)
+            if (mesh.traversalStamp !== stamp && mesh.isActive())
                 mesh.computeWorldMatrix(this.graph);
     }
     beginFrame() {
@@ -690,7 +716,7 @@ class Scene {
         return this.frame;
     }
     renderBlended(camera, time = Time.now(), flatLights = this.lights.flatten(this.ambientColor), frustum = null) {
-        this.collector.collect(this.meshes, camera, frustum, false, true, this.markDescendants());
+        this.collector.collect(this.meshes, camera, frustum, false, true, this.markDescendants(), this.maxDrawDistance);
         return this.collector.drawBlended(this, camera, time, flatLights, this.beginFrame());
     }
 }
@@ -936,6 +962,7 @@ class RenderTarget {
         gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.width, this.height);
         gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthBuffer);
         gl.bindTexture(gl.TEXTURE_2D, null);
+        getGLState(gl).texture2D = null;
         gl.bindRenderbuffer(gl.RENDERBUFFER, null);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
@@ -967,6 +994,7 @@ class RenderTarget {
             gl.bindTexture(gl.TEXTURE_2D, this.texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
             gl.bindTexture(gl.TEXTURE_2D, null);
+            getGLState(gl).texture2D = null;
         }
         if (this.depthBuffer) {
             gl.bindRenderbuffer(gl.RENDERBUFFER, this.depthBuffer);
@@ -981,6 +1009,8 @@ class RenderTarget {
             this.framebuffer = null;
         }
         if (this.texture) {
+            if (getGLState(gl).texture2D === this.texture)
+                getGLState(gl).texture2D = null;
             gl.deleteTexture(this.texture);
             this.texture = null;
         }
@@ -1370,7 +1400,7 @@ class OrbitControls {
         const forward = this.camera.getViewDirection(OrbitControls._scratchForward);
         const right = OrbitControls._scratchRight.crossVectors(forward, this.camera.up).normalize();
         const up = OrbitControls._scratchUp.crossVectors(right, forward).normalize();
-        OrbitControls._scratchPan.setScalar(0, 0, 0)
+        OrbitControls._scratchPan.origin()
             .add(right.scale(-deltaX * factor))
             .add(up.scale(deltaY * factor));
         this.camera.target.add(OrbitControls._scratchPan);
@@ -1381,8 +1411,7 @@ class OrbitControls {
             const t = deltaTime === undefined
                 ? this.dampingFactor
                 : 1 - Math.pow(1 - this.dampingFactor, deltaTime * 60);
-            const turn = Trigo.normalizeRadian(this.targetAzimuth - this.azimuth);
-            this.azimuth = Utils.lerp(this.azimuth, this.azimuth + turn, t);
+            this.azimuth = Trigo.lerpRadian(this.azimuth, this.targetAzimuth, t);
             this.elevation = Utils.lerp(this.elevation, this.targetElevation, t);
             this.distance = Utils.lerp(this.distance, this.targetDistance, t);
         }
@@ -1437,8 +1466,10 @@ class Node {
         this.boundingSphere = new Sphere$1();
     }
     addChild(node) {
+        if (node.parent === this)
+            return;
         if (this.children.indexOf(node) === -1) {
-            if (node.parent && node.parent !== this)
+            if (node.parent)
                 node.parent.removeChild(node);
             this.children.push(node);
             node.parent = this;
@@ -1475,11 +1506,15 @@ class Node {
         this.markDirty();
     }
     setPosition(position) {
+        if (position !== this.position && this.position.equals(position))
+            return this;
         this.position.copy(position);
         this.markDirty();
         return this;
     }
     setRotation(rotation) {
+        if (rotation !== this._rotation && !this.isRotationStale && this._rotation.equals(rotation))
+            return this;
         this._rotation.copy(rotation);
         this.quaternion.setFromEuler(this._rotation);
         this.isRotationStale = false;
@@ -1487,6 +1522,8 @@ class Node {
         return this;
     }
     setScale(scale) {
+        if (scale !== this.scale && this.scale.equals(scale))
+            return this;
         this.scale.copy(scale);
         this.markDirty();
         return this;
@@ -1497,6 +1534,8 @@ class Node {
         return this;
     }
     setQuaternion(q) {
+        if (q !== this.quaternion && this.quaternion.equals(q))
+            return this;
         this.quaternion.copy(q);
         this.rotationChanged();
         return this;
@@ -1702,6 +1741,7 @@ const Texture = {
                 console.warn('Texture: mipmaps skipped, WebGL1 requires power-of-two dimensions.');
         }
         context.bindTexture(context.TEXTURE_2D, null);
+        getGLState(context).texture2D = null;
         return webGLTexture;
     },
     load(url, context, options) {
@@ -1725,6 +1765,7 @@ const Texture = {
         else
             context.texSubImage2D(context.TEXTURE_2D, 0, xOffset, yOffset, context.RGBA, context.UNSIGNED_BYTE, source);
         context.bindTexture(context.TEXTURE_2D, null);
+        getGLState(context).texture2D = null;
     }
 };
 
@@ -1959,15 +2000,24 @@ class MeshRenderer {
             }
             this.setAttributeMask(attributeMask);
             if (mesh.WebGLTexture) {
-                context.activeTexture(context.TEXTURE0);
-                context.bindTexture(context.TEXTURE_2D, mesh.WebGLTexture);
-                if (program.sampler)
+                if (state.texture2D !== mesh.WebGLTexture) {
+                    context.activeTexture(context.TEXTURE0);
+                    context.bindTexture(context.TEXTURE_2D, mesh.WebGLTexture);
+                    state.texture2D = mesh.WebGLTexture;
+                }
+                if (program.sampler && !state.samplerInitializedOfProgram.has(program)) {
                     context.uniform1i(program.sampler, 0);
-                if (program.hasTexture)
+                    state.samplerInitializedOfProgram.add(program);
+                }
+                if (program.hasTexture && state.hasTextureOfProgram.get(program) !== 1) {
                     context.uniform1i(program.hasTexture, 1);
+                    state.hasTextureOfProgram.set(program, 1);
+                }
             }
-            else if (program.hasTexture)
+            else if (program.hasTexture && state.hasTextureOfProgram.get(program) !== 0) {
                 context.uniform1i(program.hasTexture, 0);
+                state.hasTextureOfProgram.set(program, 0);
+            }
             if (program.modelMatrix)
                 context.uniformMatrix4fv(program.modelMatrix, false, mesh.worldMatrix.toArray());
             if (program.normalMatrix) {
@@ -2359,6 +2409,7 @@ class Mesh extends Node {
     subMeshes;
     nbSubMeshes;
     primitive;
+    bufferUsage;
     customUniforms;
     context;
     renderer;
@@ -2404,6 +2455,7 @@ class Mesh extends Node {
             this.subMeshes = [new SubMesh(0, this.indices ? this.indices.length : this.vertices.length / (this.itemSize || 3))];
         this.nbSubMeshes = this.subMeshes.length;
         this.primitive = mesh && mesh.primitive ? mesh.primitive : null;
+        this.bufferUsage = mesh && mesh.bufferUsage ? mesh.bufferUsage : 'STATIC_DRAW';
         this.customUniforms = {};
         this.context = context;
         this.renderer = new MeshRenderer(this.context);
@@ -2515,17 +2567,18 @@ class Mesh extends Node {
     applyTextureOption(texture) {
         if (!texture)
             return;
-        if (typeof WebGLTexture !== 'undefined' && texture instanceof WebGLTexture) {
-            this.releaseTexture();
-            this.WebGLTexture = texture;
-            this.ownsTexture = false;
-        }
+        if (typeof WebGLTexture !== 'undefined' && texture instanceof WebGLTexture)
+            this.setSharedTexture(texture);
         else
             this.setTexture(texture);
     }
     releaseTexture() {
-        if (this.WebGLTexture && this.ownsTexture)
-            this.context.deleteTexture(this.WebGLTexture);
+        if (this.WebGLTexture) {
+            if (this.renderer.state.texture2D === this.WebGLTexture)
+                this.renderer.state.texture2D = null;
+            if (this.ownsTexture)
+                this.context.deleteTexture(this.WebGLTexture);
+        }
         this.WebGLTexture = null;
         this.ownsTexture = false;
         this.textureSource = null;
@@ -2542,6 +2595,15 @@ class Mesh extends Node {
         this.textureOptions = options;
         syncTextureSampler(this.context, this.programs);
     }
+    setSharedTexture(texture) {
+        if (this.WebGLTexture === texture && !this.ownsTexture)
+            return;
+        this.releaseTexture();
+        this.WebGLTexture = texture;
+        this.ownsTexture = false;
+        if (texture)
+            syncTextureSampler(this.context, this.programs);
+    }
     addCustomUniform(name, type, value) {
         if (!this.customUniforms.hasOwnProperty(name)) {
             this.customUniforms[name] = new Uniform(type, value);
@@ -2567,18 +2629,19 @@ class Mesh extends Node {
         return indices instanceof Uint16Array ? indices : new Uint16Array(indices);
     }
     createBuffers() {
+        const usage = this.bufferUsage || 'STATIC_DRAW';
         this.vertexBuffer = this.vertices
-            ? this.renderer.createBuffer('ARRAY_BUFFER', this.vertices instanceof Float32Array ? this.vertices : new Float32Array(this.vertices), 'STATIC_DRAW')
+            ? this.renderer.createBuffer('ARRAY_BUFFER', this.vertices instanceof Float32Array ? this.vertices : new Float32Array(this.vertices), usage)
             : null;
         this.indexType = this.context.UNSIGNED_SHORT;
         this.indexBuffer = this.indices
             ? this.renderer.createBuffer('ELEMENT_ARRAY_BUFFER', this.createIndexData(this.indices), 'STATIC_DRAW')
             : null;
         this.normalBuffer = this.normals
-            ? this.renderer.createBuffer('ARRAY_BUFFER', this.normals instanceof Float32Array ? this.normals : new Float32Array(this.normals), 'STATIC_DRAW')
+            ? this.renderer.createBuffer('ARRAY_BUFFER', this.normals instanceof Float32Array ? this.normals : new Float32Array(this.normals), usage)
             : null;
         this.texCoordBuffer = this.uvs
-            ? this.renderer.createBuffer('ARRAY_BUFFER', this.uvs instanceof Float32Array ? this.uvs : new Float32Array(this.uvs), 'STATIC_DRAW')
+            ? this.renderer.createBuffer('ARRAY_BUFFER', this.uvs instanceof Float32Array ? this.uvs : new Float32Array(this.uvs), usage)
             : null;
     }
     restore() {
@@ -2657,6 +2720,201 @@ class Mesh extends Node {
     }
 }
 
+class CustomMesh {
+    vertices;
+    indices;
+    normals;
+    uvs;
+    subMeshes;
+    itemSize;
+    primitive;
+    primitives;
+    bufferUsage;
+    constructor() {
+        this.vertices = null;
+        this.indices = null;
+        this.normals = null;
+        this.uvs = null;
+        this.subMeshes = [];
+        this.itemSize = 3;
+        this.primitive = 'TRIANGLES';
+        this.bufferUsage = 'STATIC_DRAW';
+        this.primitives = ['POINTS',
+            'LINE_STRIP',
+            'LINE_LOOP',
+            'LINES',
+            'TRIANGLE_STRIP',
+            'TRIANGLE_FAN',
+            'TRIANGLES'
+        ];
+    }
+    static toFloat32(array) {
+        const flat = new Float32Array(array.length * 3);
+        for (let i = 0; i < array.length; i++)
+            array[i].toArray(flat, i * 3);
+        return flat;
+    }
+    setVertices(array) {
+        this.vertices = CustomMesh.toFloat32(array);
+    }
+    setIndices(array) {
+        this.indices = array instanceof Int32Array ? array.slice(0) : new Int32Array(array);
+    }
+    setNormals(array) {
+        this.normals = CustomMesh.toFloat32(array);
+    }
+    setUvs(array) {
+        this.uvs = array instanceof Float32Array ? array.slice(0) : new Float32Array(array);
+    }
+    addSubMeshes(array) {
+        for (let i = 0; i < array.length; i += 2)
+            this.addSubMesh(array[i], array[i + 1]);
+    }
+    addSubMesh(start, count) {
+        this.subMeshes.push(new SubMesh(start, count));
+    }
+    setItemSize(itemSize) {
+        this.itemSize = itemSize;
+    }
+    setPrimitive(primitive) {
+        for (let i = 0; i < this.primitives.length; i++)
+            if (this.primitives[i] === primitive) {
+                this.primitive = primitive;
+                return true;
+            }
+        return false;
+    }
+    static _vA = new Vec3();
+    static _vB = new Vec3();
+    static _vC = new Vec3();
+    static _e1 = new Vec3();
+    static _e2 = new Vec3();
+    static _n = new Vec3();
+    static _sum = new Vec3();
+    static UP = new Vec3(0, 1, 0);
+    static accumulate(normals, offset, n) {
+        CustomMesh._sum.setArray(normals, offset).add(n).toArray(normals, offset);
+    }
+    computeVertexNormals() {
+        if (!this.vertices || this.vertices.length === 0)
+            return null;
+        const vertices = this.vertices;
+        const normals = new Float32Array(vertices.length);
+        const vA = CustomMesh._vA, vB = CustomMesh._vB, vC = CustomMesh._vC;
+        const e1 = CustomMesh._e1, e2 = CustomMesh._e2, n = CustomMesh._n;
+        const faceNormal = (iA, iB, iC) => {
+            vA.setArray(vertices, iA);
+            vB.setArray(vertices, iB);
+            vC.setArray(vertices, iC);
+            return n.crossVectors(e1.subVectors(vB, vA), e2.subVectors(vC, vA));
+        };
+        if (this.indices && this.indices.length > 0)
+            for (let i = 0; i + 2 < this.indices.length; i += 3) {
+                const iA = this.indices[i] * 3;
+                const iB = this.indices[i + 1] * 3;
+                const iC = this.indices[i + 2] * 3;
+                faceNormal(iA, iB, iC);
+                CustomMesh.accumulate(normals, iA, n);
+                CustomMesh.accumulate(normals, iB, n);
+                CustomMesh.accumulate(normals, iC, n);
+            }
+        else
+            for (let i = 0; i + 8 < vertices.length; i += 9) {
+                faceNormal(i, i + 3, i + 6);
+                n.toArray(normals, i);
+                n.toArray(normals, i + 3);
+                n.toArray(normals, i + 6);
+            }
+        for (let i = 0; i < normals.length; i += 3)
+            n.setArray(normals, i).normalize(CustomMesh.UP).toArray(normals, i);
+        this.normals = normals;
+        return this.normals;
+    }
+}
+
+const QUAD_INDICES = [0, 1, 2, 0, 2, 3];
+class QuadBatch extends Mesh {
+    capacity;
+    used;
+    bounds;
+    scratchPoint;
+    constructor(context, options) {
+        const capacity = options.capacity;
+        const geometry = new CustomMesh();
+        geometry.vertices = new Float32Array(capacity * 18);
+        geometry.uvs = new Float32Array(capacity * 12);
+        geometry.bufferUsage = 'DYNAMIC_DRAW';
+        geometry.setPrimitive('TRIANGLES');
+        super(context, geometry);
+        this.capacity = capacity;
+        this.used = 0;
+        this.bounds = new Box();
+        this.scratchPoint = new Vec3();
+        const vertex = options.vertexShader ?? BasicShader.vertex;
+        const fragment = options.fragmentShader ?? BasicShader.fragment;
+        const material = options.material ?? new Material({ diffuse: new Vec3(1, 1, 1) });
+        this.addProgram(vertex, fragment, material);
+        if (options.sharedTexture)
+            this.setSharedTexture(options.sharedTexture);
+        else if (options.texture)
+            this.setTexture(options.texture, options.textureOptions);
+        this.setInactive();
+    }
+    begin() {
+        this.used = 0;
+        this.bounds.makeEmpty();
+        return this;
+    }
+    quad(corners, uv) {
+        if (this.used >= this.capacity)
+            return false;
+        const u0 = uv[0];
+        const v0 = uv[1];
+        const u1 = uv[2];
+        const v1 = uv[3];
+        const vertices = this.vertices;
+        const uvs = this.uvs;
+        let v = this.used * 18;
+        let t = this.used * 12;
+        for (let c = 0; c < 4; c++)
+            this.bounds.expandByPoint(this.scratchPoint.setArray(corners, c * 3));
+        for (let k = 0; k < 6; k++) {
+            const corner = QUAD_INDICES[k];
+            const i = corner * 3;
+            vertices[v++] = corners[i];
+            vertices[v++] = corners[i + 1];
+            vertices[v++] = corners[i + 2];
+            uvs[t++] = corner === 1 || corner === 2 ? u1 : u0;
+            uvs[t++] = corner >= 2 ? v1 : v0;
+        }
+        this.used++;
+        return true;
+    }
+    end() {
+        const gl = this.context;
+        this.subMeshes[0].count = this.used * 6;
+        if (!this.used) {
+            this.setInactive();
+            return this;
+        }
+        const vertices = this.vertices;
+        const uvs = this.uvs;
+        this.renderer.bindBuffer('ARRAY_BUFFER', this.vertexBuffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.used === this.capacity ? vertices : vertices.subarray(0, this.used * 18));
+        this.renderer.bindBuffer('ARRAY_BUFFER', this.texCoordBuffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.used === this.capacity ? uvs : uvs.subarray(0, this.used * 12));
+        this.setLocalBounds(this.bounds);
+        this.setActive();
+        return this;
+    }
+    show(visible) {
+        if (visible && this.used > 0)
+            this.setActive();
+        else
+            this.setInactive();
+    }
+}
+
 class BasicMesh {
     vertices;
     indices;
@@ -3107,116 +3365,6 @@ class Cannon extends BasicMesh {
     }
 }
 
-class CustomMesh {
-    vertices;
-    indices;
-    normals;
-    uvs;
-    subMeshes;
-    itemSize;
-    primitive;
-    primitives;
-    constructor() {
-        this.vertices = null;
-        this.indices = null;
-        this.normals = null;
-        this.uvs = null;
-        this.subMeshes = [];
-        this.itemSize = 3;
-        this.primitive = 'TRIANGLES';
-        this.primitives = ['POINTS',
-            'LINE_STRIP',
-            'LINE_LOOP',
-            'LINES',
-            'TRIANGLE_STRIP',
-            'TRIANGLE_FAN',
-            'TRIANGLES'
-        ];
-    }
-    static toFloat32(array) {
-        const flat = new Float32Array(array.length * 3);
-        for (let i = 0; i < array.length; i++)
-            array[i].toArray(flat, i * 3);
-        return flat;
-    }
-    setVertices(array) {
-        this.vertices = CustomMesh.toFloat32(array);
-    }
-    setIndices(array) {
-        this.indices = array instanceof Int32Array ? array.slice(0) : new Int32Array(array);
-    }
-    setNormals(array) {
-        this.normals = CustomMesh.toFloat32(array);
-    }
-    setUvs(array) {
-        this.uvs = array instanceof Float32Array ? array.slice(0) : new Float32Array(array);
-    }
-    addSubMeshes(array) {
-        for (let i = 0; i < array.length; i += 2)
-            this.addSubMesh(array[i], array[i + 1]);
-    }
-    addSubMesh(start, count) {
-        this.subMeshes.push(new SubMesh(start, count));
-    }
-    setItemSize(itemSize) {
-        this.itemSize = itemSize;
-    }
-    setPrimitive(primitive) {
-        for (let i = 0; i < this.primitives.length; i++)
-            if (this.primitives[i] === primitive) {
-                this.primitive = primitive;
-                return true;
-            }
-        return false;
-    }
-    static _vA = new Vec3();
-    static _vB = new Vec3();
-    static _vC = new Vec3();
-    static _e1 = new Vec3();
-    static _e2 = new Vec3();
-    static _n = new Vec3();
-    static _sum = new Vec3();
-    static UP = new Vec3(0, 1, 0);
-    static accumulate(normals, offset, n) {
-        CustomMesh._sum.setArray(normals, offset).add(n).toArray(normals, offset);
-    }
-    computeVertexNormals() {
-        if (!this.vertices || this.vertices.length === 0)
-            return null;
-        const vertices = this.vertices;
-        const normals = new Float32Array(vertices.length);
-        const vA = CustomMesh._vA, vB = CustomMesh._vB, vC = CustomMesh._vC;
-        const e1 = CustomMesh._e1, e2 = CustomMesh._e2, n = CustomMesh._n;
-        const faceNormal = (iA, iB, iC) => {
-            vA.setArray(vertices, iA);
-            vB.setArray(vertices, iB);
-            vC.setArray(vertices, iC);
-            return n.crossVectors(e1.subVectors(vB, vA), e2.subVectors(vC, vA));
-        };
-        if (this.indices && this.indices.length > 0)
-            for (let i = 0; i + 2 < this.indices.length; i += 3) {
-                const iA = this.indices[i] * 3;
-                const iB = this.indices[i + 1] * 3;
-                const iC = this.indices[i + 2] * 3;
-                faceNormal(iA, iB, iC);
-                CustomMesh.accumulate(normals, iA, n);
-                CustomMesh.accumulate(normals, iB, n);
-                CustomMesh.accumulate(normals, iC, n);
-            }
-        else
-            for (let i = 0; i + 8 < vertices.length; i += 9) {
-                faceNormal(i, i + 3, i + 6);
-                n.toArray(normals, i);
-                n.toArray(normals, i + 3);
-                n.toArray(normals, i + 6);
-            }
-        for (let i = 0; i < normals.length; i += 3)
-            n.setArray(normals, i).normalize(CustomMesh.UP).toArray(normals, i);
-        this.normals = normals;
-        return this.normals;
-    }
-}
-
 const SpriteShader = {
     vertex: `
 attribute vec3 aVertexPosition;
@@ -3632,19 +3780,4 @@ class AmbientLight {
     }
 }
 
-function assignVec3(target, xOrVec, y, z) {
-    if (xOrVec instanceof Vec3)
-        return target.copy(xOrVec);
-    if (typeof xOrVec === 'number')
-        return target.setScalar(xOrVec, y, z);
-    return target.setArray(xOrVec);
-}
-function assignVec2(target, xOrVec, y) {
-    if (xOrVec instanceof Vec2)
-        return target.copy(xOrVec);
-    if (typeof xOrVec === 'number')
-        return target.setScalar(xOrVec, y);
-    return target.setArray(xOrVec);
-}
-
-export { AmbientLight, BasicMesh, BasicShader, Camera, Cannon, Cube, CustomMesh, Cylinder, DirectionalLight, FullscreenQuad, Hemisphere, Lights, Line, MAX_LIGHTS, Material, Mesh, MultiQuad, Node, NormalShader, OrbitControls, OrthographicCamera, PerspectiveCamera, PhongShader, Plane, PointLight, Program, Quad, RenderTarget, Renderer, Scene, Shader, Sphere, SpotLight, Sprite, SpriteShader, SubMesh, Texture, Uniform, VWing, assignVec2, assignVec3, eDrawMethod };
+export { AmbientLight, BasicMesh, BasicShader, Camera, Cannon, Cube, CustomMesh, Cylinder, DirectionalLight, FullscreenQuad, Hemisphere, Lights, Line, MAX_LIGHTS, Material, Mesh, MultiQuad, Node, NormalShader, OrbitControls, OrthographicCamera, PerspectiveCamera, PhongShader, Plane, PointLight, Program, Quad, QuadBatch, RenderTarget, Renderer, Scene, Shader, Sphere, SpotLight, Sprite, SpriteShader, SubMesh, Texture, Uniform, VWing, eDrawMethod };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1pizzateam/roostr",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "WebGL 3D engine written in TypeScript",
   "type": "module",
   "sideEffects": false,
@@ -62,6 +62,6 @@
     "typescript": "6.0.3"
   },
   "dependencies": {
-    "@1pizzateam/spock": "4.4.0"
+    "@1pizzateam/spock": "4.5.0"
   }
 }