Drawing content from another canvas onto c2canvas

In my case events looked a lot like:

Three: Create scene "myScene"
Three: Create camera "myCamera" (fov:30, aspect:windowWidth/windowHeight)
Three: Create CubGeometry "myCube" (10,10,10,1,1,1)
Three: Create BasicMaterial "myMat" diffuse: "0xff0000"
Three: Create Mesh "myMesh" with geometry "myCube" and material "myMat"
Three: Create PointLight "myLight" intensity: "1.0"
Three: Position object "myMesh" at (1,0,2)
Three: Position object "myLight" at (2,5,2)
Three: Position object "myCamera" at (2,5,-2)
Three: Camera "myCamera" lookAt (1,0,2)
Three: add object "myCamera" to scene "myScene"
Three: add object "myMesh" to scene "myScene"
Three: add object "myLight" to scene "myScene"
Three: Render scene with camera "myCamera" and scene "myScene"[/code:1vgphv7x]
At some point I think it's easier to do in javascript directly.... You lose almost all of c2's advantages.

This is exactly why an IDE SDK would make sense...

This is exactly why an IDE SDK would make sense...

Not for this no, something like this is meant to be controlled at runtime, theres no real difference between a start of layout load and and setting things up in the IDE. Its better to make a standalone editor with exportable files imo than rely on something built into the IDE.

QuaziGNRLnose

Are you using Three.js as a scene rendered. Where as we use it as an entire world replacement. Yann's sample and who ever did Copperlicht plugin both went the route of world renderers.

Or

Are you using three.js as an alternative Sprite object replacement where the object will remain in a C2 world render?

You can also use Threejs to render to texture instead of canvas.

I'm looking forward to your plugin. I'm hoping I will have some use for it

probably a mix of both

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);

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.

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.

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.

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;
}[/code:1t7nmz4j]

— 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