WebGl-2d.js: Implementing the Canvas 2D API on WebGL
WebGL-2d is a very interesting javascript library that implements standard methods for working with a 2d Canvas context on a WebGL context.
It's no secret that today Canvas cannot boast of good performance and rendering complex scenes in real time can be a problem. With WebGL, the performance situation is significantly better, but not all popular browsers support this standard, in particular, Microsoft does not even plan to implement its support in IE (third-party developers have already begun to make plug-ins for this reason).
By connecting WebGL-2d and adding just a couple of lines, we can significantly speed up graphics rendering implemented with Canvas 2d API tools in browsers that support WebGL and provide fallback to the usual 2d context.
')
Fortunately, browser developers are working on the Canvas graphics performance problem, there is support for hardware acceleration for 2D context, so in the near (hopefully) future, this library will not be in demand, but today it definitely must have.
An example of initializing WebGL-2d and getting context:
The project repository is on GitHub .
Some examples and benchmarks from the repository do not work when opening html files directly (Uncaught Error occurs: SECURITY_ERR: DOM Exception 18 due to the inability to set cookies with this launch scheme), run on a local web server.
WebGL-2d currently supports the following standard 2d context methods:
* The current release of the fill and stroke methods do not support arcs and curves.
Unfortunately, at the moment the author has forgotten the development of his brainchild (the last commit was made in April 2011), but in any case, the project is worthy of attention.
It's no secret that today Canvas cannot boast of good performance and rendering complex scenes in real time can be a problem. With WebGL, the performance situation is significantly better, but not all popular browsers support this standard, in particular, Microsoft does not even plan to implement its support in IE (third-party developers have already begun to make plug-ins for this reason).
By connecting WebGL-2d and adding just a couple of lines, we can significantly speed up graphics rendering implemented with Canvas 2d API tools in browsers that support WebGL and provide fallback to the usual 2d context.
')
Fortunately, browser developers are working on the Canvas graphics performance problem, there is support for hardware acceleration for 2D context, so in the near (hopefully) future, this library will not be in demand, but today it definitely must have.
An example of initializing WebGL-2d and getting context:
var cvs = document.getElementById("myCanvas");
WebGL2D.enable(cvs);
var ctx = cvs.getContext('webgl-2d');The project repository is on GitHub .
Some examples and benchmarks from the repository do not work when opening html files directly (Uncaught Error occurs: SECURITY_ERR: DOM Exception 18 due to the inability to set cookies with this launch scheme), run on a local web server.
WebGL-2d currently supports the following standard 2d context methods:
- strokeStyle
- fillStyle
- strokeRect
- fillRect
- translate
- rotate
- scale
- save
- restore
- lineWidth
- drawImage
- createImageData
- getImageData
- putImageData
- beginPath
- closePath
- moveTo
- lineTo
- rect
- fill *
- stroke *
* The current release of the fill and stroke methods do not support arcs and curves.
Unfortunately, at the moment the author has forgotten the development of his brainchild (the last commit was made in April 2011), but in any case, the project is worthy of attention.
Source: https://habr.com/ru/post/145034/
All Articles