Drawing content from another canvas onto c2canvas

For developers using the Construct 2 Javascript SDK

Post » Tue Jan 13, 2015 12:19 am

@QuaziGNRLnose
I found a solution for upside down texture loading that may be helpful to you. I'm using it in the case of loading a html5 canvas to a texture. I set it, load, then unset it so no other image loading will be affected.

glw.gl.pixelStorei(glw.gl.UNPACK_FLIP_Y_WEBGL, true);
this.texture = glw.loadTexture(canvas, false, this.runtime.linearSampling);
glw.gl.pixelStorei(glw.gl.UNPACK_FLIP_Y_WEBGL, false);
B
94
S
33
G
118
Posts: 5,396
Reputation: 75,853

Post » Tue Jan 13, 2015 2:22 am

hmmm, Right now as of Q3D V 2.3 i use video-to-texture, and just render the quad inverted in the layout if it's I.E. or FF, although i don't really like the current solution using browser detection. from what i can tell this would be doing the same thing internally, and would require browser detection as well ? The real problem is really with the browsers not having a standardized API I think. I tried hacking together a system to test the orientation by drawing a graphic of four unique colors into a canvas and testing the orientation of the gl.texImage2D function by then sampling a capture but it was just too much trouble and possibly impossible to actually check the color of the webGL texture created. So for now i guess it's browser detection until i can find a more graceful solution :/, or until FF / IE do things properly like chrome.
B
79
S
13
G
8
Posts: 1,977
Reputation: 9,947

Post » Tue Jan 13, 2015 6:09 am

@QuaziGNRLnose
So you only flip it in IE / FF? That's interesting since I needed to flip it in chrome, at least on my computer. Webgl support for my graphics card is dying off in the other browsers so I can only test in chrome currently. Unfortunately it appears to not be flipped on another users system across all browsers, so I'm at a loss atm. I'm thinking it possibly could be graphics card related? I'll let you know if I find any solution, since as of right now it has the same effect as what you're doing, drawing the quad inverted.
B
94
S
33
G
118
Posts: 5,396
Reputation: 75,853

Post » Wed Jan 14, 2015 9:45 pm

@QuaziGNRLnose
Here's my current solution. It creates a simple webgl program that draws a white rectangle below a black one on a 1x2 canvas. It then reads the pixels and checks if the top pixel is black or not. With that it can know if the texture is flipped or not. This should only need to be run once.

Code: Select all
function isFlippedTexture()
{
   var canvas = document.createElement('canvas');
   canvas.width = 1;
   canvas.height = 2;
   var gl = canvas.getContext("experimental-webgl");
   gl.clearColor(1, 1, 1, 1);
   gl.clear(gl.COLOR_BUFFER_BIT);

   var prog = gl.createProgram();
      
   var vss = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(vss, "attribute vec3 pos;void main() {gl_Position = vec4(pos, 1.0);}");
   gl.compileShader(vss);
   gl.attachShader(prog, vss);
   
   var fss = gl.createShader(gl.FRAGMENT_SHADER);
   gl.shaderSource(fss, "void main() {gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);}");
   gl.compileShader(fss);
   gl.attachShader(prog, fss);
   
   gl.linkProgram(prog);
   gl.useProgram(prog);

   gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 1, -1, 0, -1, 0, 0,   1, 0, 0]), gl.STATIC_DRAW);
   var attr = gl.getAttribLocation(prog, "pos");
   gl.enableVertexAttribArray(attr);
   gl.vertexAttribPointer(attr, 3, gl.FLOAT, false, 0, 0);
   
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   
   var tex_small = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex_small);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.canvas);
   gl.bindTexture(gl.TEXTURE_2D, null);
   
   var fbo = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex_small, 0);
   
   var pixels = new Uint8Array(1 * 2 * 4);
   gl.readPixels( 0, 0, 1, 2, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   gl.deleteTexture(tex_small);
   
   return pixels[0] == 0;
}
B
94
S
33
G
118
Posts: 5,396
Reputation: 75,853

Post » Thu Jan 15, 2015 2:04 am

@r0j0 awesome!

Are you sure the read operation isn't flipped as well? this was the concern that lead me to not attempt the method. I'll try it later and see!

EDIT: Awesome, looks like it's working! you managed to do what i could not :P
B
79
S
13
G
8
Posts: 1,977
Reputation: 9,947

Previous

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests