rapid-render 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
18
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
21
+ SOFTWARE.
package/README.md CHANGED
@@ -2,16 +2,24 @@
2
2
 
3
3
  A highly efficient and lightweight WebGL renderer capable of rendering 10k sprites at 60fps.
4
4
 
5
+ * `Intel(r) UHD graphic 620` can handle 30k sprites at a stable 60fps (integrated graphics)
6
+ * `NVIDIA GeForce GTX 1050 with Max-Q Design` can handle 60k sprites at a stable 60fps (discrete graphics)
7
+
8
+ (32 * 32 texture sprites bouncing)
5
9
 
6
10
  [demo](https://nightre.github.io/Rapid.js/demo/) ( [source code](./demo/index.js) )
7
11
 
12
+ [matrix stack demo](https://nightre.github.io/Rapid.js/demo/matrix_stack.html) ( [source code](./demo/matrix_stack.js) )
13
+ [custom shader demo](https://nightre.github.io/Rapid.js/demo/custom-shader.html) ( [source code](./demo/custom-shader.js) )
14
+
15
+
16
+
8
17
  # Features:
9
18
  * Fast rendering ( capable of rendering 10,000 sprites at 60fps )
10
19
  * Multi-texture support ( Batch rendering based on the GPU's maximum texture units )
11
- * Texture cropping
12
20
  * Graphic
13
- * Matrix stacking
14
- * Color manipulation
21
+ * Matrix stack
22
+ * Color
15
23
 
16
24
  # Install
17
25
 
@@ -67,7 +75,7 @@ rapid.renderSprite(cat,0,0, color) // draw Sprite
67
75
  rapid.restore() // back to the previous saved state
68
76
 
69
77
  // draw graphic
70
- // Different vertices can have different colors
78
+ // vertices can have different colors
71
79
  rapid.startGraphicDraw()
72
80
  rapid.addGraphicVertex(0, 0, color)
73
81
  rapid.addGraphicVertex(100, 0, color)
@@ -81,6 +89,35 @@ rapid.endRender()
81
89
  rapid.resize(100,100)
82
90
  ```
83
91
 
92
+ # Custom Shader
93
+
94
+ View demo and watch detailed shader code [custom shader demo](https://nightre.github.io/Rapid.js/demo/custom-shader.html) ( [source code](./demo/custom-shader.js) )
95
+
96
+ ```js
97
+ const vertexShaderSource = `...`
98
+ const fragmentShaderSource = `...`
99
+
100
+ const customShader = new GLShader(rapid, vertexShaderSource, fragmentShaderSource, spriteAttributes)
101
+ // If you want to create a custom shader for graphic, please use graphicAttributes
102
+ rapid.startRender()
103
+
104
+ rapid.renderSprite(plane, 100, 100, {
105
+ shader: customShader, // shader
106
+ uniforms: {
107
+ // Set custom uniform (You can set mat3, vec2, and so on here)
108
+ uCustomUniform: Number(costumUniformValue)
109
+ // uVec2Uniform: [0,2] // recognized as vec2
110
+ // uMat3Uniform: [
111
+ // [0,0,0],
112
+ // [0,0,0],
113
+ // [0,0,0],
114
+ // ]
115
+ // recognized as mat3
116
+ }
117
+ });
118
+
119
+ rapid.endRender()
120
+ ```
84
121
  # Screen Shot
85
122
 
86
- ![screen](./screenshot/screen.png)
123
+ ![screen](./screenshot/screen.png)
package/dist/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
+ import { graphicAttributes } from "./regions/graphic_region";
2
+ import { spriteAttributes } from "./regions/sprite_region";
1
3
  import Rapid from "./render";
2
- export { Rapid, };
4
+ import GLShader from "./webgl/glshader";
5
+ export { Rapid, GLShader, spriteAttributes, graphicAttributes, };
3
6
  export * from "./math";
4
7
  export * from "./interface";
5
8
  export * from "./texture";
@@ -1,9 +1,12 @@
1
+ import { Color } from "./math";
2
+ import GLShader from "./webgl/glshader";
1
3
  export type WebGLContext = WebGL2RenderingContext | WebGLRenderingContext;
2
4
  export interface IRapiadOptions {
3
5
  canvas: HTMLCanvasElement;
4
6
  pixelDensity?: number;
5
7
  width?: number;
6
8
  height?: number;
9
+ backgroundColor?: Color;
7
10
  }
8
11
  export interface IAttribute {
9
12
  name: string;
@@ -13,4 +16,10 @@ export interface IAttribute {
13
16
  stride: number;
14
17
  offset?: number;
15
18
  }
19
+ export interface IRenderSpriteOptions {
20
+ color?: Color;
21
+ shader?: GLShader;
22
+ uniforms?: UniformType;
23
+ }
24
+ export type UniformType = Record<string, number | Array<any>>;
16
25
  export type Images = ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas;
package/dist/math.d.ts CHANGED
@@ -35,7 +35,7 @@ export declare class DynamicArrayBuffer {
35
35
  * @param end
36
36
  * @returns
37
37
  */
38
- getArray(begin?: number, end?: number): Float32Array | Uint16Array;
38
+ getArray(begin?: number, end?: number): Uint16Array | Float32Array;
39
39
  /**
40
40
  * length of the array
41
41
  */
@@ -101,27 +101,100 @@ export declare class WebglElementBufferArray extends WebglBufferArray {
101
101
  constructor(gl: WebGLContext, elemVertPerObj: number, vertexPerObject: number, maxBatch: number);
102
102
  protected addObject(_vertex?: number): void;
103
103
  }
104
+ /**
105
+ * Represents a color with red, green, blue, and alpha (transparency) components.
106
+ */
104
107
  export declare class Color {
105
108
  private _r;
106
109
  private _g;
107
110
  private _b;
108
111
  private _a;
109
112
  uint32: number;
113
+ /**
114
+ * Creates an instance of Color.
115
+ * @param r - The red component (0-255).
116
+ * @param g - The green component (0-255).
117
+ * @param b - The blue component (0-255).
118
+ * @param a - The alpha component (0-255).
119
+ */
110
120
  constructor(r: number, g: number, b: number, a: number);
121
+ /**
122
+ * Gets the red component.
123
+ */
111
124
  get r(): number;
125
+ /**
126
+ * Sets the red component and updates the uint32 representation.
127
+ * @param value - The new red component (0-255).
128
+ */
112
129
  set r(value: number);
130
+ /**
131
+ * Gets the green component.
132
+ */
113
133
  get g(): number;
134
+ /**
135
+ * Sets the green component and updates the uint32 representation.
136
+ * @param value - The new green component (0-255).
137
+ */
114
138
  set g(value: number);
139
+ /**
140
+ * Gets the blue component.
141
+ */
115
142
  get b(): number;
143
+ /**
144
+ * Sets the blue component and updates the uint32 representation.
145
+ * @param value - The new blue component (0-255).
146
+ */
116
147
  set b(value: number);
148
+ /**
149
+ * Gets the alpha component.
150
+ */
117
151
  get a(): number;
152
+ /**
153
+ * Sets the alpha component and updates the uint32 representation.
154
+ * @param value - The new alpha component (0-255).
155
+ */
118
156
  set a(value: number);
157
+ /**
158
+ * Updates the uint32 representation of the color.
159
+ * @private
160
+ */
119
161
  private updateUint;
162
+ /**
163
+ * Sets the RGBA values of the color and updates the uint32 representation.
164
+ * @param r - The red component (0-255).
165
+ * @param g - The green component (0-255).
166
+ * @param b - The blue component (0-255).
167
+ * @param a - The alpha component (0-255).
168
+ */
120
169
  setRGBA(r: number, g: number, b: number, a: number): void;
170
+ /**
171
+ * Copies the RGBA values from another color.
172
+ * @param color - The color to copy from.
173
+ */
121
174
  copy(color: Color): void;
175
+ /**
176
+ * Checks if the current color is equal to another color.
177
+ * @param color - The color to compare with.
178
+ * @returns True if the colors are equal, otherwise false.
179
+ */
122
180
  equals(color: Color): boolean;
181
+ /**
182
+ * Creates a Color instance from a hexadecimal color string.
183
+ * @param hexString - The hexadecimal color string, e.g., '#RRGGBB' or '#RRGGBBAA'.
184
+ * @returns A new Color instance.
185
+ */
123
186
  static fromHex(hexString: string): Color;
187
+ /**
188
+ * Adds the components of another color to this color, clamping the result to 255.
189
+ * @param color - The color to add.
190
+ * @returns A new Color instance with the result of the addition.
191
+ */
124
192
  add(color: Color): Color;
193
+ /**
194
+ * Subtracts the components of another color from this color, clamping the result to 0.
195
+ * @param color - The color to subtract.
196
+ * @returns A new Color instance with the result of the subtraction.
197
+ */
125
198
  subtract(color: Color): Color;
126
199
  }
127
200
  export {};
@@ -1 +1 @@
1
- var rapid=function(e){"use strict";class t{constructor(e){Object.defineProperty(this,"usedElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"typedArray",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arrayType",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"maxElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"bytePerElem",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arraybuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.usedElemNum=0,this.maxElemNum=512,this.bytePerElem=e.BYTES_PER_ELEMENT,this.arrayType=e,this.arraybuffer=new ArrayBuffer(this.maxElemNum*this.bytePerElem),this.typedArray=new e(this.arraybuffer),e==Float32Array&&(this.uint32=new Uint32Array(this.arraybuffer))}clear(){this.usedElemNum=0}resize(e=0){if((e+=this.usedElemNum)>this.maxElemNum){for(;e>this.maxElemNum;)this.maxElemNum<<=1;this.setMaxSize(this.maxElemNum)}}setMaxSize(e=this.maxElemNum){const t=this.typedArray;this.maxElemNum=e,this.arraybuffer=new ArrayBuffer(e*this.bytePerElem),this.typedArray=new this.arrayType(this.arraybuffer),this.uint32&&(this.uint32=new Uint32Array(this.arraybuffer)),this.typedArray.set(t)}push(e){this.typedArray[this.usedElemNum++]=e}pushUint(e){this.uint32[this.usedElemNum++]=e}pop(e){this.usedElemNum-=e}getArray(e=0,t){return null==t?this.typedArray:this.typedArray.subarray(e,t)}get length(){return this.typedArray.length}}class r extends t{constructor(e,t,r=e.ARRAY_BUFFER){super(t),Object.defineProperty(this,"buffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dirty",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglBufferSize",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.gl=e,this.buffer=e.createBuffer(),this.type=r}push(e){super.push(e),this.dirty=!0}bindBuffer(){this.gl.bindBuffer(this.type,this.buffer)}bufferData(){if(this.dirty){const e=this.gl;this.maxElemNum>this.webglBufferSize?(e.bufferData(this.type,this.getArray(),e.STATIC_DRAW),this.webglBufferSize=this.maxElemNum):e.bufferSubData(this.type,0,this.getArray(0,this.usedElemNum)),this.dirty=!1}}}class i extends t{constructor(){super(Float32Array)}pushMat(){const e=this.usedElemNum-6,t=this.typedArray;this.resize(6),this.push(t[e+0]),this.push(t[e+1]),this.push(t[e+2]),this.push(t[e+3]),this.push(t[e+4]),this.push(t[e+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(e,t){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*e+i[r+2]*t+i[r+4],i[r+5]=i[r+1]*e+i[r+3]*t+i[r+5]}rotate(e){const t=this.usedElemNum-6,r=this.typedArray,i=Math.cos(e),a=Math.sin(e),s=r[t+0],n=r[t+1],u=r[t+2],o=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=u*i-o*a,r[t+3]=u*a+o*i}scale(e,t=e){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*e,i[r+1]=i[r+1]*e,i[r+2]=i[r+2]*t,i[r+3]=i[r+3]*t}apply(e,t){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*e+i[r+2]*t+i[r+4],i[r+1]*e+i[r+3]*t+i[r+5]]}getInverse(){const e=this.usedElemNum-6,t=this.typedArray,r=t[e+0],i=t[e+1],a=t[e+2],s=t[e+3],n=t[e+4],u=t[e+5],o=r*s-i*a;return new Float32Array([s/o,-i/o,-a/o,r/o,(a*u-s*n)/o,(i*n-r*u)/o])}getTransform(){const e=this.usedElemNum-6,t=this.typedArray;return new Float32Array([t[e+0],t[e+1],t[e+2],t[e+3],t[e+4],t[e+5]])}setTransform(e){const t=this.usedElemNum-6,r=this.typedArray;r[t+0]=e[0],r[t+1]=e[1],r[t+2]=e[2],r[t+3]=e[3],r[t+4]=e[4],r[t+5]=e[5]}}class a extends r{constructor(e,t,r,i){super(e,Uint16Array,e.ELEMENT_ARRAY_BUFFER),this.setMaxSize(t*i);for(let e=0;e<i;e++)this.addObject(e*r);this.bindBuffer(),this.bufferData()}addObject(e){}}class s{constructor(e,t,r,i){Object.defineProperty(this,"_r",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_g",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_b",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_a",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this._r=e,this._g=t,this._b=r,this._a=i,this.updateUint()}get r(){return this._r}set r(e){this._r=e,this.updateUint()}get g(){return this._g}set g(e){this._g=e,this.updateUint()}get b(){return this._b}set b(e){this._b=e,this.updateUint()}get a(){return this._a}set a(e){this._a=e,this.updateUint()}updateUint(){this.uint32=(this._a<<24|this._b<<16|this._g<<8|this._r)>>>0}setRGBA(e,t,r,i){this.r=e,this.g=t,this.b=r,this.a=i,this.updateUint()}copy(e){this.setRGBA(e.r,e.g,e.b,e.a)}equals(e){return e.r==this.r&&e.g==this.g&&e.b==this.b&&e.a==this.a}static fromHex(e){e.startsWith("#")&&(e=e.slice(1));const t=parseInt(e.slice(0,2),16),r=parseInt(e.slice(2,4),16),i=parseInt(e.slice(4,6),16);let a=255;return e.length>=8&&(a=parseInt(e.slice(6,8),16)),new s(t,r,i,a)}add(e){return new s(Math.min(this.r+e.r,255),Math.min(this.g+e.g,255),Math.min(this.b+e.b,255),Math.min(this.a+e.a,255))}subtract(e){return new s(Math.max(this.r-e.r,0),Math.max(this.g-e.g,0),Math.max(this.b-e.b,0),Math.max(this.a-e.a,0))}}const n=(e,t,r)=>{const i=e.createShader(r);if(!i)throw new Error("Unable to create webgl shader");e.shaderSource(i,t),e.compileShader(i);if(!e.getShaderParameter(i,e.COMPILE_STATUS)){const r=e.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+t)}return i};class u{constructor(e,t,r){Object.defineProperty(this,"attributeLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"unifromLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"program",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.program=((e,t,r)=>{var i=e.createProgram(),a=n(e,t,35633),s=n(e,r,35632);if(!i)throw new Error("Unable to create program shader");return e.attachShader(i,a),e.attachShader(i,s),e.linkProgram(i),i})(e.gl,t,r),this.gl=e.gl,this.parseShader(t),this.parseShader(r)}use(){this.gl.useProgram(this.program)}parseShader(e){const t=this.gl,r=e.match(/attribute\s+\w+\s+(\w+)/g);if(r)for(const e of r){const r=e.split(" ")[2];this.attributeLoc[r]=t.getAttribLocation(this.program,r)}const i=e.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const e of i){const r=e.split(" ")[2];this.unifromLoc[r]=t.getUniformLocation(this.program,r)}}setAttribute(e){const t=this.gl;t.vertexAttribPointer(this.attributeLoc[e.name],e.size,e.type,e.normalized||!1,e.stride,e.offset||0),t.enableVertexAttribArray(this.attributeLoc[e.name])}}class o{constructor(e,t){Object.defineProperty(this,"currentShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"attribute",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglArrayBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"rapid",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"usedTextures",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"TEXTURE_UNITS_ARRAY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.attribute=t,this.rapid=e,this.gl=e.gl,this.webglArrayBuffer=new r(e.gl,Float32Array,e.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:e.MAX_TEXTURE_UNITS},((e,t)=>t))}addVertex(e,t,...r){const[i,a]=this.rapid.transformPoint(e,t);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a)}useTexture(e){let t=this.usedTextures.indexOf(e);return-1===t&&(this.usedTextures.length>=this.rapid.MAX_TEXTURE_UNITS&&this.render(),this.usedTextures.push(e),t=this.usedTextures.length-1),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer(),this.attribute.forEach((e=>{this.currentShader?.setAttribute(e)})),this.gl.uniformMatrix4fv(this.currentShader.unifromLoc.uProjectionMatrix,!1,this.rapid.projection)}exitRegion(){}initDefaultShader(e,t){this.webglArrayBuffer.bindBuffer(),this.defaultShader=new u(this.rapid,e,t)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const e=this.gl;for(let t=0;t<this.usedTextures.length;t++)e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}}class h extends o{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:12},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"vertex",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(e,t,r){this.webglArrayBuffer.resize(3),super.addVertex(e,t),this.webglArrayBuffer.pushUint(r),this.vertex+=1}executeRender(){super.executeRender();const e=this.gl;e.drawArrays(e.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}class l extends a{constructor(e,t){super(e,6,4,t)}addObject(e){super.addObject(),this.push(e),this.push(e+3),this.push(e+2),this.push(e),this.push(e+1),this.push(e+2)}}class c extends o{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:24},{name:"aRegion",size:2,type:t.FLOAT,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:t.FLOAT,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"batchSprite",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"indexBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"MAX_BATCH",{enumerable:!0,configurable:!0,writable:!0,value:void 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}",this.generateFragShader("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}",e.MAX_TEXTURE_UNITS)),this.MAX_BATCH=Math.floor(16384),this.indexBuffer=new l(t,this.MAX_BATCH)}addVertex(e,t,r,i,a,s){super.addVertex(e,t),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a),this.webglArrayBuffer.pushUint(s)}renderSprite(e,t,r,i,a,s,n,u,o,h){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=u+t,b=o+r,d=i+s,f=a+n;this.addVertex(u,o,i,a,l,h),this.addVertex(c,o,d,a,l,h),this.addVertex(c,b,d,f,l,h),this.addVertex(u,b,i,f,l,h)}executeRender(){super.executeRender();const e=this.gl;this.indexBuffer.bufferData(),e.drawElements(e.TRIANGLES,6*this.batchSprite,e.UNSIGNED_SHORT,0)}enterRegion(e){super.enterRegion(e),this.indexBuffer.bindBuffer(),this.gl.uniform1iv(this.currentShader.unifromLoc.uTextures,this.TEXTURE_UNITS_ARRAY)}initializeForNextRender(){super.initializeForNextRender(),this.batchSprite=0}generateFragShader(e,t){let r="";e=e.replace("%TEXTURE_NUM%",t.toString());for(let e=0;e<t;e++)r+=0==e?`if(vTextureId == ${e}.0)`:e==t-1?"else":`else if(vTextureId == ${e}.0)`,r+=`{color = texture2D(uTextures[${e}], vRegion);}`;return e=e.replace("%GET_COLOR%",r)}}class b{constructor(e){Object.defineProperty(this,"render",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cache",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.render=e}async textureFromUrl(e,t=!1){let r=this.cache.get(e);if(!r){const i=await this.loadImage(e);r=d.fromImageSource(this.render,i,t),this.cache.set(e,r)}return new f(r)}async loadImage(e){return new Promise((t=>{const r=new Image;r.onload=()=>{t(r)},r.src=e}))}}class d{constructor(e,t,r){Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.texture=e,this.width=t,this.height=r}static fromImageSource(e,t,r=!1){return new d(function(e,t,r){const i=e.createTexture();if(e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),!i)throw new Error("unable to create texture");return i}(e.gl,t,r),t.width,t.height)}}class f{constructor(e){Object.defineProperty(this,"base",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipX",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipW",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipH",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.base=e,this.setClipRegion(0,0,e.width,e.height)}setClipRegion(e,t,r,i){this.clipX=e/this.base.width,this.clipY=t/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(e,t,r=!1){return new f(d.fromImageSource(e,t,r))}static fromUrl(e,t){return e.texture.textureFromUrl(t)}}return e.BaseTexture=d,e.Color=s,e.DynamicArrayBuffer=t,e.MatrixStack=i,e.Rapid=class{constructor(e){Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"canvas",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"projection",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"matrixStack",{enumerable:!0,configurable:!0,writable:!0,value:new i}),Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:new b(this)}),Object.defineProperty(this,"currentRegion",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentRegionName",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"regions",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"MAX_TEXTURE_UNITS",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultColor",{enumerable:!0,configurable:!0,writable:!0,value:new s(255,255,255,255)});const t=(e=>{const t=e.getContext("webgl2")||e.getContext("webgl");if(!t)throw new Error("TODO");return t})(e.canvas);this.gl=t,this.canvas=e.canvas,this.MAX_TEXTURE_UNITS=t.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS),this.projection=this.createOrthMatrix(0,this.canvas.width,this.canvas.height,0),this.registerBuildInRegion(),t.enable(t.BLEND),t.disable(t.DEPTH_TEST),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA)}registerBuildInRegion(){this.registerRegion("sprite",c),this.registerRegion("graphic",h)}registerRegion(e,t){this.regions.set(e,new t(this))}setRegion(e,t){if(e!=this.currentRegionName||t&&t!==this.currentRegion.currentShader){const r=this.regions.get(e);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=e,r.enterRegion(t)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(e=!0){e&&this.matrixStack.clear(),this.matrixStack.pushIdentity(),this.currentRegion=void 0,this.currentRegionName=void 0}endRender(){this.currentRegion?.render()}renderSprite(e,t=0,r=0,i=this.defaultColor,a){this.setRegion("sprite",a),this.currentRegion.renderSprite(e.base.texture,e.width,e.height,e.clipX,e.clipY,e.clipW,e.clipH,t,r,i.uint32)}startGraphicDraw(e){this.setRegion("graphic",e),this.currentRegion.startRender()}addGraphicVertex(e,t,r){this.currentRegion.addVertex(e,t,r.uint32)}endGraphicDraw(){this.currentRegion.render()}clear(){const e=this.gl;e.clearColor(.2,.2,.2,1),e.clear(e.COLOR_BUFFER_BIT)}createOrthMatrix(e,t,r,i){return new Float32Array([2/(t-e),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(t+e)/(t-e),-(i+r)/(i-r),0,1])}transformPoint(e,t){return this.matrixStack.apply(e,t)}},e.Texture=f,e.TextureCache=b,e.WebglBufferArray=r,e.WebglElementBufferArray=a,e}({});
1
+ var rapid=function(t){"use strict";const e=(t,e,r)=>{const i=t.createShader(r);if(!i)throw new Error("Unable to create webgl shader");t.shaderSource(i,e),t.compileShader(i);if(!t.getShaderParameter(i,t.COMPILE_STATUS)){const r=t.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+e)}return i};const r=5126;class i{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 i{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 a extends i{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){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*t+i[r+2]*e+i[r+4],i[r+5]=i[r+1]*t+i[r+3]*e+i[r+5]}rotate(t){const e=this.usedElemNum-6,r=this.typedArray,i=Math.cos(t),s=Math.sin(t),a=r[e+0],n=r[e+1],h=r[e+2],o=r[e+3];r[e+0]=a*i-n*s,r[e+1]=a*s+n*i,r[e+2]=h*i-o*s,r[e+3]=h*s+o*i}scale(t,e=t){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*t,i[r+1]=i[r+1]*t,i[r+2]=i[r+2]*e,i[r+3]=i[r+3]*e}apply(t,e){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*t+i[r+2]*e+i[r+4],i[r+1]*t+i[r+3]*e+i[r+5]]}getInverse(){const t=this.usedElemNum-6,e=this.typedArray,r=e[t+0],i=e[t+1],s=e[t+2],a=e[t+3],n=e[t+4],h=e[t+5],o=r*a-i*s;return new Float32Array([a/o,-i/o,-s/o,r/o,(s*h-a*n)/o,(i*n-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,i){super(t,Uint16Array,t.ELEMENT_ARRAY_BUFFER),this.setMaxSize(e*i);for(let t=0;t<i;t++)this.addObject(t*r);this.bindBuffer(),this.bufferData()}addObject(t){}}class h{constructor(t,e,r,i){this._r=t,this._g=e,this._b=r,this._a=i,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,i){this.r=t,this.g=e,this.b=r,this.a=i,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),i=parseInt(t.slice(4,6),16);let s=255;return t.length>=8&&(s=parseInt(t.slice(6,8),16)),new h(e,r,i,s)}add(t){return new h(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 h(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 o{constructor(t,r,i,s){this.attributeLoc={},this.uniformLoc={};const a=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}(i,t.maxTextureUnits);this.program=((t,r,i)=>{var s=t.createProgram(),a=e(t,r,35633),n=e(t,i,35632);if(!s)throw new Error("Unable to create program shader");return t.attachShader(s,a),t.attachShader(s,n),t.linkProgram(s),s})(t.gl,r,a),this.gl=t.gl,this.attribute=s,this.parseShader(r),this.parseShader(a)}setUniforms(t){const e=this.gl;for(const r in t){const i=t[r],s=this.getUniform(r);if("number"==typeof i)e.uniform1f(s,i);else if(Array.isArray(i))switch(i.length){case 1:Number.isInteger(i[0])?e.uniform1i(s,i[0]):e.uniform1f(s,i[0]);break;case 2:Number.isInteger(i[0])?e.uniform2iv(s,i):e.uniform2fv(s,i);break;case 3:Number.isInteger(i[0])?e.uniform3iv(s,i):e.uniform3fv(s,i);break;case 4:Number.isInteger(i[0])?e.uniform4iv(s,i):e.uniform4fv(s,i);break;case 9:e.uniformMatrix3fv(s,!1,i);break;case 16:e.uniformMatrix4fv(s,!1,i);break;default:console.error(`Unsupported uniform array length for ${r}:`,i.length)}else"boolean"==typeof i?e.uniform1i(s,i?1:0):console.error(`Unsupported uniform type for ${r}:`,typeof i)}}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],i=e.getAttribLocation(this.program,r);-1!=i&&(this.attributeLoc[r]=i)}const i=t.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const t of i){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 u{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[i,s]=this.rapid.transformPoint(t,e);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s)}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 o(this.rapid,t,e,this.attribute)}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=[]}}class c extends u{constructor(t){super(t,l),this.vertex=0,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(t,e,r){this.webglArrayBuffer.resize(3),super.addVertex(t,e),this.webglArrayBuffer.pushUint(r),this.vertex+=1}drawCircle(t,e,r,i){const s=2*Math.PI/30;this.startRender(),this.addVertex(t,e,i);for(let a=0;a<=30;a++){const n=a*s,h=t+r*Math.cos(n),o=e+r*Math.sin(n);this.addVertex(h,o,i)}this.executeRender()}executeRender(){super.executeRender();const t=this.gl;t.drawArrays(t.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}const l=[{name:"aPosition",size:2,type:r,stride:12},{name:"aColor",size:4,type:5121,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];class d 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 f extends u{constructor(t){const e=t.gl;super(t,g),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 d(e,this.MAX_BATCH)}addVertex(t,e,r,i,s,a){super.addVertex(t,e),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s),this.webglArrayBuffer.pushUint(a)}renderSprite(t,e,r,i,s,a,n,h,o,u,c){var l;c&&(null===(l=this.currentShader)||void 0===l||l.setUniforms(c)),this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const d=this.useTexture(t),f=h+e,g=o+r,m=i+a,p=s+n;this.addVertex(h,o,i,s,d,u),this.addVertex(f,o,m,s,d,u),this.addVertex(f,g,m,p,d,u),this.addVertex(h,g,i,p,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}}const g=[{name:"aPosition",size:2,type:r,stride:24},{name:"aRegion",size:2,type:r,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:r,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:5121,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];class m{constructor(t){this.cache=new Map,this.render=t}async textureFromUrl(t,e=!1){let r=this.cache.get(t);if(!r){const i=await this.loadImage(t);r=p.fromImageSource(this.render,i,e),this.cache.set(t,r)}return new x(r)}async loadImage(t){return new Promise((e=>{const r=new Image;r.onload=()=>{e(r)},r.src=t}))}}class p{constructor(t,e,r){this.texture=t,this.width=e,this.height=r}static fromImageSource(t,e,r=!1){return new p(function(t,e,r){const i=t.createTexture();if(t.bindTexture(t.TEXTURE_2D,i),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),!i)throw new Error("unable to create texture");return i}(t.gl,e,r),e.width,e.height)}}class x{constructor(t){this.base=t,this.setClipRegion(0,0,t.width,t.height)}setClipRegion(t,e,r,i){this.clipX=t/this.base.width,this.clipY=e/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(t,e,r=!1){return new x(p.fromImageSource(t,e,r))}static fromUrl(t,e){return t.textures.textureFromUrl(e)}}return t.BaseTexture=p,t.Color=h,t.DynamicArrayBuffer=i,t.GLShader=o,t.MatrixStack=a,t.Rapid=class{constructor(t){this.projectionDirty=!0,this.matrixStack=new a,this.textures=new m(this),this.devicePixelRatio=window.devicePixelRatio||1,this.defaultColor=new h(255,255,255,255),this.regions=new Map;const e=(t=>{const e=t.getContext("webgl2")||t.getContext("webgl");if(!e)throw new Error("TODO");return e})(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 h(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)}registerBuildInRegion(){this.registerRegion("sprite",f),this.registerRegion("graphic",c)}registerRegion(t,e){this.regions.set(t,new e(this))}setRegion(t,e){if(t!=this.currentRegionName||e&&e!==this.currentRegion.currentShader){const r=this.regions.get(t);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=t,r.enterRegion(e)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(t=!0){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,i){if(i instanceof h)return this.renderSprite(t,e,r,{color:i});this.setRegion("sprite",null==i?void 0:i.shader),this.currentRegion.renderSprite(t.base.texture,t.width,t.height,t.clipX,t.clipY,t.clipW,t.clipH,e,r,((null==i?void 0:i.color)||this.defaultColor).uint32,null==i?void 0:i.uniforms)}startGraphicDraw(t){this.setRegion("graphic",t),this.currentRegion.startRender()}addGraphicVertex(t,e,r){this.currentRegion.addVertex(t,e,r.uint32)}endGraphicDraw(){this.currentRegion.render()}resize(t,e){this.width=t,this.height=e;const r=t*this.devicePixelRatio,i=e*this.devicePixelRatio;this.canvas.width=r,this.canvas.height=i,this.gl.viewport(0,0,r,i),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)}createOrthMatrix(t,e,r,i){return new Float32Array([2/(e-t),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(e+t)/(e-t),-(i+r)/(i-r),0,1])}transformPoint(t,e){return this.matrixStack.apply(t,e)}},t.Texture=x,t.TextureCache=m,t.WebglBufferArray=s,t.WebglElementBufferArray=n,t.graphicAttributes=l,t.spriteAttributes=g,t}({});
package/dist/rapid.js CHANGED
@@ -1 +1 @@
1
- class e{constructor(e){Object.defineProperty(this,"usedElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"typedArray",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arrayType",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"maxElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"bytePerElem",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arraybuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.usedElemNum=0,this.maxElemNum=512,this.bytePerElem=e.BYTES_PER_ELEMENT,this.arrayType=e,this.arraybuffer=new ArrayBuffer(this.maxElemNum*this.bytePerElem),this.typedArray=new e(this.arraybuffer),e==Float32Array&&(this.uint32=new Uint32Array(this.arraybuffer))}clear(){this.usedElemNum=0}resize(e=0){if((e+=this.usedElemNum)>this.maxElemNum){for(;e>this.maxElemNum;)this.maxElemNum<<=1;this.setMaxSize(this.maxElemNum)}}setMaxSize(e=this.maxElemNum){const t=this.typedArray;this.maxElemNum=e,this.arraybuffer=new ArrayBuffer(e*this.bytePerElem),this.typedArray=new this.arrayType(this.arraybuffer),this.uint32&&(this.uint32=new Uint32Array(this.arraybuffer)),this.typedArray.set(t)}push(e){this.typedArray[this.usedElemNum++]=e}pushUint(e){this.uint32[this.usedElemNum++]=e}pop(e){this.usedElemNum-=e}getArray(e=0,t){return null==t?this.typedArray:this.typedArray.subarray(e,t)}get length(){return this.typedArray.length}}class t extends e{constructor(e,t,r=e.ARRAY_BUFFER){super(t),Object.defineProperty(this,"buffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dirty",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglBufferSize",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.gl=e,this.buffer=e.createBuffer(),this.type=r}push(e){super.push(e),this.dirty=!0}bindBuffer(){this.gl.bindBuffer(this.type,this.buffer)}bufferData(){if(this.dirty){const e=this.gl;this.maxElemNum>this.webglBufferSize?(e.bufferData(this.type,this.getArray(),e.STATIC_DRAW),this.webglBufferSize=this.maxElemNum):e.bufferSubData(this.type,0,this.getArray(0,this.usedElemNum)),this.dirty=!1}}}class r extends e{constructor(){super(Float32Array)}pushMat(){const e=this.usedElemNum-6,t=this.typedArray;this.resize(6),this.push(t[e+0]),this.push(t[e+1]),this.push(t[e+2]),this.push(t[e+3]),this.push(t[e+4]),this.push(t[e+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(e,t){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*e+i[r+2]*t+i[r+4],i[r+5]=i[r+1]*e+i[r+3]*t+i[r+5]}rotate(e){const t=this.usedElemNum-6,r=this.typedArray,i=Math.cos(e),a=Math.sin(e),s=r[t+0],n=r[t+1],u=r[t+2],o=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=u*i-o*a,r[t+3]=u*a+o*i}scale(e,t=e){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*e,i[r+1]=i[r+1]*e,i[r+2]=i[r+2]*t,i[r+3]=i[r+3]*t}apply(e,t){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*e+i[r+2]*t+i[r+4],i[r+1]*e+i[r+3]*t+i[r+5]]}getInverse(){const e=this.usedElemNum-6,t=this.typedArray,r=t[e+0],i=t[e+1],a=t[e+2],s=t[e+3],n=t[e+4],u=t[e+5],o=r*s-i*a;return new Float32Array([s/o,-i/o,-a/o,r/o,(a*u-s*n)/o,(i*n-r*u)/o])}getTransform(){const e=this.usedElemNum-6,t=this.typedArray;return new Float32Array([t[e+0],t[e+1],t[e+2],t[e+3],t[e+4],t[e+5]])}setTransform(e){const t=this.usedElemNum-6,r=this.typedArray;r[t+0]=e[0],r[t+1]=e[1],r[t+2]=e[2],r[t+3]=e[3],r[t+4]=e[4],r[t+5]=e[5]}}class i extends t{constructor(e,t,r,i){super(e,Uint16Array,e.ELEMENT_ARRAY_BUFFER),this.setMaxSize(t*i);for(let e=0;e<i;e++)this.addObject(e*r);this.bindBuffer(),this.bufferData()}addObject(e){}}class a{constructor(e,t,r,i){Object.defineProperty(this,"_r",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_g",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_b",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_a",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this._r=e,this._g=t,this._b=r,this._a=i,this.updateUint()}get r(){return this._r}set r(e){this._r=e,this.updateUint()}get g(){return this._g}set g(e){this._g=e,this.updateUint()}get b(){return this._b}set b(e){this._b=e,this.updateUint()}get a(){return this._a}set a(e){this._a=e,this.updateUint()}updateUint(){this.uint32=(this._a<<24|this._b<<16|this._g<<8|this._r)>>>0}setRGBA(e,t,r,i){this.r=e,this.g=t,this.b=r,this.a=i,this.updateUint()}copy(e){this.setRGBA(e.r,e.g,e.b,e.a)}equals(e){return e.r==this.r&&e.g==this.g&&e.b==this.b&&e.a==this.a}static fromHex(e){e.startsWith("#")&&(e=e.slice(1));const t=parseInt(e.slice(0,2),16),r=parseInt(e.slice(2,4),16),i=parseInt(e.slice(4,6),16);let s=255;return e.length>=8&&(s=parseInt(e.slice(6,8),16)),new a(t,r,i,s)}add(e){return new a(Math.min(this.r+e.r,255),Math.min(this.g+e.g,255),Math.min(this.b+e.b,255),Math.min(this.a+e.a,255))}subtract(e){return new a(Math.max(this.r-e.r,0),Math.max(this.g-e.g,0),Math.max(this.b-e.b,0),Math.max(this.a-e.a,0))}}const s=(e,t,r)=>{const i=e.createShader(r);if(!i)throw new Error("Unable to create webgl shader");e.shaderSource(i,t),e.compileShader(i);if(!e.getShaderParameter(i,e.COMPILE_STATUS)){const r=e.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+t)}return i};class n{constructor(e,t,r){Object.defineProperty(this,"attributeLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"unifromLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"program",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.program=((e,t,r)=>{var i=e.createProgram(),a=s(e,t,35633),n=s(e,r,35632);if(!i)throw new Error("Unable to create program shader");return e.attachShader(i,a),e.attachShader(i,n),e.linkProgram(i),i})(e.gl,t,r),this.gl=e.gl,this.parseShader(t),this.parseShader(r)}use(){this.gl.useProgram(this.program)}parseShader(e){const t=this.gl,r=e.match(/attribute\s+\w+\s+(\w+)/g);if(r)for(const e of r){const r=e.split(" ")[2];this.attributeLoc[r]=t.getAttribLocation(this.program,r)}const i=e.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const e of i){const r=e.split(" ")[2];this.unifromLoc[r]=t.getUniformLocation(this.program,r)}}setAttribute(e){const t=this.gl;t.vertexAttribPointer(this.attributeLoc[e.name],e.size,e.type,e.normalized||!1,e.stride,e.offset||0),t.enableVertexAttribArray(this.attributeLoc[e.name])}}class u{constructor(e,r){Object.defineProperty(this,"currentShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"attribute",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglArrayBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"rapid",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"usedTextures",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"TEXTURE_UNITS_ARRAY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.attribute=r,this.rapid=e,this.gl=e.gl,this.webglArrayBuffer=new t(e.gl,Float32Array,e.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:e.MAX_TEXTURE_UNITS},((e,t)=>t))}addVertex(e,t,...r){const[i,a]=this.rapid.transformPoint(e,t);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a)}useTexture(e){let t=this.usedTextures.indexOf(e);return-1===t&&(this.usedTextures.length>=this.rapid.MAX_TEXTURE_UNITS&&this.render(),this.usedTextures.push(e),t=this.usedTextures.length-1),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer(),this.attribute.forEach((e=>{this.currentShader?.setAttribute(e)})),this.gl.uniformMatrix4fv(this.currentShader.unifromLoc.uProjectionMatrix,!1,this.rapid.projection)}exitRegion(){}initDefaultShader(e,t){this.webglArrayBuffer.bindBuffer(),this.defaultShader=new n(this.rapid,e,t)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const e=this.gl;for(let t=0;t<this.usedTextures.length;t++)e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}}class o extends u{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:12},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"vertex",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(e,t,r){this.webglArrayBuffer.resize(3),super.addVertex(e,t),this.webglArrayBuffer.pushUint(r),this.vertex+=1}executeRender(){super.executeRender();const e=this.gl;e.drawArrays(e.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}class h extends i{constructor(e,t){super(e,6,4,t)}addObject(e){super.addObject(),this.push(e),this.push(e+3),this.push(e+2),this.push(e),this.push(e+1),this.push(e+2)}}class l extends u{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:24},{name:"aRegion",size:2,type:t.FLOAT,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:t.FLOAT,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"batchSprite",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"indexBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"MAX_BATCH",{enumerable:!0,configurable:!0,writable:!0,value:void 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}",this.generateFragShader("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}",e.MAX_TEXTURE_UNITS)),this.MAX_BATCH=Math.floor(16384),this.indexBuffer=new h(t,this.MAX_BATCH)}addVertex(e,t,r,i,a,s){super.addVertex(e,t),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a),this.webglArrayBuffer.pushUint(s)}renderSprite(e,t,r,i,a,s,n,u,o,h){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=u+t,b=o+r,d=i+s,f=a+n;this.addVertex(u,o,i,a,l,h),this.addVertex(c,o,d,a,l,h),this.addVertex(c,b,d,f,l,h),this.addVertex(u,b,i,f,l,h)}executeRender(){super.executeRender();const e=this.gl;this.indexBuffer.bufferData(),e.drawElements(e.TRIANGLES,6*this.batchSprite,e.UNSIGNED_SHORT,0)}enterRegion(e){super.enterRegion(e),this.indexBuffer.bindBuffer(),this.gl.uniform1iv(this.currentShader.unifromLoc.uTextures,this.TEXTURE_UNITS_ARRAY)}initializeForNextRender(){super.initializeForNextRender(),this.batchSprite=0}generateFragShader(e,t){let r="";e=e.replace("%TEXTURE_NUM%",t.toString());for(let e=0;e<t;e++)r+=0==e?`if(vTextureId == ${e}.0)`:e==t-1?"else":`else if(vTextureId == ${e}.0)`,r+=`{color = texture2D(uTextures[${e}], vRegion);}`;return e=e.replace("%GET_COLOR%",r)}}class c{constructor(e){Object.defineProperty(this,"render",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cache",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.render=e}async textureFromUrl(e,t=!1){let r=this.cache.get(e);if(!r){const i=await this.loadImage(e);r=b.fromImageSource(this.render,i,t),this.cache.set(e,r)}return new d(r)}async loadImage(e){return new Promise((t=>{const r=new Image;r.onload=()=>{t(r)},r.src=e}))}}class b{constructor(e,t,r){Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.texture=e,this.width=t,this.height=r}static fromImageSource(e,t,r=!1){return new b(function(e,t,r){const i=e.createTexture();if(e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),!i)throw new Error("unable to create texture");return i}(e.gl,t,r),t.width,t.height)}}class d{constructor(e){Object.defineProperty(this,"base",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipX",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipW",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipH",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.base=e,this.setClipRegion(0,0,e.width,e.height)}setClipRegion(e,t,r,i){this.clipX=e/this.base.width,this.clipY=t/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(e,t,r=!1){return new d(b.fromImageSource(e,t,r))}static fromUrl(e,t){return e.texture.textureFromUrl(t)}}class f{constructor(e){Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"canvas",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"projection",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"matrixStack",{enumerable:!0,configurable:!0,writable:!0,value:new r}),Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:new c(this)}),Object.defineProperty(this,"currentRegion",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentRegionName",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"regions",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"MAX_TEXTURE_UNITS",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultColor",{enumerable:!0,configurable:!0,writable:!0,value:new a(255,255,255,255)});const t=(e=>{const t=e.getContext("webgl2")||e.getContext("webgl");if(!t)throw new Error("TODO");return t})(e.canvas);this.gl=t,this.canvas=e.canvas,this.MAX_TEXTURE_UNITS=t.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS),this.projection=this.createOrthMatrix(0,this.canvas.width,this.canvas.height,0),this.registerBuildInRegion(),t.enable(t.BLEND),t.disable(t.DEPTH_TEST),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA)}registerBuildInRegion(){this.registerRegion("sprite",l),this.registerRegion("graphic",o)}registerRegion(e,t){this.regions.set(e,new t(this))}setRegion(e,t){if(e!=this.currentRegionName||t&&t!==this.currentRegion.currentShader){const r=this.regions.get(e);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=e,r.enterRegion(t)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(e=!0){e&&this.matrixStack.clear(),this.matrixStack.pushIdentity(),this.currentRegion=void 0,this.currentRegionName=void 0}endRender(){this.currentRegion?.render()}renderSprite(e,t=0,r=0,i=this.defaultColor,a){this.setRegion("sprite",a),this.currentRegion.renderSprite(e.base.texture,e.width,e.height,e.clipX,e.clipY,e.clipW,e.clipH,t,r,i.uint32)}startGraphicDraw(e){this.setRegion("graphic",e),this.currentRegion.startRender()}addGraphicVertex(e,t,r){this.currentRegion.addVertex(e,t,r.uint32)}endGraphicDraw(){this.currentRegion.render()}clear(){const e=this.gl;e.clearColor(.2,.2,.2,1),e.clear(e.COLOR_BUFFER_BIT)}createOrthMatrix(e,t,r,i){return new Float32Array([2/(t-e),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(t+e)/(t-e),-(i+r)/(i-r),0,1])}transformPoint(e,t){return this.matrixStack.apply(e,t)}}export{b as BaseTexture,a as Color,e as DynamicArrayBuffer,r as MatrixStack,f as Rapid,d as Texture,c as TextureCache,t as WebglBufferArray,i as WebglElementBufferArray};
1
+ const t=(t,e,r)=>{const i=t.createShader(r);if(!i)throw new Error("Unable to create webgl shader");t.shaderSource(i,e),t.compileShader(i);if(!t.getShaderParameter(i,t.COMPILE_STATUS)){const r=t.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+e)}return i};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 i 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 s 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){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*t+i[r+2]*e+i[r+4],i[r+5]=i[r+1]*t+i[r+3]*e+i[r+5]}rotate(t){const e=this.usedElemNum-6,r=this.typedArray,i=Math.cos(t),s=Math.sin(t),n=r[e+0],a=r[e+1],h=r[e+2],o=r[e+3];r[e+0]=n*i-a*s,r[e+1]=n*s+a*i,r[e+2]=h*i-o*s,r[e+3]=h*s+o*i}scale(t,e=t){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*t,i[r+1]=i[r+1]*t,i[r+2]=i[r+2]*e,i[r+3]=i[r+3]*e}apply(t,e){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*t+i[r+2]*e+i[r+4],i[r+1]*t+i[r+3]*e+i[r+5]]}getInverse(){const t=this.usedElemNum-6,e=this.typedArray,r=e[t+0],i=e[t+1],s=e[t+2],n=e[t+3],a=e[t+4],h=e[t+5],o=r*n-i*s;return new Float32Array([n/o,-i/o,-s/o,r/o,(s*h-n*a)/o,(i*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 i{constructor(t,e,r,i){super(t,Uint16Array,t.ELEMENT_ARRAY_BUFFER),this.setMaxSize(e*i);for(let t=0;t<i;t++)this.addObject(t*r);this.bindBuffer(),this.bufferData()}addObject(t){}}class a{constructor(t,e,r,i){this._r=t,this._g=e,this._b=r,this._a=i,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,i){this.r=t,this.g=e,this.b=r,this.a=i,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),i=parseInt(t.slice(4,6),16);let s=255;return t.length>=8&&(s=parseInt(t.slice(6,8),16)),new a(e,r,i,s)}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(e,r,i,s){this.attributeLoc={},this.uniformLoc={};const n=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}(i,e.maxTextureUnits);this.program=((e,r,i)=>{var s=e.createProgram(),n=t(e,r,35633),a=t(e,i,35632);if(!s)throw new Error("Unable to create program shader");return e.attachShader(s,n),e.attachShader(s,a),e.linkProgram(s),s})(e.gl,r,n),this.gl=e.gl,this.attribute=s,this.parseShader(r),this.parseShader(n)}setUniforms(t){const e=this.gl;for(const r in t){const i=t[r],s=this.getUniform(r);if("number"==typeof i)e.uniform1f(s,i);else if(Array.isArray(i))switch(i.length){case 1:Number.isInteger(i[0])?e.uniform1i(s,i[0]):e.uniform1f(s,i[0]);break;case 2:Number.isInteger(i[0])?e.uniform2iv(s,i):e.uniform2fv(s,i);break;case 3:Number.isInteger(i[0])?e.uniform3iv(s,i):e.uniform3fv(s,i);break;case 4:Number.isInteger(i[0])?e.uniform4iv(s,i):e.uniform4fv(s,i);break;case 9:e.uniformMatrix3fv(s,!1,i);break;case 16:e.uniformMatrix4fv(s,!1,i);break;default:console.error(`Unsupported uniform array length for ${r}:`,i.length)}else"boolean"==typeof i?e.uniform1i(s,i?1:0):console.error(`Unsupported uniform type for ${r}:`,typeof i)}}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],i=e.getAttribLocation(this.program,r);-1!=i&&(this.attributeLoc[r]=i)}const i=t.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const t of i){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 o{constructor(t,e){this.usedTextures=[],this.needBind=new Set,this.attribute=e,this.rapid=t,this.gl=t.gl,this.webglArrayBuffer=new i(t.gl,Float32Array,t.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:t.maxTextureUnits},((t,e)=>e))}addVertex(t,e,...r){const[i,s]=this.rapid.transformPoint(t,e);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s)}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 h(this.rapid,t,e,this.attribute)}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=[]}}class u extends o{constructor(t){super(t,c),this.vertex=0,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(t,e,r){this.webglArrayBuffer.resize(3),super.addVertex(t,e),this.webglArrayBuffer.pushUint(r),this.vertex+=1}drawCircle(t,e,r,i){const s=2*Math.PI/30;this.startRender(),this.addVertex(t,e,i);for(let n=0;n<=30;n++){const a=n*s,h=t+r*Math.cos(a),o=e+r*Math.sin(a);this.addVertex(h,o,i)}this.executeRender()}executeRender(){super.executeRender();const t=this.gl;t.drawArrays(t.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}const c=[{name:"aPosition",size:2,type:e,stride:12},{name:"aColor",size:4,type:5121,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];class d 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 l extends o{constructor(t){const e=t.gl;super(t,f),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 d(e,this.MAX_BATCH)}addVertex(t,e,r,i,s,n){super.addVertex(t,e),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s),this.webglArrayBuffer.pushUint(n)}renderSprite(t,e,r,i,s,n,a,h,o,u,c){var d;c&&(null===(d=this.currentShader)||void 0===d||d.setUniforms(c)),this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(t),f=h+e,g=o+r,m=i+n,p=s+a;this.addVertex(h,o,i,s,l,u),this.addVertex(f,o,m,s,l,u),this.addVertex(f,g,m,p,l,u),this.addVertex(h,g,i,p,l,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}}const f=[{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}];class g{constructor(t){this.cache=new Map,this.render=t}async textureFromUrl(t,e=!1){let r=this.cache.get(t);if(!r){const i=await this.loadImage(t);r=m.fromImageSource(this.render,i,e),this.cache.set(t,r)}return new p(r)}async loadImage(t){return new Promise((e=>{const r=new Image;r.onload=()=>{e(r)},r.src=t}))}}class m{constructor(t,e,r){this.texture=t,this.width=e,this.height=r}static fromImageSource(t,e,r=!1){return new m(function(t,e,r){const i=t.createTexture();if(t.bindTexture(t.TEXTURE_2D,i),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),!i)throw new Error("unable to create texture");return i}(t.gl,e,r),e.width,e.height)}}class p{constructor(t){this.base=t,this.setClipRegion(0,0,t.width,t.height)}setClipRegion(t,e,r,i){this.clipX=t/this.base.width,this.clipY=e/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(t,e,r=!1){return new p(m.fromImageSource(t,e,r))}static fromUrl(t,e){return t.textures.textureFromUrl(e)}}class x{constructor(t){this.projectionDirty=!0,this.matrixStack=new s,this.textures=new g(this),this.devicePixelRatio=window.devicePixelRatio||1,this.defaultColor=new a(255,255,255,255),this.regions=new Map;const e=(t=>{const e=t.getContext("webgl2")||t.getContext("webgl");if(!e)throw new Error("TODO");return e})(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)}registerBuildInRegion(){this.registerRegion("sprite",l),this.registerRegion("graphic",u)}registerRegion(t,e){this.regions.set(t,new e(this))}setRegion(t,e){if(t!=this.currentRegionName||e&&e!==this.currentRegion.currentShader){const r=this.regions.get(t);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=t,r.enterRegion(e)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(t=!0){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,i){if(i instanceof a)return this.renderSprite(t,e,r,{color:i});this.setRegion("sprite",null==i?void 0:i.shader),this.currentRegion.renderSprite(t.base.texture,t.width,t.height,t.clipX,t.clipY,t.clipW,t.clipH,e,r,((null==i?void 0:i.color)||this.defaultColor).uint32,null==i?void 0:i.uniforms)}startGraphicDraw(t){this.setRegion("graphic",t),this.currentRegion.startRender()}addGraphicVertex(t,e,r){this.currentRegion.addVertex(t,e,r.uint32)}endGraphicDraw(){this.currentRegion.render()}resize(t,e){this.width=t,this.height=e;const r=t*this.devicePixelRatio,i=e*this.devicePixelRatio;this.canvas.width=r,this.canvas.height=i,this.gl.viewport(0,0,r,i),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)}createOrthMatrix(t,e,r,i){return new Float32Array([2/(e-t),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(e+t)/(e-t),-(i+r)/(i-r),0,1])}transformPoint(t,e){return this.matrixStack.apply(t,e)}}export{m as BaseTexture,a as Color,r as DynamicArrayBuffer,h as GLShader,s as MatrixStack,x as Rapid,p as Texture,g as TextureCache,i as WebglBufferArray,n as WebglElementBufferArray,c as graphicAttributes,f as spriteAttributes};
@@ -1 +1 @@
1
- "use strict";class e{constructor(e){Object.defineProperty(this,"usedElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"typedArray",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arrayType",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"maxElemNum",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"bytePerElem",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"arraybuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.usedElemNum=0,this.maxElemNum=512,this.bytePerElem=e.BYTES_PER_ELEMENT,this.arrayType=e,this.arraybuffer=new ArrayBuffer(this.maxElemNum*this.bytePerElem),this.typedArray=new e(this.arraybuffer),e==Float32Array&&(this.uint32=new Uint32Array(this.arraybuffer))}clear(){this.usedElemNum=0}resize(e=0){if((e+=this.usedElemNum)>this.maxElemNum){for(;e>this.maxElemNum;)this.maxElemNum<<=1;this.setMaxSize(this.maxElemNum)}}setMaxSize(e=this.maxElemNum){const t=this.typedArray;this.maxElemNum=e,this.arraybuffer=new ArrayBuffer(e*this.bytePerElem),this.typedArray=new this.arrayType(this.arraybuffer),this.uint32&&(this.uint32=new Uint32Array(this.arraybuffer)),this.typedArray.set(t)}push(e){this.typedArray[this.usedElemNum++]=e}pushUint(e){this.uint32[this.usedElemNum++]=e}pop(e){this.usedElemNum-=e}getArray(e=0,t){return null==t?this.typedArray:this.typedArray.subarray(e,t)}get length(){return this.typedArray.length}}class t extends e{constructor(e,t,r=e.ARRAY_BUFFER){super(t),Object.defineProperty(this,"buffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dirty",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglBufferSize",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.gl=e,this.buffer=e.createBuffer(),this.type=r}push(e){super.push(e),this.dirty=!0}bindBuffer(){this.gl.bindBuffer(this.type,this.buffer)}bufferData(){if(this.dirty){const e=this.gl;this.maxElemNum>this.webglBufferSize?(e.bufferData(this.type,this.getArray(),e.STATIC_DRAW),this.webglBufferSize=this.maxElemNum):e.bufferSubData(this.type,0,this.getArray(0,this.usedElemNum)),this.dirty=!1}}}class r extends e{constructor(){super(Float32Array)}pushMat(){const e=this.usedElemNum-6,t=this.typedArray;this.resize(6),this.push(t[e+0]),this.push(t[e+1]),this.push(t[e+2]),this.push(t[e+3]),this.push(t[e+4]),this.push(t[e+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(e,t){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*e+i[r+2]*t+i[r+4],i[r+5]=i[r+1]*e+i[r+3]*t+i[r+5]}rotate(e){const t=this.usedElemNum-6,r=this.typedArray,i=Math.cos(e),a=Math.sin(e),s=r[t+0],n=r[t+1],u=r[t+2],o=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=u*i-o*a,r[t+3]=u*a+o*i}scale(e,t=e){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*e,i[r+1]=i[r+1]*e,i[r+2]=i[r+2]*t,i[r+3]=i[r+3]*t}apply(e,t){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*e+i[r+2]*t+i[r+4],i[r+1]*e+i[r+3]*t+i[r+5]]}getInverse(){const e=this.usedElemNum-6,t=this.typedArray,r=t[e+0],i=t[e+1],a=t[e+2],s=t[e+3],n=t[e+4],u=t[e+5],o=r*s-i*a;return new Float32Array([s/o,-i/o,-a/o,r/o,(a*u-s*n)/o,(i*n-r*u)/o])}getTransform(){const e=this.usedElemNum-6,t=this.typedArray;return new Float32Array([t[e+0],t[e+1],t[e+2],t[e+3],t[e+4],t[e+5]])}setTransform(e){const t=this.usedElemNum-6,r=this.typedArray;r[t+0]=e[0],r[t+1]=e[1],r[t+2]=e[2],r[t+3]=e[3],r[t+4]=e[4],r[t+5]=e[5]}}class i extends t{constructor(e,t,r,i){super(e,Uint16Array,e.ELEMENT_ARRAY_BUFFER),this.setMaxSize(t*i);for(let e=0;e<i;e++)this.addObject(e*r);this.bindBuffer(),this.bufferData()}addObject(e){}}class a{constructor(e,t,r,i){Object.defineProperty(this,"_r",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_g",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_b",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_a",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"uint32",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this._r=e,this._g=t,this._b=r,this._a=i,this.updateUint()}get r(){return this._r}set r(e){this._r=e,this.updateUint()}get g(){return this._g}set g(e){this._g=e,this.updateUint()}get b(){return this._b}set b(e){this._b=e,this.updateUint()}get a(){return this._a}set a(e){this._a=e,this.updateUint()}updateUint(){this.uint32=(this._a<<24|this._b<<16|this._g<<8|this._r)>>>0}setRGBA(e,t,r,i){this.r=e,this.g=t,this.b=r,this.a=i,this.updateUint()}copy(e){this.setRGBA(e.r,e.g,e.b,e.a)}equals(e){return e.r==this.r&&e.g==this.g&&e.b==this.b&&e.a==this.a}static fromHex(e){e.startsWith("#")&&(e=e.slice(1));const t=parseInt(e.slice(0,2),16),r=parseInt(e.slice(2,4),16),i=parseInt(e.slice(4,6),16);let s=255;return e.length>=8&&(s=parseInt(e.slice(6,8),16)),new a(t,r,i,s)}add(e){return new a(Math.min(this.r+e.r,255),Math.min(this.g+e.g,255),Math.min(this.b+e.b,255),Math.min(this.a+e.a,255))}subtract(e){return new a(Math.max(this.r-e.r,0),Math.max(this.g-e.g,0),Math.max(this.b-e.b,0),Math.max(this.a-e.a,0))}}const s=(e,t,r)=>{const i=e.createShader(r);if(!i)throw new Error("Unable to create webgl shader");e.shaderSource(i,t),e.compileShader(i);if(!e.getShaderParameter(i,e.COMPILE_STATUS)){const r=e.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+t)}return i};class n{constructor(e,t,r){Object.defineProperty(this,"attributeLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"unifromLoc",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"program",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.program=((e,t,r)=>{var i=e.createProgram(),a=s(e,t,35633),n=s(e,r,35632);if(!i)throw new Error("Unable to create program shader");return e.attachShader(i,a),e.attachShader(i,n),e.linkProgram(i),i})(e.gl,t,r),this.gl=e.gl,this.parseShader(t),this.parseShader(r)}use(){this.gl.useProgram(this.program)}parseShader(e){const t=this.gl,r=e.match(/attribute\s+\w+\s+(\w+)/g);if(r)for(const e of r){const r=e.split(" ")[2];this.attributeLoc[r]=t.getAttribLocation(this.program,r)}const i=e.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const e of i){const r=e.split(" ")[2];this.unifromLoc[r]=t.getUniformLocation(this.program,r)}}setAttribute(e){const t=this.gl;t.vertexAttribPointer(this.attributeLoc[e.name],e.size,e.type,e.normalized||!1,e.stride,e.offset||0),t.enableVertexAttribArray(this.attributeLoc[e.name])}}class u{constructor(e,r){Object.defineProperty(this,"currentShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultShader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"attribute",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webglArrayBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"rapid",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"usedTextures",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"TEXTURE_UNITS_ARRAY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.attribute=r,this.rapid=e,this.gl=e.gl,this.webglArrayBuffer=new t(e.gl,Float32Array,e.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:e.MAX_TEXTURE_UNITS},((e,t)=>t))}addVertex(e,t,...r){const[i,a]=this.rapid.transformPoint(e,t);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a)}useTexture(e){let t=this.usedTextures.indexOf(e);return-1===t&&(this.usedTextures.length>=this.rapid.MAX_TEXTURE_UNITS&&this.render(),this.usedTextures.push(e),t=this.usedTextures.length-1),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer(),this.attribute.forEach((e=>{this.currentShader?.setAttribute(e)})),this.gl.uniformMatrix4fv(this.currentShader.unifromLoc.uProjectionMatrix,!1,this.rapid.projection)}exitRegion(){}initDefaultShader(e,t){this.webglArrayBuffer.bindBuffer(),this.defaultShader=new n(this.rapid,e,t)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const e=this.gl;for(let t=0;t<this.usedTextures.length;t++)e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}}class o extends u{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:12},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"vertex",{enumerable:!0,configurable:!0,writable:!0,value:0}),this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(e,t,r){this.webglArrayBuffer.resize(3),super.addVertex(e,t),this.webglArrayBuffer.pushUint(r),this.vertex+=1}executeRender(){super.executeRender();const e=this.gl;e.drawArrays(e.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}class h extends i{constructor(e,t){super(e,6,4,t)}addObject(e){super.addObject(),this.push(e),this.push(e+3),this.push(e+2),this.push(e),this.push(e+1),this.push(e+2)}}class l extends u{constructor(e){const t=e.gl;super(e,[{name:"aPosition",size:2,type:t.FLOAT,stride:24},{name:"aRegion",size:2,type:t.FLOAT,stride:24,offset:2*Float32Array.BYTES_PER_ELEMENT},{name:"aTextureId",size:1,type:t.FLOAT,stride:24,offset:4*Float32Array.BYTES_PER_ELEMENT},{name:"aColor",size:4,type:t.UNSIGNED_BYTE,stride:24,offset:5*Float32Array.BYTES_PER_ELEMENT,normalized:!0}]),Object.defineProperty(this,"batchSprite",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"indexBuffer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"MAX_BATCH",{enumerable:!0,configurable:!0,writable:!0,value:void 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}",this.generateFragShader("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}",e.MAX_TEXTURE_UNITS)),this.MAX_BATCH=Math.floor(16384),this.indexBuffer=new h(t,this.MAX_BATCH)}addVertex(e,t,r,i,a,s){super.addVertex(e,t),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(a),this.webglArrayBuffer.pushUint(s)}renderSprite(e,t,r,i,a,s,n,u,o,h){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=u+t,b=o+r,d=i+s,f=a+n;this.addVertex(u,o,i,a,l,h),this.addVertex(c,o,d,a,l,h),this.addVertex(c,b,d,f,l,h),this.addVertex(u,b,i,f,l,h)}executeRender(){super.executeRender();const e=this.gl;this.indexBuffer.bufferData(),e.drawElements(e.TRIANGLES,6*this.batchSprite,e.UNSIGNED_SHORT,0)}enterRegion(e){super.enterRegion(e),this.indexBuffer.bindBuffer(),this.gl.uniform1iv(this.currentShader.unifromLoc.uTextures,this.TEXTURE_UNITS_ARRAY)}initializeForNextRender(){super.initializeForNextRender(),this.batchSprite=0}generateFragShader(e,t){let r="";e=e.replace("%TEXTURE_NUM%",t.toString());for(let e=0;e<t;e++)r+=0==e?`if(vTextureId == ${e}.0)`:e==t-1?"else":`else if(vTextureId == ${e}.0)`,r+=`{color = texture2D(uTextures[${e}], vRegion);}`;return e=e.replace("%GET_COLOR%",r)}}class c{constructor(e){Object.defineProperty(this,"render",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cache",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.render=e}async textureFromUrl(e,t=!1){let r=this.cache.get(e);if(!r){const i=await this.loadImage(e);r=b.fromImageSource(this.render,i,t),this.cache.set(e,r)}return new d(r)}async loadImage(e){return new Promise((t=>{const r=new Image;r.onload=()=>{t(r)},r.src=e}))}}class b{constructor(e,t,r){Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.texture=e,this.width=t,this.height=r}static fromImageSource(e,t,r=!1){return new b(function(e,t,r){const i=e.createTexture();if(e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,r?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),!i)throw new Error("unable to create texture");return i}(e.gl,t,r),t.width,t.height)}}class d{constructor(e){Object.defineProperty(this,"base",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipX",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipY",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipW",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clipH",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.base=e,this.setClipRegion(0,0,e.width,e.height)}setClipRegion(e,t,r,i){this.clipX=e/this.base.width,this.clipY=t/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(e,t,r=!1){return new d(b.fromImageSource(e,t,r))}static fromUrl(e,t){return e.texture.textureFromUrl(t)}}exports.BaseTexture=b,exports.Color=a,exports.DynamicArrayBuffer=e,exports.MatrixStack=r,exports.Rapid=class{constructor(e){Object.defineProperty(this,"gl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"canvas",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"projection",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"matrixStack",{enumerable:!0,configurable:!0,writable:!0,value:new r}),Object.defineProperty(this,"texture",{enumerable:!0,configurable:!0,writable:!0,value:new c(this)}),Object.defineProperty(this,"currentRegion",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentRegionName",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"regions",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"MAX_TEXTURE_UNITS",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"defaultColor",{enumerable:!0,configurable:!0,writable:!0,value:new a(255,255,255,255)});const t=(e=>{const t=e.getContext("webgl2")||e.getContext("webgl");if(!t)throw new Error("TODO");return t})(e.canvas);this.gl=t,this.canvas=e.canvas,this.MAX_TEXTURE_UNITS=t.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS),this.projection=this.createOrthMatrix(0,this.canvas.width,this.canvas.height,0),this.registerBuildInRegion(),t.enable(t.BLEND),t.disable(t.DEPTH_TEST),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA)}registerBuildInRegion(){this.registerRegion("sprite",l),this.registerRegion("graphic",o)}registerRegion(e,t){this.regions.set(e,new t(this))}setRegion(e,t){if(e!=this.currentRegionName||t&&t!==this.currentRegion.currentShader){const r=this.regions.get(e);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=e,r.enterRegion(t)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(e=!0){e&&this.matrixStack.clear(),this.matrixStack.pushIdentity(),this.currentRegion=void 0,this.currentRegionName=void 0}endRender(){this.currentRegion?.render()}renderSprite(e,t=0,r=0,i=this.defaultColor,a){this.setRegion("sprite",a),this.currentRegion.renderSprite(e.base.texture,e.width,e.height,e.clipX,e.clipY,e.clipW,e.clipH,t,r,i.uint32)}startGraphicDraw(e){this.setRegion("graphic",e),this.currentRegion.startRender()}addGraphicVertex(e,t,r){this.currentRegion.addVertex(e,t,r.uint32)}endGraphicDraw(){this.currentRegion.render()}clear(){const e=this.gl;e.clearColor(.2,.2,.2,1),e.clear(e.COLOR_BUFFER_BIT)}createOrthMatrix(e,t,r,i){return new Float32Array([2/(t-e),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(t+e)/(t-e),-(i+r)/(i-r),0,1])}transformPoint(e,t){return this.matrixStack.apply(e,t)}},exports.Texture=d,exports.TextureCache=c,exports.WebglBufferArray=t,exports.WebglElementBufferArray=i;
1
+ "use strict";const t=(t,e,r)=>{const i=t.createShader(r);if(!i)throw new Error("Unable to create webgl shader");t.shaderSource(i,e),t.compileShader(i);if(!t.getShaderParameter(i,t.COMPILE_STATUS)){const r=t.getShaderInfoLog(i);throw console.error("Shader compilation failed:",r),new Error("Unable to compile shader: "+r+e)}return i};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 i 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 s 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){const r=this.usedElemNum-6,i=this.typedArray;i[r+4]=i[r+0]*t+i[r+2]*e+i[r+4],i[r+5]=i[r+1]*t+i[r+3]*e+i[r+5]}rotate(t){const e=this.usedElemNum-6,r=this.typedArray,i=Math.cos(t),s=Math.sin(t),a=r[e+0],n=r[e+1],h=r[e+2],o=r[e+3];r[e+0]=a*i-n*s,r[e+1]=a*s+n*i,r[e+2]=h*i-o*s,r[e+3]=h*s+o*i}scale(t,e=t){const r=this.usedElemNum-6,i=this.typedArray;i[r+0]=i[r+0]*t,i[r+1]=i[r+1]*t,i[r+2]=i[r+2]*e,i[r+3]=i[r+3]*e}apply(t,e){const r=this.usedElemNum-6,i=this.typedArray;return[i[r+0]*t+i[r+2]*e+i[r+4],i[r+1]*t+i[r+3]*e+i[r+5]]}getInverse(){const t=this.usedElemNum-6,e=this.typedArray,r=e[t+0],i=e[t+1],s=e[t+2],a=e[t+3],n=e[t+4],h=e[t+5],o=r*a-i*s;return new Float32Array([a/o,-i/o,-s/o,r/o,(s*h-a*n)/o,(i*n-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 a extends i{constructor(t,e,r,i){super(t,Uint16Array,t.ELEMENT_ARRAY_BUFFER),this.setMaxSize(e*i);for(let t=0;t<i;t++)this.addObject(t*r);this.bindBuffer(),this.bufferData()}addObject(t){}}class n{constructor(t,e,r,i){this._r=t,this._g=e,this._b=r,this._a=i,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,i){this.r=t,this.g=e,this.b=r,this.a=i,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),i=parseInt(t.slice(4,6),16);let s=255;return t.length>=8&&(s=parseInt(t.slice(6,8),16)),new n(e,r,i,s)}add(t){return new n(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 n(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(e,r,i,s){this.attributeLoc={},this.uniformLoc={};const a=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}(i,e.maxTextureUnits);this.program=((e,r,i)=>{var s=e.createProgram(),a=t(e,r,35633),n=t(e,i,35632);if(!s)throw new Error("Unable to create program shader");return e.attachShader(s,a),e.attachShader(s,n),e.linkProgram(s),s})(e.gl,r,a),this.gl=e.gl,this.attribute=s,this.parseShader(r),this.parseShader(a)}setUniforms(t){const e=this.gl;for(const r in t){const i=t[r],s=this.getUniform(r);if("number"==typeof i)e.uniform1f(s,i);else if(Array.isArray(i))switch(i.length){case 1:Number.isInteger(i[0])?e.uniform1i(s,i[0]):e.uniform1f(s,i[0]);break;case 2:Number.isInteger(i[0])?e.uniform2iv(s,i):e.uniform2fv(s,i);break;case 3:Number.isInteger(i[0])?e.uniform3iv(s,i):e.uniform3fv(s,i);break;case 4:Number.isInteger(i[0])?e.uniform4iv(s,i):e.uniform4fv(s,i);break;case 9:e.uniformMatrix3fv(s,!1,i);break;case 16:e.uniformMatrix4fv(s,!1,i);break;default:console.error(`Unsupported uniform array length for ${r}:`,i.length)}else"boolean"==typeof i?e.uniform1i(s,i?1:0):console.error(`Unsupported uniform type for ${r}:`,typeof i)}}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],i=e.getAttribLocation(this.program,r);-1!=i&&(this.attributeLoc[r]=i)}const i=t.match(/uniform\s+\w+\s+(\w+)/g);if(i)for(const t of i){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 o{constructor(t,e){this.usedTextures=[],this.needBind=new Set,this.attribute=e,this.rapid=t,this.gl=t.gl,this.webglArrayBuffer=new i(t.gl,Float32Array,t.gl.ARRAY_BUFFER),this.TEXTURE_UNITS_ARRAY=Array.from({length:t.maxTextureUnits},((t,e)=>e))}addVertex(t,e,...r){const[i,s]=this.rapid.transformPoint(t,e);this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s)}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 h(this.rapid,t,e,this.attribute)}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=[]}}class u extends o{constructor(t){super(t,c),this.vertex=0,this.initDefaultShader("precision mediump float;\r\n\r\nattribute vec2 aPosition;\r\nattribute vec4 aColor;\r\nvarying vec4 vColor;\r\nuniform mat4 uProjectionMatrix;\r\nuniform vec4 uColor;\r\n\r\nvoid main(void) {\r\n gl_Position = uProjectionMatrix * vec4(aPosition, 0.0, 1.0);\r\n vColor = aColor;\r\n}\r\n","precision mediump float;\r\n\r\nvarying vec4 vColor;\r\nvoid main(void) {\r\n gl_FragColor = vColor;//vColor;\r\n}\r\n")}startRender(){this.vertex=0,this.webglArrayBuffer.clear()}addVertex(t,e,r){this.webglArrayBuffer.resize(3),super.addVertex(t,e),this.webglArrayBuffer.pushUint(r),this.vertex+=1}drawCircle(t,e,r,i){const s=2*Math.PI/30;this.startRender(),this.addVertex(t,e,i);for(let a=0;a<=30;a++){const n=a*s,h=t+r*Math.cos(n),o=e+r*Math.sin(n);this.addVertex(h,o,i)}this.executeRender()}executeRender(){super.executeRender();const t=this.gl;t.drawArrays(t.TRIANGLE_FAN,0,this.vertex),this.vertex=0}}const c=[{name:"aPosition",size:2,type:e,stride:12},{name:"aColor",size:4,type:5121,stride:12,offset:2*Float32Array.BYTES_PER_ELEMENT,normalized:!0}];class l extends a{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 d extends o{constructor(t){const e=t.gl;super(t,f),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 l(e,this.MAX_BATCH)}addVertex(t,e,r,i,s,a){super.addVertex(t,e),this.webglArrayBuffer.push(r),this.webglArrayBuffer.push(i),this.webglArrayBuffer.push(s),this.webglArrayBuffer.pushUint(a)}renderSprite(t,e,r,i,s,a,n,h,o,u,c){var l;c&&(null===(l=this.currentShader)||void 0===l||l.setUniforms(c)),this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const d=this.useTexture(t),f=h+e,g=o+r,m=i+a,p=s+n;this.addVertex(h,o,i,s,d,u),this.addVertex(f,o,m,s,d,u),this.addVertex(f,g,m,p,d,u),this.addVertex(h,g,i,p,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}}const f=[{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}];class g{constructor(t){this.cache=new Map,this.render=t}async textureFromUrl(t,e=!1){let r=this.cache.get(t);if(!r){const i=await this.loadImage(t);r=m.fromImageSource(this.render,i,e),this.cache.set(t,r)}return new p(r)}async loadImage(t){return new Promise((e=>{const r=new Image;r.onload=()=>{e(r)},r.src=t}))}}class m{constructor(t,e,r){this.texture=t,this.width=e,this.height=r}static fromImageSource(t,e,r=!1){return new m(function(t,e,r){const i=t.createTexture();if(t.bindTexture(t.TEXTURE_2D,i),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),!i)throw new Error("unable to create texture");return i}(t.gl,e,r),e.width,e.height)}}class p{constructor(t){this.base=t,this.setClipRegion(0,0,t.width,t.height)}setClipRegion(t,e,r,i){this.clipX=t/this.base.width,this.clipY=e/this.base.width,this.clipW=this.clipX+r/this.base.width,this.clipH=this.clipY+i/this.base.width,this.width=r,this.height=i}static fromImageSource(t,e,r=!1){return new p(m.fromImageSource(t,e,r))}static fromUrl(t,e){return t.textures.textureFromUrl(e)}}exports.BaseTexture=m,exports.Color=n,exports.DynamicArrayBuffer=r,exports.GLShader=h,exports.MatrixStack=s,exports.Rapid=class{constructor(t){this.projectionDirty=!0,this.matrixStack=new s,this.textures=new g(this),this.devicePixelRatio=window.devicePixelRatio||1,this.defaultColor=new n(255,255,255,255),this.regions=new Map;const e=(t=>{const e=t.getContext("webgl2")||t.getContext("webgl");if(!e)throw new Error("TODO");return e})(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 n(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)}registerBuildInRegion(){this.registerRegion("sprite",d),this.registerRegion("graphic",u)}registerRegion(t,e){this.regions.set(t,new e(this))}setRegion(t,e){if(t!=this.currentRegionName||e&&e!==this.currentRegion.currentShader){const r=this.regions.get(t);this.currentRegion&&(this.currentRegion.render(),this.currentRegion.exitRegion()),this.currentRegion=r,this.currentRegionName=t,r.enterRegion(e)}}save(){this.matrixStack.pushMat()}restore(){this.matrixStack.popMat()}startRender(t=!0){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,i){if(i instanceof n)return this.renderSprite(t,e,r,{color:i});this.setRegion("sprite",null==i?void 0:i.shader),this.currentRegion.renderSprite(t.base.texture,t.width,t.height,t.clipX,t.clipY,t.clipW,t.clipH,e,r,((null==i?void 0:i.color)||this.defaultColor).uint32,null==i?void 0:i.uniforms)}startGraphicDraw(t){this.setRegion("graphic",t),this.currentRegion.startRender()}addGraphicVertex(t,e,r){this.currentRegion.addVertex(t,e,r.uint32)}endGraphicDraw(){this.currentRegion.render()}resize(t,e){this.width=t,this.height=e;const r=t*this.devicePixelRatio,i=e*this.devicePixelRatio;this.canvas.width=r,this.canvas.height=i,this.gl.viewport(0,0,r,i),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)}createOrthMatrix(t,e,r,i){return new Float32Array([2/(e-t),0,0,0,0,2/(i-r),0,0,0,0,-1,0,-(e+t)/(e-t),-(i+r)/(i-r),0,1])}transformPoint(t,e){return this.matrixStack.apply(t,e)}},exports.Texture=p,exports.TextureCache=g,exports.WebglBufferArray=i,exports.WebglElementBufferArray=a,exports.graphicAttributes=c,exports.spriteAttributes=f;
@@ -5,6 +5,23 @@ declare class GraphicRegion extends RenderRegion {
5
5
  constructor(rapid: Rapid);
6
6
  startRender(): void;
7
7
  addVertex(x: number, y: number, color: number): void;
8
+ drawCircle(x: number, y: number, radius: number, color: number): void;
8
9
  protected executeRender(): void;
9
10
  }
11
+ declare const graphicAttributes: ({
12
+ name: string;
13
+ size: number;
14
+ type: number;
15
+ stride: number;
16
+ offset?: undefined;
17
+ normalized?: undefined;
18
+ } | {
19
+ name: string;
20
+ size: number;
21
+ type: number;
22
+ stride: number;
23
+ offset: number;
24
+ normalized: boolean;
25
+ })[];
26
+ export { graphicAttributes };
10
27
  export default GraphicRegion;
@@ -11,6 +11,7 @@ declare class RenderRegion {
11
11
  protected gl: WebGLContext;
12
12
  protected usedTextures: WebGLTexture[];
13
13
  protected readonly TEXTURE_UNITS_ARRAY: number[];
14
+ protected needBind: Set<number>;
14
15
  constructor(rapid: Rapid, attributes?: IAttribute[]);
15
16
  protected addVertex(x: number, y: number, ..._: unknown[]): void;
16
17
  protected useTexture(texture: WebGLTexture): number;
@@ -1,5 +1,6 @@
1
1
  import RenderRegion from "./region";
2
2
  import Rapid from "../render";
3
+ import { UniformType } from "../interface";
3
4
  import GLShader from "../webgl/glshader";
4
5
  declare class SpriteRegion extends RenderRegion {
5
6
  private batchSprite;
@@ -7,10 +8,32 @@ declare class SpriteRegion extends RenderRegion {
7
8
  protected readonly MAX_BATCH: number;
8
9
  constructor(rapid: Rapid);
9
10
  protected addVertex(x: number, y: number, u: number, v: number, textureUnit: number, color: number): void;
10
- renderSprite(texture: WebGLTexture, width: number, height: number, u0: number, v0: number, u1: number, v1: number, offsetX: number, offsetY: number, color: number): void;
11
+ renderSprite(texture: WebGLTexture, width: number, height: number, u0: number, v0: number, u1: number, v1: number, offsetX: number, offsetY: number, color: number, uniforms?: UniformType): void;
11
12
  protected executeRender(): void;
12
13
  enterRegion(customShader?: GLShader | undefined): void;
13
14
  protected initializeForNextRender(): void;
14
- private generateFragShader;
15
15
  }
16
+ declare const spriteAttributes: ({
17
+ name: string;
18
+ size: number;
19
+ type: number;
20
+ stride: number;
21
+ offset?: undefined;
22
+ normalized?: undefined;
23
+ } | {
24
+ name: string;
25
+ size: number;
26
+ type: number;
27
+ stride: number;
28
+ offset: number;
29
+ normalized?: undefined;
30
+ } | {
31
+ name: string;
32
+ size: number;
33
+ type: number;
34
+ stride: number;
35
+ offset: number;
36
+ normalized: boolean;
37
+ })[];
38
+ export { spriteAttributes };
16
39
  export default SpriteRegion;
package/dist/render.d.ts CHANGED
@@ -1,33 +1,119 @@
1
- import { IRapiadOptions, WebGLContext } from "./interface";
1
+ import { IRapiadOptions, IRenderSpriteOptions, WebGLContext } from "./interface";
2
2
  import { Color, MatrixStack } from "./math";
3
3
  import RenderRegion from "./regions/region";
4
4
  import { Texture, TextureCache } from "./texture";
5
5
  import GLShader from "./webgl/glshader";
6
+ /**
7
+ * The `Rapid` class provides a WebGL-based rendering engine.
8
+ */
6
9
  declare class Rapid {
7
10
  gl: WebGLContext;
8
11
  canvas: HTMLCanvasElement;
9
12
  projection: Float32Array;
13
+ projectionDirty: boolean;
10
14
  matrixStack: MatrixStack;
11
- texture: TextureCache;
15
+ textures: TextureCache;
16
+ width: number;
17
+ height: number;
18
+ backgroundColor: Color;
19
+ readonly devicePixelRatio: number;
20
+ readonly maxTextureUnits: number;
21
+ private readonly defaultColor;
12
22
  private currentRegion?;
13
23
  private currentRegionName?;
14
24
  private regions;
15
- readonly MAX_TEXTURE_UNITS: number;
16
- private readonly defaultColor;
25
+ /**
26
+ * Constructs a new `Rapid` instance with the given options.
27
+ * @param options - Options for initializing the `Rapid` instance.
28
+ */
17
29
  constructor(options: IRapiadOptions);
30
+ /**
31
+ * Initializes WebGL context settings.
32
+ * @param gl - The WebGL context.
33
+ */
34
+ private initWebgl;
35
+ /**
36
+ * Registers built-in regions such as sprite and graphic regions.
37
+ */
18
38
  private registerBuildInRegion;
39
+ /**
40
+ * Registers a custom render region with a specified name.
41
+ * @param name - The name of the region.
42
+ * @param regionClass - The class of the region to register.
43
+ */
19
44
  registerRegion(name: string, regionClass: typeof RenderRegion): void;
45
+ /**
46
+ * Sets the current render region by name and optionally a custom shader.
47
+ * @param regionName - The name of the region to set as current.
48
+ * @param customShader - An optional custom shader to use with the region.
49
+ */
20
50
  setRegion(regionName: string, customShader?: GLShader): void;
51
+ /**
52
+ * Saves the current matrix state to the stack.
53
+ */
21
54
  save(): void;
55
+ /**
56
+ * Restores the matrix state from the stack.
57
+ */
22
58
  restore(): void;
59
+ /**
60
+ * Starts the rendering process, resetting the matrix stack and clearing the current region.
61
+ * @param clear - Whether to clear the matrix stack. Defaults to true.
62
+ */
23
63
  startRender(clear?: boolean): void;
64
+ /**
65
+ * Ends the rendering process by rendering the current region.
66
+ */
24
67
  endRender(): void;
25
- renderSprite(texture: Texture, offsetX?: number, offsetY?: number, color?: Color, customShader?: GLShader): void;
68
+ /**
69
+ * Renders a sprite with the specified texture, offset, and options.
70
+ * @param texture - The texture to render.
71
+ * @param offsetX - The X offset for the sprite. Defaults to 0.
72
+ * @param offsetY - The Y offset for the sprite. Defaults to 0.
73
+ * @param options - Rendering options including color and custom shader.
74
+ */
75
+ renderSprite(texture: Texture, offsetX?: number, offsetY?: number, options?: IRenderSpriteOptions | Color): void;
76
+ /**
77
+ * Starts a graphic drawing process with an optional custom shader.
78
+ * @param customShader - An optional custom shader to use.
79
+ */
26
80
  startGraphicDraw(customShader?: GLShader): void;
81
+ /**
82
+ * Adds a vertex to the current graphic drawing with a specified position and color.
83
+ * @param x - The X position of the vertex.
84
+ * @param y - The Y position of the vertex.
85
+ * @param color - The color of the vertex.
86
+ */
27
87
  addGraphicVertex(x: number, y: number, color: Color): void;
88
+ /**
89
+ * Ends the graphic drawing process by rendering the current graphic region.
90
+ */
28
91
  endGraphicDraw(): void;
92
+ /**
93
+ * Resizes the canvas and updates the viewport and projection matrix.
94
+ * @param width - The new width of the canvas.
95
+ * @param height - The new height of the canvas.
96
+ */
97
+ resize(width: number, height: number): void;
98
+ /**
99
+ * Clears the canvas with the background color.
100
+ */
29
101
  clear(): void;
102
+ /**
103
+ * Creates an orthogonal projection matrix.
104
+ * @param left - The left bound of the projection.
105
+ * @param right - The right bound of the projection.
106
+ * @param bottom - The bottom bound of the projection.
107
+ * @param top - The top bound of the projection.
108
+ * @returns The orthogonal projection matrix as a `Float32Array`.
109
+ */
30
110
  private createOrthMatrix;
111
+ /**
112
+ * Transforms a point by applying the current matrix stack.
113
+ * @param x - The X coordinate of the point.
114
+ * @param y - The Y coordinate of the point.
115
+ * @returns The transformed point as an array `[newX, newY]`.
116
+ */
31
117
  transformPoint(x: number, y: number): number[];
32
118
  }
33
119
  export default Rapid;
@@ -1,11 +1,14 @@
1
- import { IAttribute } from "../interface";
1
+ import { IAttribute, UniformType } from "../interface";
2
2
  import Rapid from "../render";
3
3
  declare class GLShader {
4
4
  attributeLoc: Record<string, number>;
5
- unifromLoc: Record<string, WebGLUniformLocation>;
5
+ uniformLoc: Record<string, WebGLUniformLocation>;
6
6
  program: WebGLProgram;
7
+ attribute: IAttribute[];
7
8
  private gl;
8
- constructor(rapid: Rapid, vs: string, fs: string);
9
+ constructor(rapid: Rapid, vs: string, fs: string, attribute: IAttribute[]);
10
+ setUniforms(uniforms: UniformType): void;
11
+ private getUniform;
9
12
  use(): void;
10
13
  parseShader(shader: string): void;
11
14
  setAttribute(element: IAttribute): void;
@@ -22,3 +22,6 @@ export declare const compileShader: (gl: WebGLContext, source: string, type: num
22
22
  */
23
23
  export declare const createShaderProgram: (gl: WebGLContext, vsSource: string, fsSource: string) => WebGLProgram;
24
24
  export declare function createTexture(gl: WebGLRenderingContext, image: TexImageSource, antialias: boolean): WebGLTexture;
25
+ export declare function generateFragShader(fs: string, max: number): string;
26
+ export declare const FLOAT = 5126;
27
+ export declare const UNSIGNED_BYTE = 5121;
package/package.json CHANGED
@@ -1,29 +1,30 @@
1
- {
2
- "name": "rapid-render",
3
- "version": "0.0.3",
4
- "type": "module",
5
- "files": [
6
- "dist"
7
- ],
8
- "main": "./dist/rapid.umd.cjs",
9
- "module": "./dist/rapid.js",
10
- "types": "./dist/index.d.ts",
11
- "exports": {
12
- "types": "./dist/index.d.ts",
13
- "import": "./dist/rapid.js",
14
- "require": "./dist/rapid.umd.cjs"
15
- },
16
- "scripts": {
17
- "dev": "rollup -c rollup.config.dev.js -w",
18
- "build": "rollup -c rollup.config.prod.js && tsc "
19
- },
20
- "devDependencies": {
21
- "rollup": "^4.12.0",
22
- "rollup-plugin-server": "^0.7.0",
23
- "rollup-plugin-string": "^3.0.0",
24
- "rollup-plugin-terser": "^7.0.2",
25
- "rollup-plugin-typescript2": "^0.36.0",
26
- "tslib": "^2.6.2",
27
- "typescript": "^5.3.3"
28
- }
29
- }
1
+ {
2
+ "name": "rapid-render",
3
+ "version": "0.0.5",
4
+ "type": "module",
5
+ "files": [
6
+ "dist"
7
+ ],
8
+ "main": "./dist/rapid.umd.cjs",
9
+ "module": "./dist/rapid.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/rapid.js",
14
+ "require": "./dist/rapid.umd.cjs"
15
+ },
16
+ "scripts": {
17
+ "dev": "rollup -c rollup.config.dev.js -w",
18
+ "build": "rollup -c rollup.config.prod.js && tsc"
19
+ },
20
+ "devDependencies": {
21
+ "rollup": "^4.12.0",
22
+ "rollup-plugin-dts": "^6.1.0",
23
+ "rollup-plugin-server": "^0.7.0",
24
+ "rollup-plugin-string": "^3.0.0",
25
+ "rollup-plugin-terser": "^7.0.2",
26
+ "rollup-plugin-typescript2": "^0.36.0",
27
+ "tslib": "^2.6.2",
28
+ "typescript": "^5.3.3"
29
+ }
30
+ }