Bevel with pixi.js

[agamemnus]

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.

[agamemnus]

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