rapid-render 0.0.4 → 0.0.6
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 +1 -1
- package/README.md +42 -5
- package/dist/index.d.ts +4 -1
- package/dist/interface.d.ts +7 -0
- package/dist/math.d.ts +74 -1
- package/dist/rapid.global.js +1 -1
- package/dist/rapid.js +1 -1
- package/dist/rapid.umd.cjs +1 -1
- package/dist/regions/graphic_region.d.ts +17 -0
- package/dist/regions/region.d.ts +1 -1
- package/dist/regions/sprite_region.d.ts +25 -2
- package/dist/render.d.ts +87 -6
- package/dist/webgl/glshader.d.ts +4 -2
- package/dist/webgl/utils.d.ts +3 -0
- package/package.json +3 -2
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,15 +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
|
+
|
|
14
|
+
[custom shader demo](https://nightre.github.io/Rapid.js/demo/custom-shader.html) ( [source code](./demo/custom-shader.js) )
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
8
18
|
# Features:
|
|
9
19
|
* Fast rendering ( capable of rendering 10,000 sprites at 60fps )
|
|
10
20
|
* Multi-texture support ( Batch rendering based on the GPU's maximum texture units )
|
|
11
|
-
* Texture cropping
|
|
12
21
|
* Graphic
|
|
13
|
-
* Matrix
|
|
22
|
+
* Matrix stack
|
|
14
23
|
* Color
|
|
15
24
|
|
|
16
25
|
# Install
|
|
@@ -63,11 +72,11 @@ rapid.matrixStack.scale(1)
|
|
|
63
72
|
rapid.matrixStack.rotate(0)
|
|
64
73
|
|
|
65
74
|
// texture offset color
|
|
66
|
-
rapid.renderSprite(cat,0,0, color) // draw Sprite
|
|
75
|
+
rapid.renderSprite(cat, 0, 0, color) // draw Sprite
|
|
76
|
+
// or rapid.renderSprite(cat, 0, 0, { color })
|
|
67
77
|
rapid.restore() // back to the previous saved state
|
|
68
|
-
|
|
69
78
|
// draw graphic
|
|
70
|
-
//
|
|
79
|
+
// vertices can have different colors
|
|
71
80
|
rapid.startGraphicDraw()
|
|
72
81
|
rapid.addGraphicVertex(0, 0, color)
|
|
73
82
|
rapid.addGraphicVertex(100, 0, color)
|
|
@@ -81,6 +90,34 @@ rapid.endRender()
|
|
|
81
90
|
rapid.resize(100,100)
|
|
82
91
|
```
|
|
83
92
|
|
|
93
|
+
# Custom Shader
|
|
94
|
+
|
|
95
|
+
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) )
|
|
96
|
+
|
|
97
|
+
```js
|
|
98
|
+
const vertexShaderSource = `...`
|
|
99
|
+
const fragmentShaderSource = `...`
|
|
100
|
+
|
|
101
|
+
const customShader = new GLShader(rapid, vertexShaderSource, fragmentShaderSource)
|
|
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
123
|

|
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
|
-
|
|
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";
|
package/dist/interface.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Color } from "./math";
|
|
2
|
+
import GLShader from "./webgl/glshader";
|
|
2
3
|
export type WebGLContext = WebGL2RenderingContext | WebGLRenderingContext;
|
|
3
4
|
export interface IRapiadOptions {
|
|
4
5
|
canvas: HTMLCanvasElement;
|
|
@@ -15,4 +16,10 @@ export interface IAttribute {
|
|
|
15
16
|
stride: number;
|
|
16
17
|
offset?: number;
|
|
17
18
|
}
|
|
19
|
+
export interface IRenderSpriteOptions {
|
|
20
|
+
color?: Color;
|
|
21
|
+
shader?: GLShader;
|
|
22
|
+
uniforms?: UniformType;
|
|
23
|
+
}
|
|
24
|
+
export type UniformType = Record<string, number | Array<any>>;
|
|
18
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):
|
|
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 {};
|
package/dist/rapid.global.js
CHANGED
|
@@ -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],o=r[t+2],u=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=o*i-u*a,r[t+3]=o*a+u*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],o=t[e+5],u=r*s-i*a;return new Float32Array([s/u,-i/u,-a/u,r/u,(a*o-s*n)/u,(i*n-r*o)/u])}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 o{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 u{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,"toAddTextures",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),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,this.toAddTextures.add(t)),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer();for(const e of this.attribute)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 o(this.rapid,e,t)}render(){this.executeRender(),this.initializeForNextRender()}executeRender(){this.webglArrayBuffer.bufferData();const e=this.gl;this.toAddTextures.forEach((t=>{e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])})),this.toAddTextures.clear()}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}}class h 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 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 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 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,o,u,h){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=o+t,b=u+r,d=i+s,f=a+n;this.addVertex(o,u,i,a,l,h),this.addVertex(c,u,d,a,l,h),this.addVertex(c,b,d,f,l,h),this.addVertex(o,b,i,f,l,h)}executeRender(){super.executeRender();const e=this.gl;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,"projectionDirty",{enumerable:!0,configurable:!0,writable:!0,value:!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,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),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)}),Object.defineProperty(this,"backgroundColor",{enumerable:!0,configurable:!0,writable:!0,value:void 0});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(),this.backgroundColor=e.backgroundColor||new s(255,255,255,255),this.width=e.width||this.canvas.width,this.height=e.width||this.canvas.height,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",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(),this.projectionDirty=!1}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()}resize(e,t){const r=this.gl;this.width=e,this.height=t,this.projection=this.createOrthMatrix(0,this.width,this.height,0),r.viewport(0,0,this.width,this.height),this.projectionDirty=!0}clear(){const e=this.gl,t=this.backgroundColor;e.clearColor(t.r,t.g,t.b,t.a),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){this.attributeLoc={},this.uniformLoc={};const s=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,s),this.gl=t.gl,this.parseShader(r),this.parseShader(s)}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)}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],o=r[t+2],h=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=o*i-h*a,r[t+3]=o*a+h*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],o=t[e+5],h=r*s-i*a;return new Float32Array([s/h,-i/h,-a/h,r/h,(a*o-s*n)/h,(i*n-r*o)/h])}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 o{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,"toAddTextures",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),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,this.toAddTextures.add(t)),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer();for(const e of this.attribute)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;this.toAddTextures.forEach((t=>{e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])})),this.toAddTextures.clear()}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 u 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 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 u(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,o,h,u){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=o+t,b=h+r,d=i+s,f=a+n;this.addVertex(o,h,i,a,l,u),this.addVertex(c,h,d,a,l,u),this.addVertex(c,b,d,f,l,u),this.addVertex(o,b,i,f,l,u)}executeRender(){super.executeRender();const e=this.gl;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,"projectionDirty",{enumerable:!0,configurable:!0,writable:!0,value:!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,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),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)}),Object.defineProperty(this,"backgroundColor",{enumerable:!0,configurable:!0,writable:!0,value:void 0});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(),this.backgroundColor=e.backgroundColor||new a(255,255,255,255),this.width=e.width||this.canvas.width,this.height=e.width||this.canvas.height,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",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(),this.projectionDirty=!1}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()}resize(e,t){const r=this.gl;this.width=e,this.height=t,this.projection=this.createOrthMatrix(0,this.width,this.height,0),r.viewport(0,0,this.width,this.height),this.projectionDirty=!0}clear(){const e=this.gl,t=this.backgroundColor;e.clearColor(t.r,t.g,t.b,t.a),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){this.attributeLoc={},this.uniformLoc={};const s=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,s),this.gl=e.gl,this.parseShader(r),this.parseShader(s)}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)}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};
|
package/dist/rapid.umd.cjs
CHANGED
|
@@ -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],o=r[t+2],u=r[t+3];r[t+0]=s*i-n*a,r[t+1]=s*a+n*i,r[t+2]=o*i-u*a,r[t+3]=o*a+u*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],o=t[e+5],u=r*s-i*a;return new Float32Array([s/u,-i/u,-a/u,r/u,(a*o-s*n)/u,(i*n-r*o)/u])}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 o{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,"toAddTextures",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),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,this.toAddTextures.add(t)),t}enterRegion(e){this.currentShader=e??this.defaultShader,this.currentShader.use(),this.initializeForNextRender(),this.webglArrayBuffer.bindBuffer();for(const e of this.attribute)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;this.toAddTextures.forEach((t=>{e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.usedTextures[t])})),this.toAddTextures.clear()}initializeForNextRender(){this.webglArrayBuffer.clear(),this.usedTextures=[]}}class u 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 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 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 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,o,u,h){this.batchSprite>=this.MAX_BATCH&&this.render(),this.batchSprite++,this.webglArrayBuffer.resize(24);const l=this.useTexture(e),c=o+t,b=u+r,d=i+s,f=a+n;this.addVertex(o,u,i,a,l,h),this.addVertex(c,u,d,a,l,h),this.addVertex(c,b,d,f,l,h),this.addVertex(o,b,i,f,l,h)}executeRender(){super.executeRender();const e=this.gl;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,"projectionDirty",{enumerable:!0,configurable:!0,writable:!0,value:!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,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),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)}),Object.defineProperty(this,"backgroundColor",{enumerable:!0,configurable:!0,writable:!0,value:void 0});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(),this.backgroundColor=e.backgroundColor||new a(255,255,255,255),this.width=e.width||this.canvas.width,this.height=e.width||this.canvas.height,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(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(),this.projectionDirty=!1}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()}resize(e,t){const r=this.gl;this.width=e,this.height=t,this.projection=this.createOrthMatrix(0,this.width,this.height,0),r.viewport(0,0,this.width,this.height),this.projectionDirty=!0}clear(){const e=this.gl,t=this.backgroundColor;e.clearColor(t.r,t.g,t.b,t.a),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){this.attributeLoc={},this.uniformLoc={};const s=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,s),this.gl=e.gl,this.parseShader(r),this.parseShader(s)}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)}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;
|
package/dist/regions/region.d.ts
CHANGED
|
@@ -10,8 +10,8 @@ declare class RenderRegion {
|
|
|
10
10
|
protected rapid: Rapid;
|
|
11
11
|
protected gl: WebGLContext;
|
|
12
12
|
protected usedTextures: WebGLTexture[];
|
|
13
|
-
protected toAddTextures: Set<number>;
|
|
14
13
|
protected readonly TEXTURE_UNITS_ARRAY: number[];
|
|
14
|
+
protected needBind: Set<number>;
|
|
15
15
|
constructor(rapid: Rapid, attributes?: IAttribute[]);
|
|
16
16
|
protected addVertex(x: number, y: number, ..._: unknown[]): void;
|
|
17
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,38 +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;
|
|
10
13
|
projectionDirty: boolean;
|
|
11
14
|
matrixStack: MatrixStack;
|
|
12
|
-
|
|
15
|
+
textures: TextureCache;
|
|
13
16
|
width: number;
|
|
14
17
|
height: number;
|
|
18
|
+
backgroundColor: Color;
|
|
19
|
+
readonly devicePixelRatio: number;
|
|
20
|
+
readonly maxTextureUnits: number;
|
|
21
|
+
private readonly defaultColor;
|
|
15
22
|
private currentRegion?;
|
|
16
23
|
private currentRegionName?;
|
|
17
24
|
private regions;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
25
|
+
/**
|
|
26
|
+
* Constructs a new `Rapid` instance with the given options.
|
|
27
|
+
* @param options - Options for initializing the `Rapid` instance.
|
|
28
|
+
*/
|
|
21
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
|
+
*/
|
|
22
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
|
+
*/
|
|
23
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
|
+
*/
|
|
24
50
|
setRegion(regionName: string, customShader?: GLShader): void;
|
|
51
|
+
/**
|
|
52
|
+
* Saves the current matrix state to the stack.
|
|
53
|
+
*/
|
|
25
54
|
save(): void;
|
|
55
|
+
/**
|
|
56
|
+
* Restores the matrix state from the stack.
|
|
57
|
+
*/
|
|
26
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
|
+
*/
|
|
27
63
|
startRender(clear?: boolean): void;
|
|
64
|
+
/**
|
|
65
|
+
* Ends the rendering process by rendering the current region.
|
|
66
|
+
*/
|
|
28
67
|
endRender(): void;
|
|
29
|
-
|
|
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
|
+
*/
|
|
30
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
|
+
*/
|
|
31
87
|
addGraphicVertex(x: number, y: number, color: Color): void;
|
|
88
|
+
/**
|
|
89
|
+
* Ends the graphic drawing process by rendering the current graphic region.
|
|
90
|
+
*/
|
|
32
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
|
+
*/
|
|
33
97
|
resize(width: number, height: number): void;
|
|
98
|
+
/**
|
|
99
|
+
* Clears the canvas with the background color.
|
|
100
|
+
*/
|
|
34
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
|
+
*/
|
|
35
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
|
+
*/
|
|
36
117
|
transformPoint(x: number, y: number): number[];
|
|
37
118
|
}
|
|
38
119
|
export default Rapid;
|
package/dist/webgl/glshader.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
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
|
-
|
|
5
|
+
uniformLoc: Record<string, WebGLUniformLocation>;
|
|
6
6
|
program: WebGLProgram;
|
|
7
7
|
private gl;
|
|
8
8
|
constructor(rapid: Rapid, vs: string, fs: string);
|
|
9
|
+
setUniforms(uniforms: UniformType): void;
|
|
10
|
+
private getUniform;
|
|
9
11
|
use(): void;
|
|
10
12
|
parseShader(shader: string): void;
|
|
11
13
|
setAttribute(element: IAttribute): void;
|
package/dist/webgl/utils.d.ts
CHANGED
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rapid-render",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -15,10 +15,11 @@
|
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"dev": "rollup -c rollup.config.dev.js -w",
|
|
18
|
-
"build": "rollup -c rollup.config.prod.js && tsc
|
|
18
|
+
"build": "rollup -c rollup.config.prod.js && tsc"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"rollup": "^4.12.0",
|
|
22
|
+
"rollup-plugin-dts": "^6.1.0",
|
|
22
23
|
"rollup-plugin-server": "^0.7.0",
|
|
23
24
|
"rollup-plugin-string": "^3.0.0",
|
|
24
25
|
"rollup-plugin-terser": "^7.0.2",
|