Skip to content

Commit 5ed40ae

Browse files
bitnenferbitnenfer
committed
Shape Texturing
1 parent b9be1df commit 5ed40ae

1 file changed

Lines changed: 65 additions & 19 deletions

File tree

‎v3/merge/renderer/webgl/canvas/canvas-gl.js‎

Lines changed: 65 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
1-
function CreateRenderTarget(gl, width, height) {
1+
function CreateRenderTarget(gl, width, height, data) {
22
var texture = gl.createTexture();
33
gl.activeTexture(gl.TEXTURE0);
44
gl.bindTexture(gl.TEXTURE_2D, texture);
55
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
66
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
77
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
88
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
9-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
9+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data ? data : null);
10+
if (gl.getError() != gl.NO_ERROR) {
11+
console.error("GL ERROR", gl.getError());
12+
}
13+
return texture;
14+
}
15+
16+
function UploadTexture(gl, image) {
17+
var texture = gl.createTexture();
18+
gl.activeTexture(gl.TEXTURE0);
19+
gl.bindTexture(gl.TEXTURE_2D, texture);
20+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
21+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
22+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
23+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
24+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
1025
if (gl.getError() != gl.NO_ERROR) {
1126
console.error("GL ERROR", gl.getError());
1227
}
@@ -61,6 +76,7 @@ function CanvasGL(gl) {
6176
'const vec2 gf6 = vec2(3.0, 0.015625);',
6277
'const float factor = 0.5;',
6378
'uniform bool isStencil;',
79+
'uniform bool isPattern;',
6480
'uniform sampler2D mainSampler;',
6581
'uniform sampler2D maskSampler;',
6682
'uniform vec2 scale;',
@@ -70,6 +86,8 @@ function CanvasGL(gl) {
7086
'void main() {',
7187
' if (isStencil == false) {',
7288
' gl_FragColor = vec4(outColor.bgr, 1.0);',
89+
' } else if (isPattern) {',
90+
' gl_FragColor = texture2D(mainSampler, outTexCoord);',
7391
' } else {',
7492
' vec4 mainColor = texture2D(mainSampler, outTexCoord);',
7593
' vec4 maskColor = vec4(0, 0, 0, 0);',
@@ -133,20 +151,43 @@ function CanvasGL(gl) {
133151
gl.bindTexture(gl.TEXTURE_2D, this._emptyTexture);
134152
gl.activeTexture(gl.TEXTURE1);
135153
gl.bindTexture(gl.TEXTURE_2D, this._emptyTexture);
154+
this._isPatternLocation = gl.getUniformLocation(program, 'isPattern');
136155
gl.uniform1i(gl.getUniformLocation(program, 'mainSampler'), 0);
137156
gl.uniform1i(gl.getUniformLocation(program, 'maskSampler'), 1);
157+
gl.uniform1i(this._isPatternLocation, 0);
138158
gl.uniform2f(gl.getUniformLocation(program, 'scale'), 1 / gl.canvas.width, 1 / gl.canvas.height);
159+
this.enableMaskAntialiasing();
160+
this._currentPattern = null;
139161
}
140162

163+
CanvasGL.prototype.createPatternTexture = function (image) {
164+
var texture = UploadTexture(this._gl, image);
165+
var pattern = {
166+
// Other Properties
167+
texture: texture
168+
};
169+
return pattern;
170+
};
171+
172+
CanvasGL.prototype.usePattern = function (pattern) {
173+
this._currentPattern = pattern;
174+
};
175+
176+
CanvasGL.prototype.stopPattern = function () {
177+
this._currentPattern = null;
178+
};
179+
141180
CanvasGL.prototype.enableMaskAntialiasing = function () {
181+
var gl = this._gl;
142182
gl.uniform1i(gl.getUniformLocation(this._program, 'enableBlur'), 1);
143183
};
144184

145185
CanvasGL.prototype.disableMaskAntialiasing = function () {
186+
var gl = this._gl;
146187
gl.uniform1i(gl.getUniformLocation(this._program, 'enableBlur'), 0);
147188
};
148189

149-
CanvasGL.prototype.startMaskRecording = function () {
190+
CanvasGL.prototype.recordMaskBegin = function () {
150191
var gl = this._gl;
151192
var stencilbuffer = this._fboStencilBuffer;
152193
this.flush();
@@ -160,7 +201,7 @@ CanvasGL.prototype.startMaskRecording = function () {
160201
gl.uniform1i(this._isStencilLocation, 0);
161202
};
162203

163-
CanvasGL.prototype.endMaskRecording = function () {
204+
CanvasGL.prototype.recordMaskEnd = function () {
164205
var gl = this._gl;
165206
this.flush();
166207
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -172,7 +213,7 @@ CanvasGL.prototype.endMaskRecording = function () {
172213
gl.uniform1i(this._isStencilLocation, 0);
173214
};
174215

175-
CanvasGL.prototype.startMaskApply = function () {
216+
CanvasGL.prototype.applyMaskBegin = function () {
176217
var gl = this._gl;
177218
var colorbuffer = this._fboColorBuffer;
178219
this.flush();
@@ -186,15 +227,15 @@ CanvasGL.prototype.startMaskApply = function () {
186227
gl.uniform1i(this._isStencilLocation, 0);
187228
};
188229

189-
CanvasGL.prototype.endMaskApply = function () {
230+
CanvasGL.prototype.applyMaskEnd = function () {
190231
var gl = this._gl;
191232
var colorbuffer = this._fboColorBuffer;
192233
var stencilbuffer = this._fboStencilBuffer;
193234
this.flush();
194235
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
195236
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
196237
gl.activeTexture(gl.TEXTURE0);
197-
gl.bindTexture(gl.TEXTURE_2D, colorbuffer.targetTexture);
238+
gl.bindTexture(gl.TEXTURE_2D, this._currentPattern ? this._currentPattern.texture : colorbuffer.targetTexture);
198239
gl.activeTexture(gl.TEXTURE1);
199240
gl.bindTexture(gl.TEXTURE_2D, stencilbuffer.targetTexture);
200241
gl.uniform1i(this._isStencilLocation, 1);
@@ -531,35 +572,40 @@ CanvasGL.prototype.fillRect = function (x, y, width, height) {
531572
var x3 = xmax * a + ymin * c + e;
532573
var y3 = xmax * b + ymin * d + f;
533574

575+
var umin = 0;
576+
var vmin = 0;
577+
var umax = 1;
578+
var vmax = 1;
579+
534580
position[offset++] = x0;
535581
position[offset++] = y0;
536-
position[offset++] = 0;
537-
position[offset++] = 0;
582+
position[offset++] = umin;
583+
position[offset++] = vmin;
538584
color[offset++] = intColor;
539585
position[offset++] = x1;
540586
position[offset++] = y1;
541-
position[offset++] = 1;
542-
position[offset++] = 0;
587+
position[offset++] = umax;
588+
position[offset++] = vmin;
543589
color[offset++] = intColor;
544590
position[offset++] = x2;
545591
position[offset++] = y2;
546-
position[offset++] = 0;
547-
position[offset++] = 1;
592+
position[offset++] = umin;
593+
position[offset++] = vmax;
548594
color[offset++] = intColor;
549595
position[offset++] = x1;
550596
position[offset++] = y1;
551-
position[offset++] = 1;
552-
position[offset++] = 0;
597+
position[offset++] = umax;
598+
position[offset++] = vmin;
553599
color[offset++] = intColor;
554600
position[offset++] = x3;
555601
position[offset++] = y3;
556-
position[offset++] = 1;
557-
position[offset++] = 1;
602+
position[offset++] = umax;
603+
position[offset++] = vmax;
558604
color[offset++] = intColor;
559605
position[offset++] = x2;
560606
position[offset++] = y2;
561-
position[offset++] = 0;
562-
position[offset++] = 1;
607+
position[offset++] = umin;
608+
position[offset++] = vmax;
563609
color[offset++] = intColor;
564610

565611
this._vertexCount += 6;

0 commit comments

Comments
 (0)