glwrap.js - Questions

For developers using the Construct 2 Javascript SDK

Post » Sun Oct 13, 2013 5:50 am


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.
B
39
S
16
G
6
Posts: 542
Reputation: 7,617

Post » Sun Oct 13, 2013 7:24 am

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.
B
92
S
32
G
110
Posts: 5,295
Reputation: 71,501

Post » Sun Oct 13, 2013 12:47 pm

Thanks, that's a big help :)
B
39
S
16
G
6
Posts: 542
Reputation: 7,617

Post » Sun Oct 13, 2013 4:50 pm

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:

[quote]
          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);
[/quote]

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.

[quote]
          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);

[/quote]ErekT2013-10-13 18:55:14
B
39
S
16
G
6
Posts: 542
Reputation: 7,617

Post » Mon Oct 14, 2013 12:03 am

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
[code]var render_to_texture = true;//(this.active_effect_types.length > 0 || this.runtime.uses_background_blending);
this.runtime.width=100;
this.runtime.height=100;[/code]
That makes it draw to a low res texture.

Then to stretch it back big to cover the canvas I inserted these two lines at line 509:
[code]this.runtime.width=this.runtime.canvas.width;
this.runtime.height=this.runtime.canvas.height;[/code]

It made it all pixely but visibility clipping was off so unless the objects were in the 100x100 pixel area in the middle they became invisible. You'll have to delve deeper to I think the layer drawgl function and tweak the visibility check there. Also this completely disregards any aspect ratios.

For completeness you'd want to edit the canvas2d draw function as well, but that's a different beast.

Unless point sampling can reliably be used across all canvas2d implementations I can see why it wouldn't be included in c2 because it would the image would be filtered when resized, which i'm sure will result in many posters asking why their game is blurry. But that's just my 2c.
B
92
S
32
G
110
Posts: 5,295
Reputation: 71,501

Post » Mon Oct 14, 2013 4:18 am

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.ErekT2013-10-14 05:13:14
B
39
S
16
G
6
Posts: 542
Reputation: 7,617


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests