glwrap.js - Questions

Okay, I'm deep into the guts of glwrap.js tinkering about to figure out how it all works. My hope is that I'll be able to understand it well enough to change the rendering pipeline around a bit to allow for all rendering to take place before the viewport gets scaled up. Which is probably waaay over my head but what the heck, I'll try anyway. The main thing I'm puzzled about is the sequential order of it all. Is there even a fixed order to the rendering pipeline? The closest thing I found was SwitchProgram and InitState which only gets run once. But that tells me little about at what point in the render loop methods like SetSize and Scale get called. Also not sure what kind of numbers get passed to indicate width and height for the viewport and whatnot. I assumed at first that these were the same as either window size width and height or system resolution width and height, but when I tried to change them around I got weird scaling results and graphical artifacts.

Just so you know, I don't plan to release a modified glwrap.js or anything. If I get it to work I'll try to put it into a separate plugin. For now tho, I'm just trying to understand.

Glwrap isn't the area to look in. It's just helper functions and functions to draw batches of images. As I recall the area to look in is preview.js. The layout class has two functions draw() and drawgl(), that's the lowest point where the drawing takes place. Before those are called I think there's some init code that sets up the canvas size and some variables for scale.

My thought is if you use the unscaled canvas mode you can then take that image and draw that to a full screen canvas. I'm unconvinced it will be faster in the case of canvas2d especially with the need of another canvas. Also unless point sampling is available it will look blurry in canvas2d.

For the case of using webgl you could try the same method but It may run into performance issues like my canvas plugin has with webgl. But that's just what I've gathered in the process of making my paster plugin.

Anyway happy hacking. You'll no doubt Learn a lot about what makes c2 tick.

Thanks, that's a big help :)

Webgl is turning out to be a real horror show. How do humans work with this? Ahh.. :P

Anyway, I am trying to start simple and create a 4-vertex quad to display on screen at the bottom of the drawgl() function. I've managed to create a buffer for the vertices in InitState and bind it to the arraybuffer. So far so good I guess. When I try to draw the thing though, I get an error message about the shaderProgram not being defined. This shaderprogram seems to be specific to C2 so I can't dig up any solution on the internet. How do I define this? The DrawGL() snippet looks like this:

          gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

              gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

//          mat4.translate(matmv, [3.0, 0.0, 0.0]);

          gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

EDIT: Ah, nevermind. Figured it out.

EDIT2: Right, this is what I have in DrawGL right now. It runs fine but I see no quad.

          var shaderProgram = gl.createProgram();

          gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

          mat4.translate(gl.matMV, [3.0, 0.0, 0.0]);

              gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

          gl.uniformMatrix4fv(shaderProgram.locMatP, false, gl.matP);

              gl.uniformMatrix4fv(shaderProgram.locMatMV, false, gl.matMV);

          gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

edited><editID>ErekT</editID><editDate>2013-10-13 18:55:14</editDate></edited>

Eh, you'll end up having to rewrite to much if you go that route...

Webgl already draws to a texture so as a start you can modify the drawgl function on line 475 in layout.js.

As a quick ugly hack I changed line 477 to

var render_to_texture = true;//(this.active_effect_types.length > 0 || this.runtime.uses_background_blending);
this.runtime.width=100;
this.runtime.height=100;

this.runtime.width=this.runtime.canvas.width;
this.runtime.height=this.runtime.canvas.height;

Thanks a heap for these pointers! :) It looks like my fumblings with webgl were pretty redundant. It's just as well! :P

Point sampling: For WebGL this seems pretty trivial, just change the flag from linearsampling to pointsampling for the rendertexture. I have no idea about canvas2d (yet) though. I've been wanting this mostly to prevent undue slowdowns in Webgl rendering and like you said, the added overhead of scaling another canvas might nullify any performance gains with canvas2d. I'll give it a try though, it should help with the sub-pixel rendering issue at least.

In the meantime, thanks again :)

EDIT: Seems that in order to account for applied shader effects I'll need to look into renderEffectchain() as well. Will do so when I have more time.