rapid-render 0.1.2 → 0.1.3

package/dist/rapid.umd.cjs

@@ -1 +1 @@
-"use strict";const t=(t,e,r)=>{const s=t.createShader(r);if(!s)throw new Error("Unable to create webgl shader");t.shaderSource(s,e),t.compileShader(s);if(!t.getShaderParameter(s,t.COMPILE_STATUS)){const r=t.getShaderInfoLog(s);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+e)}return s};const e=5126;class r{constructor(t){this.usedElemNum=0,this.maxElemNum=512,this.bytePerElem=t.BYTES_PER_ELEMENT,this.arrayType=t,this.arraybuffer=new ArrayBuffer(this.maxElemNum*this.bytePerElem),this.typedArray=new t(this.arraybuffer),t==Float32Array&&(this.uint32=new Uint32Array(this.arraybuffer))}clear(){this.usedElemNum=0}resize(t=0){if((t+=this.usedElemNum)>this.maxElemNum){for(;t>this.maxElemNum;)this.maxElemNum<<=1;this.setMaxSize(this.maxElemNum)}}setMaxSize(t=this.maxElemNum){const e=this.typedArray;this.maxElemNum=t,this.arraybuffer=new ArrayBuffer(t*this.bytePerElem),this.typedArray=new this.arrayType(this.arraybuffer),this.uint32&&(this.uint32=new Uint32Array(this.arraybuffer)),this.typedArray.set(e)}push(t){this.typedArray[this.usedElemNum++]=t}pushUint(t){this.uint32[this.usedElemNum++]=t}pop(t){this.usedElemNum-=t}getArray(t=0,e){return null==e?this.typedArray:this.typedArray.subarray(t,e)}get length(){return this.typedArray.length}}class s extends r{constructor(t,e,r=t.ARRAY_BUFFER){super(e),this.dirty=!0,this.webglBufferSize=0,this.gl=t,this.buffer=t.createBuffer(),this.type=r}push(t){super.push(t),this.dirty=!0}bindBuffer(){this.gl.bindBuffer(this.type,this.buffer)}bufferData(){if(this.dirty){const t=this.gl;this.maxElemNum>this.webglBufferSize?(t.bufferData(this.type,this.getArray(),t.STATIC_DRAW),this.webglBufferSize=this.maxElemNum):t.bufferSubData(this.type,0,this.getArray(0,this.usedElemNum)),this.dirty=!1}}}class i extends r{constructor(){super(Float32Array)}pushMat(){const t=this.usedElemNum-6,e=this.typedArray;this.resize(6),this.push(e[t+0]),this.push(e[t+1]),this.push(e[t+2]),this.push(e[t+3]),this.push(e[t+4]),this.push(e[t+5])}popMat(){this.pop(6)}pushIdentity(){this.resize(6),this.push(1),this.push(0),this.push(0),this.push(1),this.push(0),this.push(0)}translate(t,e){if(t instanceof h)return this.translate(t.x,t.y);const r=this.usedElemNum-6,s=this.typedArray;s[r+4]=s[r+0]*t+s[r+2]*e+s[r+4],s[r+5]=s[r+1]*t+s[r+3]*e+s[r+5]}rotate(t){const e=this.usedElemNum-6,r=this.typedArray,s=Math.cos(t),i=Math.sin(t),n=r[e+0],a=r[e+1],h=r[e+2],o=r[e+3];r[e+0]=n*s-a*i,r[e+1]=n*i+a*s,r[e+2]=h*s-o*i,r[e+3]=h*i+o*s}scale(t,e){if(t instanceof h)return this.scale(t.x,t.y);e||(e=t);const r=this.usedElemNum-6,s=this.typedArray;s[r+0]=s[r+0]*t,s[r+1]=s[r+1]*t,s[r+2]=s[r+2]*e,s[r+3]=s[r+3]*e}apply(t,e){if(t instanceof h)return new h(...this.apply(t.x,t.y));const r=this.usedElemNum-6,s=this.typedArray;return[s[r+0]*t+s[r+2]*e+s[r+4],s[r+1]*t+s[r+3]*e+s[r+5]]}getInverse(){const t=this.usedElemNum-6,e=this.typedArray,r=e[t+0],s=e[t+1],i=e[t+2],n=e[t+3],a=e[t+4],h=e[t+5],o=r*n-s*i;return new Float32Array([n/o,-s/o,-i/o,r/o,(i*h-n*a)/o,(s*a-r*h)/o])}getTransform(){const t=this.usedElemNum-6,e=this.typedArray;return new Float32Array([e[t+0],e[t+1],e[t+2],e[t+3],e[t+4],e[t+5]])}setTransform(t){const e=this.usedElemNum-6,r=this.typedArray;r[e+0]=t[0],r[e+1]=t[1],r[e+2]=t[2],r[e+3]=t[3],r[e+4]=t[4],r[e+5]=t[5]}}class n extends s{constructor(t,e,r,s){super(t,Uint16Array,t.ELEMENT_ARRAY_BUFFER),this.setMaxSize(e*s);for(let t=0;t<s;t++)this.addObject(t*r);this.bindBuffer(),this.bufferData()}addObject(t){}}class a{constructor(t,e,r,s){this._r=t,this._g=e,this._b=r,this._a=s,this.updateUint()}get r(){return this._r}set r(t){this._r=t,this.updateUint()}get g(){return this._g}set g(t){this._g=t,this.updateUint()}get b(){return this._b}set b(t){this._b=t,this.updateUint()}get a(){return this._a}set a(t){this._a=t,this.updateUint()}updateUint(){this.uint32=(this._a<<24|this._b<<16|this._g<<8|this._r)>>>0}setRGBA(t,e,r,s){this.r=t,this.g=e,this.b=r,this.a=s,this.updateUint()}copy(t){this.setRGBA(t.r,t.g,t.b,t.a)}equals(t){return t.r===this.r&&t.g===this.g&&t.b===this.b&&t.a===this.a}static fromHex(t){t.startsWith("#")&&(t=t.slice(1));const e=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),s=parseInt(t.slice(4,6),16);let i=255;return t.length>=8&&(i=parseInt(t.slice(6,8),16)),new a(e,r,s,i)}add(t){return new a(Math.min(this.r+t.r,255),Math.min(this.g+t.g,255),Math.min(this.b+t.b,255),Math.min(this.a+t.a,255))}subtract(t){return new a(Math.max(this.r-t.r,0),Math.max(this.g-t.g,0),Math.max(this.b-t.b,0),Math.max(this.a-t.a,0))}}class h{constructor(t,e){this.x=void 0!==t?t:0,this.y=void 0!==e?e:0}scalarMult(t){return this.x*=t,this.y*=t,this}perpendicular(){const t=this.x;return this.x=-this.y,this.y=t,this}invert(){return this.x=-this.x,this.y=-this.y,this}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}normalize(){const t=this.length();return this.x/=t,this.y/=t,this}angle(){return this.y/this.x}static Angle(t,e){return Math.atan2(e.y-t.y,e.x-t.x)}static Add(t,e){return new h(t.x+e.x,t.y+e.y)}static Sub(t,e){return new h(t.x-e.x,t.y-e.y)}static Middle(t,e){return h.Add(t,e).scalarMult(.5)}static FormArray(t){return t.map((t=>new h(t[0],t[1])))}}class o{constructor(t){this.cache=new Map,this.render=t}async textureFromUrl(t,e=!1){let r=this.cache.get(t);if(!r){const s=await this.loadImage(t);r=u.fromImageSource(this.render,s,e),this.cache.set(t,r)}return new l(r)}async loadImage(t){return new Promise((e=>{const r=new Image;r.onload=()=>{e(r)},r.src=t}))}createText(t){return new c(this.render,t)}}class u{constructor(t,e,r){this.texture=t,this.width=e,this.height=r}static fromImageSource(t,e,r=!1){return new u(function(t,e,r){const s=t.createTexture();if(t.bindTexture(t.TEXTURE_2D,s),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,r?t.LINEAR:t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,r?t.LINEAR:t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),!s)throw new Error("unable to create texture");return s}(t.gl,e,r),e.width,e.height)}}class l{constructor(t){this.scale=1,this.setBaseTextur(t)}setBaseTextur(t){t&&(this.base=t,this.setClipRegion(0,0,t.width,t.height))}setClipRegion(t,e,r,s){this.base&&(this.clipX=t/this.base.width,this.clipY=e/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+s/this.base.height,this.width=r*this.scale,this.height=s*this.scale)}static fromImageSource(t,e,r=!1){return new l(u.fromImageSource(t,e,r))}static fromUrl(t,e){return t.textures.textureFromUrl(e)}}class c extends l{constructor(t,e){super(),this.scale=.5,this.rapid=t,this.options=e,this.text=e.text||"",this.updateTextImage()}updateTextImage(){const t=this.createTextCanvas();this.setBaseTextur(u.fromImageSource(this.rapid,t,!0))}createTextCanvas(){const t=document.createElement("canvas"),e=t.getContext("2d");if(!e)throw new Error("Failed to get canvas context");e.font=`${this.options.fontSize||16}px ${this.options.fontFamily||"Arial"}`,e.fillStyle=this.options.color||"#000",e.textAlign=this.options.textAlign||"left",e.textBaseline=this.options.textBaseline||"top";const r=this.text.split("\n");let s=0,i=0;for(const t of r){const r=e.measureText(t);s=Math.max(s,r.width),i+=this.options.fontSize||16}t.width=2*s,t.height=2*i,e.scale(2,2),e.font=`${this.options.fontSize||16}px ${this.options.fontFamily||"Arial"}`,e.fillStyle=this.options.color||"#000",e.textAlign=this.options.textAlign||"left",e.textBaseline=this.options.textBaseline||"top";let n=0;for(const t of r)e.fillText(t,0,n),n+=this.options.fontSize||16;return t}setText(t){this.text!=t&&(this.text=t,this.updateTextImage())}}class d{constructor(e,r,s){this.attributeLoc={},this.uniformLoc={};const i=function(t,e){if(t.includes("%TEXTURE_NUM%")&&(t=t.replace("%TEXTURE_NUM%",e.toString())),t.includes("%GET_COLOR%")){let r="";for(let t=0;t<e;t++)r+=0==t?`if(vTextureId == ${t}.0)`:t==e-1?"else":`else if(vTextureId == ${t}.0)`,r+=`{color = texture2D(uTextures[${t}], vRegion);}`;t=t.replace("%GET_COLOR%",r)}return t}(s,e.maxTextureUnits);this.program=((e,r,s)=>{var i=e.createProgram(),n=t(e,r,35633),a=t(e,s,35632);if(!i)throw new Error("Unable to create program shader");if(e.attachShader(i,n),e.attachShader(i,a),e.linkProgram(i),!e.getProgramParameter(i,e.LINK_STATUS)){const t=e.getProgramInfoLog(i);throw new Error("Unable to link shader program: "+t)}return i})(e.gl,r,i),this.gl=e.gl,this.parseShader(r),this.parseShader(i)}setUniforms(t,e){var r;const s=this.gl;for(const i in t){const n=t[i],a=this.getUniform(i);if(n instanceof l&&(null===(r=n.base)||void 0===r?void 0:r.texture))s.activeTexture(s.TEXTURE0+e),s.bindTexture(s.TEXTURE_2D,n.base.texture),s.uniform1i(a,e),e+=1;else if("number"==typeof n)s.uniform1f(a,n);else if(Array.isArray(n))switch(n.length){case 1:Number.isInteger(n[0])?s.uniform1i(a,n[0]):s.uniform1f(a,n[0]);break;case 2:Number.isInteger(n[0])?s.uniform2iv(a,n):s.uniform2fv(a,n);break;case 3:Number.isInteger(n[0])?s.uniform3iv(a,n):s.uniform3fv(a,n);break;case 4:Number.isInteger(n[0])?s.uniform4iv(a,n):s.uniform4fv(a,n);break;case 9:s.uniformMatrix3fv(a,!1,n);break;case 16:s.uniformMatrix4fv(a,!1,n);break;default:console.error(`Unsupported uniform array length for ${i}:`,n.length)}else"boolean"==typeof n?s.uniform1i(a,n?1:0):console.error(`Unsupported uniform type for ${i}:`,typeof n)}}getUniform(t){return this.uniformLoc[t]}use(){this.gl.useProgram(this.program)}parseShader(t){const e=this.gl,r=t.match(/attribute\s+\w+\s+(\w+)/g);if(r)for(const t of r){const r=t.split(" ")[2],s=e.getAttribLocation(this.program,r);-1!=s&&(this.attributeLoc[r]=s)}const s=t.match(/uniform\s+\w+\s+(\w+)/g);if(s)for(const t of s){const r=t.split(" ")[2];this.uniformLoc[r]=e.getUniformLocation(this.program,r)}}setAttribute(t){const e=this.attributeLoc[t.name];if(void 0!==e){const r=this.gl;r.vertexAttribPointer(e,t.size,t.type,t.normalized||!1,t.stride,t.offset||0),r.enableVertexAttribArray(e)}}}class p{constructor(t,e){this.usedTextures=[],this.needBind=new Set,this.attribute=e,this.rapid=t,this.gl=t.gl,this.webglArrayBuffer=new s(t.gl,Float32Array,t.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:t.maxTextureUnits},((t,e)=>e))}addVertex(t,e,...r){const[s,i]=this.rapid.transformPoint(t,e);this.webglArrayBuffer.push(s),this.webglArrayBuffer.push(i)}useTexture(t){let e=this.usedTextures.indexOf(t);return-1===e&&(this.usedTextures.length>=this.rapid.maxTextureUnits&&this.render(),this.usedTextures.push(t),e=this.usedTextures.length-1,this.needBind.add(e)),e}enterRegion(t){this.currentShader=null!=t?t:this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer();for(const t of this.attribute)this.currentShader.setAttribute(t);this.gl.uniformMatrix4fv(this.currentShader.uniformLoc.uProjectionMatrix,!1,this.rapid.projection)}exitRegion(){}initDefaultShader(t,e){this.webglArrayBuffer.bindBuffer(),this.defaultShader=new d(this.rapid,t,e)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const t=this.gl;for(const e of this.needBind)t.activeTexture(t.TEXTURE0+e),t.bindTexture(t.TEXTURE_2D,this.usedTextures[e]);this.needBind.clear()}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}hasPendingContent(){return!1}}class f extends p{constructor(t){super(t,g),this.vertex=0,this.drawType=t.gl.TRIANGLE_FAN,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nattribute vec2 aRegion;\r\n\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\nvarying vec2 vRegion;\r\n\r\nvoid main(void) {\r\n    gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n    vColor = aColor;\r\n    vRegion = aRegion;\r\n}\r\n","precision mediump float;\r\nvarying vec2 vRegion;\r\nvarying vec4 vColor;\r\n\r\nuniform sampler2D uTexture;\r\nuniform int uUseTexture;\r\n\r\nvoid main(void) {\r\n    if(uUseTexture > 0){\r\n        gl_FragColor = texture2D(uTexture, vRegion) * vColor;\r\n    }else{\r\n        gl_FragColor = vColor;\r\n    }\r\n}\r\n")}startRender(t){this.vertex=0,this.webglArrayBuffer.clear(),t&&t.base&&(this.texture=this.useTexture(t.base.texture))}addVertex(t,e,r,s,i){this.webglArrayBuffer.resize(3),super.addVertex(t,e),this.webglArrayBuffer.pushUint(i),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(s),this.vertex+=1}executeRender(){super.executeRender();const t=this.gl;t.uniform1i(this.currentShader.uniformLoc.uUseTexture,void 0===this.texture?0:1),this.texture&&t.uniform1i(this.currentShader.uniformLoc.uTexture,this.texture),t.drawArrays(this.drawType,0,this.vertex),this.drawType=this.rapid.gl.TRIANGLE_FAN,this.vertex=0,this.texture=void 0}}const g=[{name:"aPosition",size:2,type:e,stride:20},{name:"aColor",size:4,type:5121,stride:20,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0},{name:"aRegion",size:2,type:e,stride:20,offset:3*Float32Array.BYTES_PER_ELEMENT}];class x extends n{constructor(t,e){super(t,6,4,e)}addObject(t){super.addObject(),this.push(t),this.push(t+3),this.push(t+2),this.push(t),this.push(t+1),this.push(t+2)}}class m extends p{constructor(t){const e=t.gl;super(t,y),this.batchSprite=0,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec2 aRegion;\r\nattribute float aTextureId;\r\nattribute vec4 aColor;\r\n\r\nuniform mat4 uProjectionMatrix;\r\n\r\nvarying vec2 vRegion;\r\nvarying float vTextureId;\r\nvarying vec4 vColor;\r\n\r\nvoid main(void) {\r\n    vRegion = aRegion;\r\n    vTextureId = aTextureId;\r\n    vColor = aColor;\r\n    gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n}","precision mediump float;\r\nuniform sampler2D uTextures[%TEXTURE_NUM%];\r\n\r\nvarying vec2 vRegion;\r\nvarying float vTextureId;\r\nvarying vec4 vColor;\r\n\r\nvoid main(void) {\r\n    vec4 color;\r\n    %GET_COLOR%\r\n\r\n    gl_FragColor = color*vColor;\r\n}"),this.MAX_BATCH=Math.floor(16384),this.indexBuffer=new x(e,this.MAX_BATCH)}addVertex(t,e,r,s,i,n){super.addVertex(t,e),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(s),this.webglArrayBuffer.push(i),this.webglArrayBuffer.pushUint(n)}renderSprite(t,e,r,s,i,n,a,h,o,u,l){var c;l&&(null===(c=this.currentShader)||void 0===c||c.setUniforms(l,1)),this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const d=this.useTexture(t),p=h+e,f=o+r,g=s+n,x=i+a;this.addVertex(h,o,s,i,d,u),this.addVertex(p,o,g,i,d,u),this.addVertex(p,f,g,x,d,u),this.addVertex(h,f,s,x,d,u)}executeRender(){super.executeRender();const t=this.gl;t.drawElements(t.TRIANGLES,6*this.batchSprite,t.UNSIGNED_SHORT,0)}enterRegion(t){super.enterRegion(t),this.indexBuffer.bindBuffer(),this.gl.uniform1iv(this.currentShader.uniformLoc.uTextures,this.TEXTURE_UNITS_ARRAY)}initializeForNextRender(){super.initializeForNextRender(),this.batchSprite=0}hasPendingContent(){return this.batchSprite>0}}const y=[{name:"aPosition",size:2,type:e,stride:24},{name:"aRegion",size:2,type:e,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:e,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:5121,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];var T,E,A,b;exports.JoinTyps=void 0,(T=exports.JoinTyps||(exports.JoinTyps={}))[T.BEVEL=0]="BEVEL",T[T.ROUND=1]="ROUND",T[T.MITER=2]="MITER",exports.CapTyps=void 0,(E=exports.CapTyps||(exports.CapTyps={}))[E.BUTT=0]="BUTT",E[E.ROUND=1]="ROUND",E[E.SQUARE=2]="SQUARE",exports.RenderStatus=void 0,(A=exports.RenderStatus||(exports.RenderStatus={}))[A.NORMAL=0]="NORMAL",A[A.MASK=1]="MASK",exports.MaskType=void 0,(b=exports.MaskType||(exports.MaskType={})).Normal="normal",b.Inverse="inverse";const R=1e-4,S=(t,e,r,s)=>{s.push(t),s.push(h.Add(t,r)),s.push(h.Add(e,r)),s.push(e),s.push(h.Add(e,r)),s.push(t)},v=(t,e,r,s,i)=>{const n=h.Sub(t,e).length();let a=Math.atan2(r.y-t.y,r.x-t.x),o=Math.atan2(e.y-t.y,e.x-t.x);const u=a;o>a?o-a>=Math.PI-R&&(o-=2*Math.PI):a-o>=Math.PI-R&&(a-=2*Math.PI);let l=o-a;if(Math.abs(l)>=Math.PI-R&&Math.abs(l)<=Math.PI+R){const e=h.Sub(t,s);0===e.x?e.y>0&&(l=-l):e.x>=-1e-4&&(l=-l)}const c=(Math.abs(l*n)/7|0)+1,d=l/c;for(let e=0;e<c;e++)i.push(new h(t.x,t.y)),i.push(new h(t.x+n*Math.cos(u+d*e),t.y+n*Math.sin(u+d*e))),i.push(new h(t.x+n*Math.cos(u+d*(1+e)),t.y+n*Math.sin(u+d*(1+e))))},w=(t,e,r,s,i,n,a)=>{const o=h.Sub(e,t).perpendicular(),u=h.Sub(r,e).perpendicular();((t,e,r)=>(e.x-t.x)*(r.y-t.y)-(r.x-t.x)*(e.y-t.y))(t,e,r)>0&&(o.invert(),u.invert()),o.normalize().scalarMult(i),u.normalize().scalarMult(i);const l=((t,e,r,s)=>{const i=e.y-t.y,n=t.x-e.x,a=s.y-r.y,o=r.x-s.x,u=i*o-a*n;if(u>-1e-4&&u<R)return null;{const e=i*t.x+n*t.y,s=a*r.x+o*r.y;return new h((o*e-n*s)/u,(i*s-a*e)/u)}})(h.Add(o,t),h.Add(o,e),h.Add(u,r),h.Add(u,e));let c=null,d=Number.MAX_VALUE;l&&(c=h.Sub(l,e),d=c.length());const p=d/i|0,f=h.Sub(t,e).length(),g=h.Sub(e,r).length();if(d>f||d>g)s.push(h.Add(t,o)),s.push(h.Sub(t,o)),s.push(h.Add(e,o)),s.push(h.Sub(t,o)),s.push(h.Add(e,o)),s.push(h.Sub(e,o)),n===exports.JoinTyps.ROUND?v(e,h.Add(e,o),h.Add(e,u),r,s):n===exports.JoinTyps.BEVEL||n===exports.JoinTyps.MITER&&p>=a?(s.push(e),s.push(h.Add(e,o)),s.push(h.Add(e,u))):n===exports.JoinTyps.MITER&&p<a&&l&&(s.push(h.Add(e,o)),s.push(e),s.push(l),s.push(h.Add(e,u)),s.push(e),s.push(l)),s.push(h.Add(r,u)),s.push(h.Sub(e,u)),s.push(h.Add(e,u)),s.push(h.Add(r,u)),s.push(h.Sub(e,u)),s.push(h.Sub(r,u));else{if(s.push(h.Add(t,o)),s.push(h.Sub(t,o)),s.push(h.Sub(e,c)),s.push(h.Add(t,o)),s.push(h.Sub(e,c)),s.push(h.Add(e,o)),n===exports.JoinTyps.ROUND){const t=h.Add(e,o),r=h.Add(e,u),i=h.Sub(e,c),n=e;s.push(t),s.push(n),s.push(i),v(n,t,r,i,s),s.push(n),s.push(r),s.push(i)}else(n===exports.JoinTyps.BEVEL||n===exports.JoinTyps.MITER&&p>=a)&&(s.push(h.Add(e,o)),s.push(h.Add(e,u)),s.push(h.Sub(e,c))),n===exports.JoinTyps.MITER&&p<a&&(s.push(l),s.push(h.Add(e,o)),s.push(h.Add(e,u)));s.push(h.Add(r,u)),s.push(h.Sub(e,c)),s.push(h.Add(e,u)),s.push(h.Add(r,u)),s.push(h.Sub(e,c)),s.push(h.Sub(r,u))}};exports.BaseTexture=u,exports.Color=a,exports.DynamicArrayBuffer=r,exports.GLShader=d,exports.MatrixStack=i,exports.Rapid=class{constructor(t){this.projectionDirty=!0,this.matrixStack=new i,this.textures=new o(this),this.devicePixelRatio=window.devicePixelRatio||1,this.defaultColor=new a(255,255,255,255),this.regions=new Map;const e=(t=>{const e={stencil:!0},r=t.getContext("webgl2",e)||t.getContext("webgl",e);if(!r)throw new Error("Unable to initialize WebGL. Your browser may not support it.");return r})(t.canvas);this.gl=e,this.canvas=t.canvas,this.maxTextureUnits=e.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS),this.width=t.width||this.canvas.width,this.height=t.width||this.canvas.height,this.backgroundColor=t.backgroundColor||new a(255,255,255,255),this.registerBuildInRegion(),this.initWebgl(e)}initWebgl(t){this.resize(this.width,this.height),t.enable(t.BLEND),t.disable(t.DEPTH_TEST),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.STENCIL_TEST)}registerBuildInRegion(){this.registerRegion("sprite",m),this.registerRegion("graphic",f)}registerRegion(t,e){this.regions.set(t,new e(this))}quitCurrentRegion(){this.currentRegion&&this.currentRegion.hasPendingContent()&&(this.currentRegion.render(),this.currentRegion.exitRegion())}setRegion(t,e){if(t!=this.currentRegionName||e&&e!==this.currentRegion.currentShader){const r=this.regions.get(t);this.quitCurrentRegion(),this.currentRegion=r,this.currentRegionName=t,r.enterRegion(e)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(t=!0){this.clear(),t&&this.matrixStack.clear(),this.matrixStack.pushIdentity(),this.currentRegion=void 0,this.currentRegionName=void 0}endRender(){var t;null===(t=this.currentRegion)||void 0===t||t.render(),this.projectionDirty=!1}renderSprite(t,e=0,r=0,s){if(t.base){if(s instanceof a)return this.renderSprite(t,e,r,{color:s});this.setRegion("sprite",null==s?void 0:s.shader),this.currentRegion.renderSprite(t.base.texture,t.width,t.height,t.clipX,t.clipY,t.clipW,t.clipH,e,r,((null==s?void 0:s.color)||this.defaultColor).uint32,null==s?void 0:s.uniforms)}}renderLine(t=0,e=0,r){const s=((t,e)=>{if(t.length<2)return[];let r=e.cap||exports.CapTyps.BUTT,s=e.join||exports.JoinTyps.BEVEL,i=(e.width||1)/2,n=e.miterLimit||10,a=[],o=[];if(2===t.length)s=exports.JoinTyps.BEVEL,w(t[0],h.Middle(t[0],t[1]),t[1],a,i,s,n);else{for(let e=0;e<t.length-1;e++)0===e?o.push(t[0]):e===t.length-2?o.push(t[t.length-1]):o.push(h.Middle(t[e],t[e+1]));for(let e=1;e<o.length;e++)w(o[e-1],t[e],o[e],a,i,s,n)}if(r===exports.CapTyps.ROUND){let e=a[0],r=a[1],s=t[1],i=a[a.length-1],n=a[a.length-3],h=t[t.length-2];v(t[0],e,r,s,a),v(t[t.length-1],i,n,h,a)}else if(r===exports.CapTyps.SQUARE){let e=a[a.length-1],r=a[a.length-3];S(a[0],a[1],h.Sub(t[0],t[1]).normalize().scalarMult(h.Sub(t[0],a[0]).length()),a),S(e,r,h.Sub(t[t.length-1],t[t.length-2]).normalize().scalarMult(h.Sub(r,t[t.length-1]).length()),a)}return a})(r.points,r);this.renderGraphic(t,e,{color:r.color,drawType:this.gl.TRIANGLES,points:s})}renderGraphic(t=0,e=0,r){if(r instanceof Array)return this.renderGraphic(t,e,{points:r});this.setRegion("graphic",r.shader);const s=this.currentRegion;s.startRender(r.texture),r.drawType&&(s.drawType=r.drawType),r.points.forEach(((i,n)=>{var a;const h=r.color instanceof Array?r.color[n]:r.color,o=null===(a=r.uv)||void 0===a?void 0:a[n];s.addVertex(i.x+t,i.y+e,null==o?void 0:o.x,null==o?void 0:o.y,(h||this.defaultColor).uint32)})),s.render()}renderRect(t,e,r,s,i=this.defaultColor){const n=[new h(0,0),new h(r,0),new h(r,s),new h(0,s)];this.renderGraphic(t,e,{points:n,color:i,drawType:this.gl.TRIANGLE_FAN})}renderCircle(t,e,r,s=this.defaultColor,i=32){const n=[];for(let t=0;t<=i;t++){const e=t/i*Math.PI*2,s=Math.cos(e)*r,a=Math.sin(e)*r;n.push(new h(s,a))}this.renderGraphic(t,e,{points:n,color:s,drawType:this.gl.TRIANGLE_FAN})}resize(t,e){this.width=t,this.height=e;const r=t*this.devicePixelRatio,s=e*this.devicePixelRatio;this.canvas.width=r,this.canvas.height=s,this.gl.viewport(0,0,r,s),this.projection=this.createOrthMatrix(0,t,e,0),this.projectionDirty=!0}clear(){const t=this.gl,e=this.backgroundColor;t.clearColor(e.r,e.g,e.b,e.a),t.clear(t.COLOR_BUFFER_BIT),this.clearMask()}createOrthMatrix(t,e,r,s){return new Float32Array([2/(e-t),0,0,0,0,2/(s-r),0,0,0,0,-1,0,-(e+t)/(e-t),-(s+r)/(s-r),0,1])}transformPoint(t,e){return this.matrixStack.apply(t,e)}startDrawMask(){const t=this.gl;this.quitCurrentRegion(),t.clearStencil(0),t.clear(t.STENCIL_BUFFER_BIT),t.stencilFunc(t.ALWAYS,1,255),t.stencilOp(t.KEEP,t.KEEP,t.REPLACE),t.colorMask(!1,!1,!1,!1)}endDrawMask(t=exports.MaskType.Normal){const e=this.gl;this.quitCurrentRegion(),this.setMaskType(t),e.stencilOp(e.KEEP,e.KEEP,e.KEEP),e.colorMask(!0,!0,!0,!0)}setMaskType(t){const e=this.gl;switch(this.quitCurrentRegion(),t){case exports.MaskType.Normal:e.stencilFunc(e.EQUAL,1,255);break;case exports.MaskType.Inverse:e.stencilFunc(e.NOTEQUAL,1,255)}}clearMask(){const t=this.gl;t.clear(t.STENCIL_BUFFER_BIT)}},exports.SCALEFACTOR=2,exports.Text=c,exports.Texture=l,exports.TextureCache=o,exports.Vec2=h,exports.WebglBufferArray=s,exports.WebglElementBufferArray=n,exports.graphicAttributes=g,exports.spriteAttributes=y;
+"use strict";const t=(t,e,r)=>{const s=t.createShader(r);if(!s)throw new Error("Unable to create webgl shader");t.shaderSource(s,e),t.compileShader(s);if(!t.getShaderParameter(s,t.COMPILE_STATUS)){const r=t.getShaderInfoLog(s);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+e)}return s};const e=5126;class r{constructor(t){this.usedElemNum=0,this.maxElemNum=512,this.bytePerElem=t.BYTES_PER_ELEMENT,this.arrayType=t,this.arraybuffer=new ArrayBuffer(this.maxElemNum*this.bytePerElem),this.typedArray=new t(this.arraybuffer),t==Float32Array&&(this.uint32=new Uint32Array(this.arraybuffer))}clear(){this.usedElemNum=0}resize(t=0){if((t+=this.usedElemNum)>this.maxElemNum){for(;t>this.maxElemNum;)this.maxElemNum<<=1;this.setMaxSize(this.maxElemNum)}}setMaxSize(t=this.maxElemNum){const e=this.typedArray;this.maxElemNum=t,this.arraybuffer=new ArrayBuffer(t*this.bytePerElem),this.typedArray=new this.arrayType(this.arraybuffer),this.uint32&&(this.uint32=new Uint32Array(this.arraybuffer)),this.typedArray.set(e)}push(t){this.typedArray[this.usedElemNum++]=t}pushUint(t){this.uint32[this.usedElemNum++]=t}pop(t){this.usedElemNum-=t}getArray(t=0,e){return null==e?this.typedArray:this.typedArray.subarray(t,e)}get length(){return this.typedArray.length}}class s extends r{constructor(t,e,r=t.ARRAY_BUFFER){super(e),this.dirty=!0,this.webglBufferSize=0,this.gl=t,this.buffer=t.createBuffer(),this.type=r}push(t){super.push(t),this.dirty=!0}bindBuffer(){this.gl.bindBuffer(this.type,this.buffer)}bufferData(){if(this.dirty){const t=this.gl;this.maxElemNum>this.webglBufferSize?(t.bufferData(this.type,this.getArray(),t.STATIC_DRAW),this.webglBufferSize=this.maxElemNum):t.bufferSubData(this.type,0,this.getArray(0,this.usedElemNum)),this.dirty=!1}}}class i extends r{constructor(){super(Float32Array)}pushMat(){const t=this.usedElemNum-6,e=this.typedArray;this.resize(6),this.push(e[t+0]),this.push(e[t+1]),this.push(e[t+2]),this.push(e[t+3]),this.push(e[t+4]),this.push(e[t+5])}popMat(){this.pop(6)}pushIdentity(){this.resize(6),this.push(1),this.push(0),this.push(0),this.push(1),this.push(0),this.push(0)}translate(t,e){if(t instanceof h)return this.translate(t.x,t.y);const r=this.usedElemNum-6,s=this.typedArray;s[r+4]=s[r+0]*t+s[r+2]*e+s[r+4],s[r+5]=s[r+1]*t+s[r+3]*e+s[r+5]}rotate(t){const e=this.usedElemNum-6,r=this.typedArray,s=Math.cos(t),i=Math.sin(t),n=r[e+0],a=r[e+1],h=r[e+2],o=r[e+3];r[e+0]=n*s-a*i,r[e+1]=n*i+a*s,r[e+2]=h*s-o*i,r[e+3]=h*i+o*s}scale(t,e){if(t instanceof h)return this.scale(t.x,t.y);e||(e=t);const r=this.usedElemNum-6,s=this.typedArray;s[r+0]=s[r+0]*t,s[r+1]=s[r+1]*t,s[r+2]=s[r+2]*e,s[r+3]=s[r+3]*e}apply(t,e){if(t instanceof h)return new h(...this.apply(t.x,t.y));const r=this.usedElemNum-6,s=this.typedArray;return[s[r+0]*t+s[r+2]*e+s[r+4],s[r+1]*t+s[r+3]*e+s[r+5]]}getInverse(){const t=this.usedElemNum-6,e=this.typedArray,r=e[t+0],s=e[t+1],i=e[t+2],n=e[t+3],a=e[t+4],h=e[t+5],o=r*n-s*i;return new Float32Array([n/o,-s/o,-i/o,r/o,(i*h-n*a)/o,(s*a-r*h)/o])}getTransform(){const t=this.usedElemNum-6,e=this.typedArray;return new Float32Array([e[t+0],e[t+1],e[t+2],e[t+3],e[t+4],e[t+5]])}setTransform(t){const e=this.usedElemNum-6,r=this.typedArray;r[e+0]=t[0],r[e+1]=t[1],r[e+2]=t[2],r[e+3]=t[3],r[e+4]=t[4],r[e+5]=t[5]}}class n extends s{constructor(t,e,r,s){super(t,Uint16Array,t.ELEMENT_ARRAY_BUFFER),this.setMaxSize(e*s);for(let t=0;t<s;t++)this.addObject(t*r);this.bindBuffer(),this.bufferData()}addObject(t){}}class a{constructor(t,e,r,s){this._r=t,this._g=e,this._b=r,this._a=s,this.updateUint()}get r(){return this._r}set r(t){this._r=t,this.updateUint()}get g(){return this._g}set g(t){this._g=t,this.updateUint()}get b(){return this._b}set b(t){this._b=t,this.updateUint()}get a(){return this._a}set a(t){this._a=t,this.updateUint()}updateUint(){this.uint32=(this._a<<24|this._b<<16|this._g<<8|this._r)>>>0}setRGBA(t,e,r,s){this.r=t,this.g=e,this.b=r,this.a=s,this.updateUint()}copy(t){this.setRGBA(t.r,t.g,t.b,t.a)}equals(t){return t.r===this.r&&t.g===this.g&&t.b===this.b&&t.a===this.a}static fromHex(t){t.startsWith("#")&&(t=t.slice(1));const e=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),s=parseInt(t.slice(4,6),16);let i=255;return t.length>=8&&(i=parseInt(t.slice(6,8),16)),new a(e,r,s,i)}add(t){return new a(Math.min(this.r+t.r,255),Math.min(this.g+t.g,255),Math.min(this.b+t.b,255),Math.min(this.a+t.a,255))}subtract(t){return new a(Math.max(this.r-t.r,0),Math.max(this.g-t.g,0),Math.max(this.b-t.b,0),Math.max(this.a-t.a,0))}}class h{constructor(t,e){this.x=void 0!==t?t:0,this.y=void 0!==e?e:0}scalarMult(t){return this.x*=t,this.y*=t,this}perpendicular(){const t=this.x;return this.x=-this.y,this.y=t,this}invert(){return this.x=-this.x,this.y=-this.y,this}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}normalize(){const t=this.length();return this.x/=t,this.y/=t,this}angle(){return this.y/this.x}static Angle(t,e){return Math.atan2(e.y-t.y,e.x-t.x)}static Add(t,e){return new h(t.x+e.x,t.y+e.y)}static Sub(t,e){return new h(t.x-e.x,t.y-e.y)}static Middle(t,e){return h.Add(t,e).scalarMult(.5)}static FromArray(t){return t.map((t=>new h(t[0],t[1])))}}class o{constructor(t){this.cache=new Map,this.render=t}async textureFromUrl(t,e=!1){let r=this.cache.get(t);if(!r){const s=await this.loadImage(t);r=u.fromImageSource(this.render,s,e),this.cache.set(t,r)}return new l(r)}async loadImage(t){return new Promise((e=>{const r=new Image;r.onload=()=>{e(r)},r.src=t}))}createText(t){return new c(this.render,t)}}class u{constructor(t,e,r){this.texture=t,this.width=e,this.height=r}static fromImageSource(t,e,r=!1){return new u(function(t,e,r){const s=t.createTexture();if(t.bindTexture(t.TEXTURE_2D,s),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,r?t.LINEAR:t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,r?t.LINEAR:t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),!s)throw new Error("unable to create texture");return s}(t.gl,e,r),e.width,e.height)}}class l{constructor(t){this.scale=1,this.setBaseTextur(t)}setBaseTextur(t){t&&(this.base=t,this.setClipRegion(0,0,t.width,t.height))}setClipRegion(t,e,r,s){this.base&&(this.clipX=t/this.base.width,this.clipY=e/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+s/this.base.height,this.width=r*this.scale,this.height=s*this.scale)}static fromImageSource(t,e,r=!1){return new l(u.fromImageSource(t,e,r))}static fromUrl(t,e){return t.textures.textureFromUrl(e)}}class c extends l{constructor(t,e){super(),this.scale=.5,this.rapid=t,this.options=e,this.text=e.text||"",this.updateTextImage()}updateTextImage(){const t=this.createTextCanvas();this.setBaseTextur(u.fromImageSource(this.rapid,t,!0))}createTextCanvas(){const t=document.createElement("canvas"),e=t.getContext("2d");if(!e)throw new Error("Failed to get canvas context");e.font=`${this.options.fontSize||16}px ${this.options.fontFamily||"Arial"}`,e.fillStyle=this.options.color||"#000",e.textAlign=this.options.textAlign||"left",e.textBaseline=this.options.textBaseline||"top";const r=this.text.split("\n");let s=0,i=0;for(const t of r){const r=e.measureText(t);s=Math.max(s,r.width),i+=this.options.fontSize||16}t.width=2*s,t.height=2*i,e.scale(2,2),e.font=`${this.options.fontSize||16}px ${this.options.fontFamily||"Arial"}`,e.fillStyle=this.options.color||"#000",e.textAlign=this.options.textAlign||"left",e.textBaseline=this.options.textBaseline||"top";let n=0;for(const t of r)e.fillText(t,0,n),n+=this.options.fontSize||16;return t}setText(t){this.text!=t&&(this.text=t,this.updateTextImage())}}class d{constructor(e,r,s){this.attributeLoc={},this.uniformLoc={};const i=function(t,e){if(t.includes("%TEXTURE_NUM%")&&(t=t.replace("%TEXTURE_NUM%",e.toString())),t.includes("%GET_COLOR%")){let r="";for(let t=0;t<e;t++)r+=0==t?`if(vTextureId == ${t}.0)`:t==e-1?"else":`else if(vTextureId == ${t}.0)`,r+=`{color = texture2D(uTextures[${t}], vRegion);}`;t=t.replace("%GET_COLOR%",r)}return t}(s,e.maxTextureUnits);this.program=((e,r,s)=>{var i=e.createProgram(),n=t(e,r,35633),a=t(e,s,35632);if(!i)throw new Error("Unable to create program shader");if(e.attachShader(i,n),e.attachShader(i,a),e.linkProgram(i),!e.getProgramParameter(i,e.LINK_STATUS)){const t=e.getProgramInfoLog(i);throw new Error("Unable to link shader program: "+t)}return i})(e.gl,r,i),this.gl=e.gl,this.parseShader(r),this.parseShader(i)}setUniforms(t,e){var r;const s=this.gl;for(const i in t){const n=t[i],a=this.getUniform(i);if(n instanceof l&&(null===(r=n.base)||void 0===r?void 0:r.texture))s.activeTexture(s.TEXTURE0+e),s.bindTexture(s.TEXTURE_2D,n.base.texture),s.uniform1i(a,e),e+=1;else if("number"==typeof n)s.uniform1f(a,n);else if(Array.isArray(n))switch(n.length){case 1:Number.isInteger(n[0])?s.uniform1i(a,n[0]):s.uniform1f(a,n[0]);break;case 2:Number.isInteger(n[0])?s.uniform2iv(a,n):s.uniform2fv(a,n);break;case 3:Number.isInteger(n[0])?s.uniform3iv(a,n):s.uniform3fv(a,n);break;case 4:Number.isInteger(n[0])?s.uniform4iv(a,n):s.uniform4fv(a,n);break;case 9:s.uniformMatrix3fv(a,!1,n);break;case 16:s.uniformMatrix4fv(a,!1,n);break;default:console.error(`Unsupported uniform array length for ${i}:`,n.length)}else"boolean"==typeof n?s.uniform1i(a,n?1:0):console.error(`Unsupported uniform type for ${i}:`,typeof n)}}getUniform(t){return this.uniformLoc[t]}use(){this.gl.useProgram(this.program)}parseShader(t){const e=this.gl,r=t.match(/attribute\s+\w+\s+(\w+)/g);if(r)for(const t of r){const r=t.split(" ")[2],s=e.getAttribLocation(this.program,r);-1!=s&&(this.attributeLoc[r]=s)}const s=t.match(/uniform\s+\w+\s+(\w+)/g);if(s)for(const t of s){const r=t.split(" ")[2];this.uniformLoc[r]=e.getUniformLocation(this.program,r)}}setAttribute(t){const e=this.attributeLoc[t.name];if(void 0!==e){const r=this.gl;r.vertexAttribPointer(e,t.size,t.type,t.normalized||!1,t.stride,t.offset||0),r.enableVertexAttribArray(e)}}}class p{constructor(t,e){this.usedTextures=[],this.needBind=new Set,this.attribute=e,this.rapid=t,this.gl=t.gl,this.webglArrayBuffer=new s(t.gl,Float32Array,t.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:t.maxTextureUnits},((t,e)=>e))}addVertex(t,e,...r){const[s,i]=this.rapid.transformPoint(t,e);this.webglArrayBuffer.push(s),this.webglArrayBuffer.push(i)}useTexture(t){let e=this.usedTextures.indexOf(t);return-1===e&&(this.usedTextures.length>=this.rapid.maxTextureUnits&&this.render(),this.usedTextures.push(t),e=this.usedTextures.length-1,this.needBind.add(e)),e}enterRegion(t){this.currentShader=null!=t?t:this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer();for(const t of this.attribute)this.currentShader.setAttribute(t);this.gl.uniformMatrix4fv(this.currentShader.uniformLoc.uProjectionMatrix,!1,this.rapid.projection)}exitRegion(){}initDefaultShader(t,e){this.webglArrayBuffer.bindBuffer(),this.defaultShader=new d(this.rapid,t,e)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const t=this.gl;for(const e of this.needBind)t.activeTexture(t.TEXTURE0+e),t.bindTexture(t.TEXTURE_2D,this.usedTextures[e]);this.needBind.clear()}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}hasPendingContent(){return!1}}class f extends p{constructor(t){super(t,g),this.vertex=0,this.drawType=t.gl.TRIANGLE_FAN,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nattribute vec2 aRegion;\r\n\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\nvarying vec2 vRegion;\r\n\r\nvoid main(void) {\r\n    gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n    vColor = aColor;\r\n    vRegion = aRegion;\r\n}\r\n","precision mediump float;\r\nvarying vec2 vRegion;\r\nvarying vec4 vColor;\r\n\r\nuniform sampler2D uTexture;\r\nuniform int uUseTexture;\r\n\r\nvoid main(void) {\r\n    if(uUseTexture > 0){\r\n        gl_FragColor = texture2D(uTexture, vRegion) * vColor;\r\n    }else{\r\n        gl_FragColor = vColor;\r\n    }\r\n}\r\n")}startRender(t){this.vertex=0,this.webglArrayBuffer.clear(),t&&t.base&&(this.texture=this.useTexture(t.base.texture))}addVertex(t,e,r,s,i){this.webglArrayBuffer.resize(3),super.addVertex(t,e),this.webglArrayBuffer.pushUint(i),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(s),this.vertex+=1}executeRender(){super.executeRender();const t=this.gl;t.uniform1i(this.currentShader.uniformLoc.uUseTexture,void 0===this.texture?0:1),this.texture&&t.uniform1i(this.currentShader.uniformLoc.uTexture,this.texture),t.drawArrays(this.drawType,0,this.vertex),this.drawType=this.rapid.gl.TRIANGLE_FAN,this.vertex=0,this.texture=void 0}}const g=[{name:"aPosition",size:2,type:e,stride:20},{name:"aColor",size:4,type:5121,stride:20,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0},{name:"aRegion",size:2,type:e,stride:20,offset:3*Float32Array.BYTES_PER_ELEMENT}];class x extends n{constructor(t,e){super(t,6,4,e)}addObject(t){super.addObject(),this.push(t),this.push(t+3),this.push(t+2),this.push(t),this.push(t+1),this.push(t+2)}}class m extends p{constructor(t){const e=t.gl;super(t,y),this.batchSprite=0,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec2 aRegion;\r\nattribute float aTextureId;\r\nattribute vec4 aColor;\r\n\r\nuniform mat4 uProjectionMatrix;\r\n\r\nvarying vec2 vRegion;\r\nvarying float vTextureId;\r\nvarying vec4 vColor;\r\n\r\nvoid main(void) {\r\n    vRegion = aRegion;\r\n    vTextureId = aTextureId;\r\n    vColor = aColor;\r\n    gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n}","precision mediump float;\r\nuniform sampler2D uTextures[%TEXTURE_NUM%];\r\n\r\nvarying vec2 vRegion;\r\nvarying float vTextureId;\r\nvarying vec4 vColor;\r\n\r\nvoid main(void) {\r\n    vec4 color;\r\n    %GET_COLOR%\r\n\r\n    gl_FragColor = color*vColor;\r\n}"),this.MAX_BATCH=Math.floor(16384),this.indexBuffer=new x(e,this.MAX_BATCH)}addVertex(t,e,r,s,i,n){super.addVertex(t,e),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(s),this.webglArrayBuffer.push(i),this.webglArrayBuffer.pushUint(n)}renderSprite(t,e,r,s,i,n,a,h,o,u,l){var c;l&&(null===(c=this.currentShader)||void 0===c||c.setUniforms(l,1)),this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const d=this.useTexture(t),p=h+e,f=o+r,g=s+n,x=i+a;this.addVertex(h,o,s,i,d,u),this.addVertex(p,o,g,i,d,u),this.addVertex(p,f,g,x,d,u),this.addVertex(h,f,s,x,d,u)}executeRender(){super.executeRender();const t=this.gl;t.drawElements(t.TRIANGLES,6*this.batchSprite,t.UNSIGNED_SHORT,0)}enterRegion(t){super.enterRegion(t),this.indexBuffer.bindBuffer(),this.gl.uniform1iv(this.currentShader.uniformLoc.uTextures,this.TEXTURE_UNITS_ARRAY)}initializeForNextRender(){super.initializeForNextRender(),this.batchSprite=0}hasPendingContent(){return this.batchSprite>0}}const y=[{name:"aPosition",size:2,type:e,stride:24},{name:"aRegion",size:2,type:e,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:e,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:5121,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];var T,E,A,b;exports.JoinTyps=void 0,(T=exports.JoinTyps||(exports.JoinTyps={}))[T.BEVEL=0]="BEVEL",T[T.ROUND=1]="ROUND",T[T.MITER=2]="MITER",exports.CapTyps=void 0,(E=exports.CapTyps||(exports.CapTyps={}))[E.BUTT=0]="BUTT",E[E.ROUND=1]="ROUND",E[E.SQUARE=2]="SQUARE",exports.RenderStatus=void 0,(A=exports.RenderStatus||(exports.RenderStatus={}))[A.NORMAL=0]="NORMAL",A[A.MASK=1]="MASK",exports.MaskType=void 0,(b=exports.MaskType||(exports.MaskType={})).Normal="normal",b.Inverse="inverse";const R=1e-4,S=(t,e,r,s)=>{s.push(t),s.push(h.Add(t,r)),s.push(h.Add(e,r)),s.push(e),s.push(h.Add(e,r)),s.push(t)},v=(t,e,r,s,i)=>{const n=h.Sub(t,e).length();let a=Math.atan2(r.y-t.y,r.x-t.x),o=Math.atan2(e.y-t.y,e.x-t.x);const u=a;o>a?o-a>=Math.PI-R&&(o-=2*Math.PI):a-o>=Math.PI-R&&(a-=2*Math.PI);let l=o-a;if(Math.abs(l)>=Math.PI-R&&Math.abs(l)<=Math.PI+R){const e=h.Sub(t,s);0===e.x?e.y>0&&(l=-l):e.x>=-1e-4&&(l=-l)}const c=(Math.abs(l*n)/7|0)+1,d=l/c;for(let e=0;e<c;e++)i.push(new h(t.x,t.y)),i.push(new h(t.x+n*Math.cos(u+d*e),t.y+n*Math.sin(u+d*e))),i.push(new h(t.x+n*Math.cos(u+d*(1+e)),t.y+n*Math.sin(u+d*(1+e))))},w=(t,e,r,s,i,n,a)=>{const o=h.Sub(e,t).perpendicular(),u=h.Sub(r,e).perpendicular();((t,e,r)=>(e.x-t.x)*(r.y-t.y)-(r.x-t.x)*(e.y-t.y))(t,e,r)>0&&(o.invert(),u.invert()),o.normalize().scalarMult(i),u.normalize().scalarMult(i);const l=((t,e,r,s)=>{const i=e.y-t.y,n=t.x-e.x,a=s.y-r.y,o=r.x-s.x,u=i*o-a*n;if(u>-1e-4&&u<R)return null;{const e=i*t.x+n*t.y,s=a*r.x+o*r.y;return new h((o*e-n*s)/u,(i*s-a*e)/u)}})(h.Add(o,t),h.Add(o,e),h.Add(u,r),h.Add(u,e));let c=null,d=Number.MAX_VALUE;l&&(c=h.Sub(l,e),d=c.length());const p=d/i|0,f=h.Sub(t,e).length(),g=h.Sub(e,r).length();if(d>f||d>g)s.push(h.Add(t,o)),s.push(h.Sub(t,o)),s.push(h.Add(e,o)),s.push(h.Sub(t,o)),s.push(h.Add(e,o)),s.push(h.Sub(e,o)),n===exports.JoinTyps.ROUND?v(e,h.Add(e,o),h.Add(e,u),r,s):n===exports.JoinTyps.BEVEL||n===exports.JoinTyps.MITER&&p>=a?(s.push(e),s.push(h.Add(e,o)),s.push(h.Add(e,u))):n===exports.JoinTyps.MITER&&p<a&&l&&(s.push(h.Add(e,o)),s.push(e),s.push(l),s.push(h.Add(e,u)),s.push(e),s.push(l)),s.push(h.Add(r,u)),s.push(h.Sub(e,u)),s.push(h.Add(e,u)),s.push(h.Add(r,u)),s.push(h.Sub(e,u)),s.push(h.Sub(r,u));else{if(s.push(h.Add(t,o)),s.push(h.Sub(t,o)),s.push(h.Sub(e,c)),s.push(h.Add(t,o)),s.push(h.Sub(e,c)),s.push(h.Add(e,o)),n===exports.JoinTyps.ROUND){const t=h.Add(e,o),r=h.Add(e,u),i=h.Sub(e,c),n=e;s.push(t),s.push(n),s.push(i),v(n,t,r,i,s),s.push(n),s.push(r),s.push(i)}else(n===exports.JoinTyps.BEVEL||n===exports.JoinTyps.MITER&&p>=a)&&(s.push(h.Add(e,o)),s.push(h.Add(e,u)),s.push(h.Sub(e,c))),n===exports.JoinTyps.MITER&&p<a&&(s.push(l),s.push(h.Add(e,o)),s.push(h.Add(e,u)));s.push(h.Add(r,u)),s.push(h.Sub(e,c)),s.push(h.Add(e,u)),s.push(h.Add(r,u)),s.push(h.Sub(e,c)),s.push(h.Sub(r,u))}};exports.BaseTexture=u,exports.Color=a,exports.DynamicArrayBuffer=r,exports.GLShader=d,exports.MatrixStack=i,exports.Rapid=class{constructor(t){this.projectionDirty=!0,this.matrixStack=new i,this.textures=new o(this),this.devicePixelRatio=window.devicePixelRatio||1,this.defaultColor=new a(255,255,255,255),this.regions=new Map;const e=(t=>{const e={stencil:!0},r=t.getContext("webgl2",e)||t.getContext("webgl",e);if(!r)throw new Error("Unable to initialize WebGL. Your browser may not support it.");return r})(t.canvas);this.gl=e,this.canvas=t.canvas,this.maxTextureUnits=e.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS),this.width=t.width||this.canvas.width,this.height=t.width||this.canvas.height,this.backgroundColor=t.backgroundColor||new a(255,255,255,255),this.registerBuildInRegion(),this.initWebgl(e)}initWebgl(t){this.resize(this.width,this.height),t.enable(t.BLEND),t.disable(t.DEPTH_TEST),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.STENCIL_TEST)}registerBuildInRegion(){this.registerRegion("sprite",m),this.registerRegion("graphic",f)}registerRegion(t,e){this.regions.set(t,new e(this))}quitCurrentRegion(){this.currentRegion&&this.currentRegion.hasPendingContent()&&(this.currentRegion.render(),this.currentRegion.exitRegion())}setRegion(t,e){if(t!=this.currentRegionName||e&&e!==this.currentRegion.currentShader){const r=this.regions.get(t);this.quitCurrentRegion(),this.currentRegion=r,this.currentRegionName=t,r.enterRegion(e)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(t=!0){this.clear(),t&&this.matrixStack.clear(),this.matrixStack.pushIdentity(),this.currentRegion=void 0,this.currentRegionName=void 0}endRender(){var t;null===(t=this.currentRegion)||void 0===t||t.render(),this.projectionDirty=!1}renderSprite(t,e=0,r=0,s){if(t.base){if(s instanceof a)return this.renderSprite(t,e,r,{color:s});this.setRegion("sprite",null==s?void 0:s.shader),this.currentRegion.renderSprite(t.base.texture,t.width,t.height,t.clipX,t.clipY,t.clipW,t.clipH,e,r,((null==s?void 0:s.color)||this.defaultColor).uint32,null==s?void 0:s.uniforms)}}renderLine(t=0,e=0,r){const s=((t,e)=>{if(t.length<2)return[];let r=e.cap||exports.CapTyps.BUTT,s=e.join||exports.JoinTyps.BEVEL,i=(e.width||1)/2,n=e.miterLimit||10,a=[],o=[];if(2===t.length)s=exports.JoinTyps.BEVEL,w(t[0],h.Middle(t[0],t[1]),t[1],a,i,s,n);else{for(let e=0;e<t.length-1;e++)0===e?o.push(t[0]):e===t.length-2?o.push(t[t.length-1]):o.push(h.Middle(t[e],t[e+1]));for(let e=1;e<o.length;e++)w(o[e-1],t[e],o[e],a,i,s,n)}if(r===exports.CapTyps.ROUND){let e=a[0],r=a[1],s=t[1],i=a[a.length-1],n=a[a.length-3],h=t[t.length-2];v(t[0],e,r,s,a),v(t[t.length-1],i,n,h,a)}else if(r===exports.CapTyps.SQUARE){let e=a[a.length-1],r=a[a.length-3];S(a[0],a[1],h.Sub(t[0],t[1]).normalize().scalarMult(h.Sub(t[0],a[0]).length()),a),S(e,r,h.Sub(t[t.length-1],t[t.length-2]).normalize().scalarMult(h.Sub(r,t[t.length-1]).length()),a)}return a})(r.points,r);this.renderGraphic(t,e,{color:r.color,drawType:this.gl.TRIANGLES,points:s})}renderGraphic(t=0,e=0,r){if(r instanceof Array)return this.renderGraphic(t,e,{points:r});this.setRegion("graphic",r.shader);const s=this.currentRegion;s.startRender(r.texture),r.drawType&&(s.drawType=r.drawType),r.points.forEach(((i,n)=>{var a;const h=r.color instanceof Array?r.color[n]:r.color,o=null===(a=r.uv)||void 0===a?void 0:a[n];s.addVertex(i.x+t,i.y+e,null==o?void 0:o.x,null==o?void 0:o.y,(h||this.defaultColor).uint32)})),s.render()}renderRect(t,e,r,s,i=this.defaultColor){const n=[new h(0,0),new h(r,0),new h(r,s),new h(0,s)];this.renderGraphic(t,e,{points:n,color:i,drawType:this.gl.TRIANGLE_FAN})}renderCircle(t,e,r,s=this.defaultColor,i=32){const n=[];for(let t=0;t<=i;t++){const e=t/i*Math.PI*2,s=Math.cos(e)*r,a=Math.sin(e)*r;n.push(new h(s,a))}this.renderGraphic(t,e,{points:n,color:s,drawType:this.gl.TRIANGLE_FAN})}resize(t,e){this.width=t,this.height=e;const r=t*this.devicePixelRatio,s=e*this.devicePixelRatio;this.canvas.width=r,this.canvas.height=s,this.gl.viewport(0,0,r,s),this.projection=this.createOrthMatrix(0,t,e,0),this.projectionDirty=!0}clear(){const t=this.gl,e=this.backgroundColor;t.clearColor(e.r,e.g,e.b,e.a),t.clear(t.COLOR_BUFFER_BIT),this.clearMask()}createOrthMatrix(t,e,r,s){return new Float32Array([2/(e-t),0,0,0,0,2/(s-r),0,0,0,0,-1,0,-(e+t)/(e-t),-(s+r)/(s-r),0,1])}transformPoint(t,e){return this.matrixStack.apply(t,e)}startDrawMask(){const t=this.gl;this.quitCurrentRegion(),t.clearStencil(0),t.clear(t.STENCIL_BUFFER_BIT),t.stencilFunc(t.ALWAYS,1,255),t.stencilOp(t.KEEP,t.KEEP,t.REPLACE),t.colorMask(!1,!1,!1,!1)}endDrawMask(t=exports.MaskType.Normal){const e=this.gl;this.quitCurrentRegion(),this.setMaskType(t),e.stencilOp(e.KEEP,e.KEEP,e.KEEP),e.colorMask(!0,!0,!0,!0)}setMaskType(t){const e=this.gl;switch(this.quitCurrentRegion(),t){case exports.MaskType.Normal:e.stencilFunc(e.EQUAL,1,255);break;case exports.MaskType.Inverse:e.stencilFunc(e.NOTEQUAL,1,255)}}clearMask(){const t=this.gl;t.clear(t.STENCIL_BUFFER_BIT)}},exports.SCALEFACTOR=2,exports.Text=c,exports.Texture=l,exports.TextureCache=o,exports.Vec2=h,exports.WebglBufferArray=s,exports.WebglElementBufferArray=n,exports.graphicAttributes=g,exports.spriteAttributes=y;

package/dist/regions/attributes.d.ts

@@ -0,0 +1,44 @@
+export declare const spriteAttributes: ({
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset?: undefined;
+    normalized?: undefined;
+} | {
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset: number;
+    normalized?: undefined;
+} | {
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset: number;
+    normalized: boolean;
+})[];
+export declare const graphicAttributes: ({
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset?: undefined;
+    normalized?: undefined;
+} | {
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset: number;
+    normalized: boolean;
+} | {
+    name: string;
+    size: number;
+    type: number;
+    stride: number;
+    offset: number;
+    normalized?: undefined;
+})[];

package/dist/regions/graphic_region.d.ts

@@ -1,35 +1,15 @@
-import { Rapid, Texture } from "..";
+import type Rapid from "../render";
+import { Uniform } from "../webgl/uniform";
 import RenderRegion from "./region";
+import { Texture } from "../texture";
 declare class GraphicRegion extends RenderRegion {
     private vertex;
     private texture?;
+    private offset;
     drawType: number;
     constructor(rapid: Rapid);
-    startRender(texture?: Texture): void;
+    startRender(offsetX: number, offsetY: number, texture?: Texture, uniforms?: Uniform): void;
     addVertex(x: number, y: number, u: number, v: number, color: number): void;
     protected executeRender(): void;
 }
-declare const graphicAttributes: ({
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset?: undefined;
-    normalized?: undefined;
-} | {
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset: number;
-    normalized: boolean;
-} | {
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset: number;
-    normalized?: undefined;
-})[];
-export { graphicAttributes };
 export default GraphicRegion;

package/dist/regions/region.d.ts

@@ -2,25 +2,32 @@ import { IAttribute, WebGLContext } from "../interface";
 import { WebglBufferArray } from "../math";
 import Rapid from "../render";
 import GLShader from "../webgl/glshader";
+import { Uniform } from "../webgl/uniform";
 declare class RenderRegion {
     currentShader?: GLShader;
-    protected defaultShader: GLShader;
-    protected attribute: IAttribute[];
     protected webglArrayBuffer: WebglBufferArray;
     protected rapid: Rapid;
     protected gl: WebGLContext;
     protected usedTextures: WebGLTexture[];
-    protected readonly TEXTURE_UNITS_ARRAY: number[];
     protected needBind: Set<number>;
-    constructor(rapid: Rapid, attributes?: IAttribute[]);
+    protected shaders: Map<string, GLShader>;
+    protected isCostumShader: boolean;
+    protected readonly MAX_TEXTURE_UNIT_ARRAY: number[];
+    private costumUnifrom?;
+    constructor(rapid: Rapid);
+    setTextureUnits(usedTexture: number): number[];
     protected addVertex(x: number, y: number, ..._: unknown[]): void;
     protected useTexture(texture: WebGLTexture): number;
     enterRegion(customShader?: GLShader): void;
+    setCostumUnifrom(newCurrentUniform: Uniform): boolean;
     exitRegion(): void;
-    protected initDefaultShader(vs: string, fs: string): void;
+    protected initDefaultShader(vs: string, fs: string, attributes?: IAttribute[]): void;
+    setShader(name: string, vs: string, fs: string, attributes?: IAttribute[]): void;
+    getShader(name: string): GLShader | undefined;
     render(): void;
     protected executeRender(): void;
     protected initializeForNextRender(): void;
     hasPendingContent(): boolean;
+    isShaderChanged(shader?: GLShader): boolean;
 }
 export default RenderRegion;

package/dist/regions/sprite_region.d.ts

@@ -1,40 +1,16 @@
 import RenderRegion from "./region";
 import Rapid from "../render";
-import { UniformType } from "../interface";
 import GLShader from "../webgl/glshader";
+import { Uniform } from "../webgl/uniform";
 declare class SpriteRegion extends RenderRegion {
     private batchSprite;
     private indexBuffer;
-    protected readonly MAX_BATCH: number;
     constructor(rapid: Rapid);
     protected addVertex(x: number, y: number, u: number, v: number, textureUnit: number, color: number): void;
-    renderSprite(texture: WebGLTexture, width: number, height: number, u0: number, v0: number, u1: number, v1: number, offsetX: number, offsetY: number, color: number, uniforms?: UniformType): void;
+    renderSprite(texture: WebGLTexture, width: number, height: number, u0: number, v0: number, u1: number, v1: number, offsetX: number, offsetY: number, color: number, uniforms?: Uniform): void;
     protected executeRender(): void;
     enterRegion(customShader?: GLShader | undefined): void;
     protected initializeForNextRender(): void;
     hasPendingContent(): boolean;
 }
-declare const spriteAttributes: ({
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset?: undefined;
-    normalized?: undefined;
-} | {
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset: number;
-    normalized?: undefined;
-} | {
-    name: string;
-    size: number;
-    type: number;
-    stride: number;
-    offset: number;
-    normalized: boolean;
-})[];
-export { spriteAttributes };
 export default SpriteRegion;

package/dist/render.d.ts

@@ -1,7 +1,8 @@
-import { IGraphicOptions, IRapiadOptions, IRenderLineOptions, IRenderSpriteOptions, MaskType, WebGLContext } from "./interface";
+import { ICircleOptions, IGraphicOptions, ILayerRender, IRapidOptions, IRectOptions, IRenderLineOptions, IRenderSpriteOptions, ShaderType as ShaderType, MaskType, WebGLContext } from "./interface";
 import { Color, MatrixStack, Vec2 } from "./math";
 import RenderRegion from "./regions/region";
 import { Texture, TextureCache } from "./texture";
+import { TileMapRender, TileSet } from "./tilemap";
 import GLShader from "./webgl/glshader";
 /**
  * The `Rapid` class provides a WebGL-based rendering engine.
@@ -15,6 +16,7 @@ declare class Rapid {
     textures: TextureCache;
     width: number;
     height: number;
+    tileMap: TileMapRender;
     backgroundColor: Color;
     readonly devicePixelRatio: number;
     readonly maxTextureUnits: number;
@@ -22,11 +24,19 @@ declare class Rapid {
     private currentRegion?;
     private currentRegionName?;
     private regions;
+    private currentMaskType;
+    private currentTransformOptions?;
     /**
      * Constructs a new `Rapid` instance with the given options.
      * @param options - Options for initializing the `Rapid` instance.
      */
-    constructor(options: IRapiadOptions);
+    constructor(options: IRapidOptions);
+    /**
+     * Render a tile map layer.
+     * @param data - The map data to render.
+     * @param options - The options for rendering the tile map layer.
+     */
+    renderTileMapLayer(data: (number | string)[][], options: ILayerRender | TileSet): void;
     /**
      * Initializes WebGL context settings.
      * @param gl - The WebGL context.
@@ -47,6 +57,7 @@ declare class Rapid {
      * Sets the current render region by name and optionally a custom shader.
      * @param regionName - The name of the region to set as current.
      * @param customShader - An optional custom shader to use with the region.
+     * @param hasUnifrom - have costum unifrom
      */
     setRegion(regionName: string, customShader?: GLShader): void;
     /**
@@ -57,6 +68,11 @@ declare class Rapid {
      * Restores the matrix state from the stack.
      */
     restore(): void;
+    /**
+     * Executes a callback function within a saved and restored matrix state scope.
+     * @param cb - The callback function to execute within the saved and restored matrix state scope.
+     */
+    withTransform(cb: () => void): void;
     /**
      * Starts the rendering process, resetting the matrix stack and clearing the current region.
      * @param clear - Whether to clear the matrix stack. Defaults to true.
@@ -67,57 +83,74 @@ declare class Rapid {
      */
     endRender(): void;
     /**
-     * Renders a sprite with the specified texture, offset, and options.
-     * @param texture - The texture to render.
-     * @param offsetX - The X offset for the sprite. Defaults to 0.
-     * @param offsetY - The Y offset for the sprite. Defaults to 0.
-     * @param options - Rendering options including color and custom shader.
+     * Render
+     * @param cb - The function to render.
      */
-    renderSprite(texture: Texture, offsetX?: number, offsetY?: number, options?: IRenderSpriteOptions | Color): void;
+    render(cb: () => void): void;
+    /**
+     * Renders a sprite with the specified options.
+     *
+     * @param options - The rendering options for the sprite, including texture, position, color, and shader.
+     */
+    renderSprite(options: IRenderSpriteOptions): void;
+    /**
+     * Renders a texture directly without additional options.
+     * This is a convenience method that calls renderSprite with just the texture.
+     *
+     * @param texture - The texture to render at the current transformation position.
+     */
+    renderTexture(texture: Texture): void;
     /**
      * Renders a line with the specified options.
      *
-     * @param offsetX - The X offset to apply when rendering the line. Defaults to 0.
-     * @param offsetY - The Y offset to apply when rendering the line. Defaults to 0.
-     * @param options - The options for rendering the line, including points and color.
+     * @param options - The options for rendering the line, including points, color, width, and join/cap types.
      */
-    renderLine(offsetX: number | undefined, offsetY: number | undefined, options: IRenderLineOptions): void;
+    renderLine(options: IRenderLineOptions): void;
     /**
-     * Renders graphics based on the provided options or array of Vec2 points.
+     * Renders graphics based on the provided options.
      *
-     * @param offsetX - The X offset to apply when rendering the graphics. Defaults to 0.
-     * @param offsetY - The Y offset to apply when rendering the graphics. Defaults to 0.
-     * @param options - Either an object containing graphic options or an array of Vec2 points.
+     * @param options - The options for rendering the graphic, including points, color, texture, and draw type.
+     */
+    renderGraphic(options: IGraphicOptions): void;
+    /**
+     * Starts the graphic drawing process.
      *
-     * @remarks
-     * If `options` is an array of `Vec2`, it will be converted to an object with `points` property.
-     * If `options` is an object, it should contain `points` (array of `Vec2`) and optionally `color` and `drawType`.
+     * @param options - The options for the graphic drawing, including shader, texture, and draw type.
+     */
+    startGraphicDraw(options: IGraphicOptions): void;
+    /**
+     * Adds a vertex to the current graphic being drawn.
+     *
+     * @param offsetX - The X coordinate of the vertex.
+     * @param offsetY - The Y coordinate of the vertex.
+     * @param uv - The texture UV coordinates for the vertex.
+     * @param color - The color of the vertex. Defaults to the renderer's default color.
+     */
+    addGraphicVertex(offsetX: number, offsetY: number, uv: Vec2, color?: Color): void;
+    /**
+     * Completes the graphic drawing process and renders the result.
      */
-    renderGraphic(offsetX: number | undefined, offsetY: number | undefined, options: IGraphicOptions | Vec2[]): void;
+    endGraphicDraw(): void;
+    private startDraw;
+    private afterDraw;
     /**
-     * Renders a rectangle
-     * @param offsetX - The X coordinate of the top-left corner of the rectangle
-     * @param offsetY - The Y coordinate of the top-left corner of the rectangle
-     * @param width - The width of the rectangle
-     * @param height - The height of the rectangle
-     * @param color - The color of the rectangle
+     * Renders a rectangle with the specified options.
+     *
+     * @param options - The options for rendering the rectangle, including width, height, position, and color.
      */
-    renderRect(offsetX: number, offsetY: number, width: number, height: number, color?: Color): void;
+    renderRect(options: IRectOptions): void;
     /**
-     * Renders a circle
-     * @param offsetX - The X coordinate of the circle's center
-     * @param offsetY - The Y coordinate of the circle's center
-     * @param radius - The radius of the circle
-     * @param color - The color of the circle
-     * @param segments - The number of segments to use when rendering the circle, default is 32
+     * Renders a circle with the specified options.
+     *
+     * @param options - The options for rendering the circle, including radius, position, color, and segment count.
      */
-    renderCircle(offsetX: number, offsetY: number, radius: number, color?: Color, segments?: number): void;
+    renderCircle(options: ICircleOptions): void;
     /**
      * Resizes the canvas and updates the viewport and projection matrix.
      * @param width - The new width of the canvas.
      * @param height - The new height of the canvas.
      */
-    resize(width: number, height: number): void;
+    resize(logicalWidth: number, logicalHeight: number): void;
     /**
      * Clears the canvas with the background color.
      */
@@ -132,31 +165,40 @@ declare class Rapid {
      */
     private createOrthMatrix;
     /**
-     * Transforms a point by applying the current matrix stack.
-     * @param x - The X coordinate of the point.
-     * @param y - The Y coordinate of the point.
-     * @returns The transformed point as an array `[newX, newY]`.
+     * Draw a mask. Automatically calls startDrawMask.
+     * @param type - The type of mask to draw.
+     * @param cb - The callback function to execute.
      */
-    transformPoint(x: number, y: number): number[] | Vec2;
+    drawMask(type: MaskType | undefined, cb: () => void): void;
     /**
-     * Starts drawing a mask using the stencil buffer.
-     * This method sets up the WebGL context to begin defining a mask area.
+     * Start drawing a mask using the stencil buffer.
+     * This method configures the WebGL context to begin defining a mask area.
      */
-    startDrawMask(): void;
+    startDrawMask(type?: MaskType): void;
     /**
-     * Ends the mask drawing process.
+     * End the mask drawing process.
      * This method configures the WebGL context to use the defined mask for subsequent rendering.
      */
-    endDrawMask(type?: MaskType): void;
+    endDrawMask(): void;
     /**
-     * Sets the mask type for rendering
-     * @param type - The type of mask to apply
+     * Set the mask type for rendering
+     * @param type - The mask type to apply
+     * @param start - Whether this is the start of mask drawing
      */
-    setMaskType(type: MaskType): void;
+    private setMaskType;
     /**
-     * Clears the current mask by clearing the stencil buffer.
+     * Clear the current mask by clearing the stencil buffer.
      * This effectively removes any previously defined mask.
      */
     clearMask(): void;
+    /**
+     * Creates a custom shader.
+     * @param vs - Vertex shader code.
+     * @param fs - Fragment shader code.
+     * @param type - Shader type.
+     * @param textureUnit - The number of textures used by the shader
+     * @returns The created shader object.
+     */
+    createCostumShader(vs: string, fs: string, type: ShaderType, textureUnit?: number): GLShader;
 }
 export default Rapid;

package/dist/texture.d.ts

@@ -2,11 +2,13 @@ import Rapid from "./render";
 import { Images, ITextOptions } from "./interface";
 /**
  * texture manager
+ * @ignore
  */
 declare class TextureCache {
     private render;
     private cache;
-    constructor(render: Rapid);
+    private antialias;
+    constructor(render: Rapid, antialias: boolean);
     /**
      * create texture from url
      * Equivalent to {@link Texture.fromUrl} method
@@ -15,7 +17,13 @@ declare class TextureCache {
      * @returns
      */
     textureFromUrl(url: string, antialias?: boolean): Promise<Texture>;
+    textureFromSource(source: Images, antialias?: boolean): Promise<Texture>;
     loadImage(url: string): Promise<HTMLImageElement>;
+    /**
+     * Create a new `Text` instance.
+     * @param options - The options for rendering the text, such as font, size, color, etc.
+     * @returns A new `Text` instance.
+     */
     createText(options: ITextOptions): Text;
 }
 /**
@@ -79,7 +87,7 @@ declare class Texture {
      * @param w - The width of the region.
      * @param h - The height of the region.
      */
-    setClipRegion(x: number, y: number, w: number, h: number): void;
+    setClipRegion(x: number, y: number, w: number, h: number): this | undefined;
     /**
      * Creates a new `Texture` instance from the specified image source.
      * @param rapid - The Rapid instance to use.
@@ -95,7 +103,23 @@ declare class Texture {
      * @returns A new `Texture` instance created from the specified URL.
      */
     static fromUrl(rapid: Rapid, url: string): Promise<Texture>;
+    /**
+     * Converts the current texture into a spritesheet.
+     * @param rapid - The Rapid instance to use.
+     * @param spriteWidth - The width of each sprite in the spritesheet.
+     * @param spriteHeight - The height of each sprite in the spritesheet.
+     * @returns An array of `Texture` instances representing the sprites in the spritesheet.
+     */
+    createSpritesHeet(spriteWidth: number, spriteHeight: number): Texture[];
+    /**
+     * Clone the current texture
+     * @returns A new `Texture` instance with the same base texture reference.
+     */
+    clone(): Texture;
 }
+/**
+ * @ignore
+ */
 export declare const SCALEFACTOR = 2;
 declare class Text extends Texture {
     private options;
@@ -108,6 +132,10 @@ declare class Text extends Texture {
      */
     constructor(rapid: Rapid, options: ITextOptions);
     private updateTextImage;
+    /**
+     * Creates a canvas element for rendering text.
+     * @returns HTMLCanvasElement - The created canvas element.
+     */
     private createTextCanvas;
     /**
      * Update the displayed text