glwrap.js - Questions

0 favourites
  • 6 posts
  • 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);

    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:


    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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)