Jump to content

Bevel with pixi.js


agamemnus
 Share

Recommended Posts

Hi,

 

I'm currently using just canvas for my jigsaw game, and in Chromium 37 it is as fast as pixi.js due to hardware acceleration, with the caveat that all of my textures are generated via canvas and then imported as a texture.

 

I have to use a dynamically generated bevel because my piece shapes are dynamically/procedurally generated. Unfortunately. as of now pretty much any shading effects (including css filters) are extremely slow in Chromium on Android. So I am wondering if someone could help me figure out if I can use pixi.js to efficiently do a hardware accelerated bevel.

 

Here is my current process:

1) Generate a (textured) piece, with a shape. Send that over to the shading function.

In the shading function:

2) Clip to the shape.

3) Apply a small border to it, and a shadowBlur. <- (With <canvas>, shape shadows need a border. Without a border, there is no shading. The bigger the border, the bigger the shading effect, but for this effect we don't want a border at all, so we need a higher value shadowBlur to make the border as small as possible, which increases processing time.)

4) Offset that border up and to the left with a white shadow, and down and to the right with a black shadow.

5) Apply the new borders to the textured piece.

 

Edit: NOTE NOTE NOTE I also have a completely software-only process (individual pixel manipulation), without the use of shadowBlur. But, it's extremely slow, or rather, just as slow in Android as the shadowBlur process described above.

Link to comment
Share on other sites

Ok, so it looks like I just need to code new filters with openGL, then apply my filters, and somehow get the data back... right.

 

I'll likely do this soon myself, but here is the software bevel code if anyone wants a crack at it.

  function bevel (canvas, pass_count) {   var ctx = canvas.getContext('2d')   var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height)   var pixel_list = pixels.data   var canvas_width   = canvas.width   var canvas_height  = canvas.height   var canvas_widthx4 = canvas.width * 4   var pixel_list_next = new Uint8ClampedArray (pixel_list.length)   for (var n = 0; n < pass_count; n++) {    for (var x = 1; x < canvas_width - 1; x++) {     for (var y = 1; y < canvas_height - 1; y++) {      var curpos = x * 4 + canvas_width * y * 4      var o0 = pixel_list[curpos + 3]      var o1 = pixel_list[curpos + 7]      var o2 = pixel_list[curpos - 1]      var o3 = pixel_list[curpos + 3 + canvas_widthx4]      var o4 = pixel_list[curpos + 3 - canvas_widthx4]      pixel_list_next[curpos + 3] = o0 + Math.round((o1 + o2 + o3 + o4) / 4)      if (pixel_list_next[curpos + 3] == 0) continue      var p0 = pixel_list[curpos + 2] * o0      var p1 = pixel_list[curpos + 6] * o1      var p2 = pixel_list[curpos - 2] * o2      var p3 = pixel_list[curpos + 2 + canvas_widthx4] * o3      var p4 = pixel_list[curpos + 2 - canvas_widthx4] * o4      var opacity_total = o0 * 2 + o1 + o2 + o3 + o4      pixel_list_next[curpos + 2] = Math.round((p0 * 2 + p1 + p2 + p3 + p4) / opacity_total)     }    }    var temp = pixel_list    pixel_list = pixel_list_next    pixel_list_next = temp   }   for (var i = 0, curlen = canvas_width * canvas_height * 4; i < curlen; i+=4) {    pixel_list[i]     = pixel_list[i + 2]    pixel_list[i + 1] = pixel_list[i + 2]   }   if (pixel_list != pixels.data) pixels.data.set (pixel_list)   ctx.putImageData (pixels, 0, 0, 0, 0, canvas_width, canvas_height)  }  function blur (canvas, pass_count) {   var ctx = canvas.getContext('2d')   var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height)   var pixel_list = pixels.data   var canvas_width   = canvas.width   var canvas_height  = canvas.height   var canvas_widthx4 = canvas.width * 4   var pixel_list_next = new Uint8ClampedArray (pixel_list.length)   for (var n = 0; n < pass_count; n++) {    for (var x = 1; x < canvas_width - 1; x++) {     for (var y = 1; y < canvas_height - 1; y++) {      var curpos = x * 4 + canvas_width * y * 4      var o0 = pixel_list[curpos + 3]      var o1 = pixel_list[curpos + 7]      var o2 = pixel_list[curpos - 1]      var o3 = pixel_list[curpos + 3 + canvas_widthx4]      var o4 = pixel_list[curpos + 3 - canvas_widthx4]      pixel_list_next[curpos + 3] = Math.round((o1 + o2 + o3 + o4) / 4)      var p0 = pixel_list[curpos + 2]      var p1 = pixel_list[curpos + 6]      var p2 = pixel_list[curpos - 2]      var p3 = pixel_list[curpos + 2 + canvas_widthx4]      var p4 = pixel_list[curpos + 2 - canvas_widthx4]      pixel_list_next[curpos + 2] = p0 + Math.round((p1 + p2 + p3 + p4) / 4)     }    }    var temp = pixel_list    pixel_list = pixel_list_next    pixel_list_next = temp   }   for (var i = 0, curlen = canvas_width * canvas_height * 4; i < curlen; i+=4) {    pixel_list[i]     = pixel_list[i + 2]    pixel_list[i + 1] = pixel_list[i + 2]   }   if (pixel_list != pixels.data) pixels.data.set (pixel_list)   ctx.putImageData (pixels, 0, 0, 0, 0, canvas_width, canvas_height)  }
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...