渲染引擎

SpriteJS Next 支持多引擎，在较新的浏览器中，默认优先采用 webgl2 引擎渲染，如果不支持 webgl2 会降级为 webgl，如果不支持 webgl，会再降级为 canvas2d。

我们也可以通过Scene或者Layer的参数指定渲染引擎。

在与某些第三方库联合使用的时候，我们可能需要根据第三方库的支持情况选择合适的引擎。

  1. const {Scene, Rect} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 600,
  6.   height: 600,
  7.   contextType: '2d',
  8. });
  9. const layer = scene.layer({
  10.   autoRender: false,
  11. });
  13. const rect = new Rect({
  14.   normalize: true,
  15.   pos: [300, 300],
  16.   size: [100, 100],
  17.   fillColor: 'red',
  18.   opacity: 0.5,
  19. });
  20. layer.append(rect);
  22. /* globals curvejs */
  23. const {Stage, Curve} = curvejs;
  24. const canvas = layer.canvas;
  25. const stage = new Stage(canvas);
  26. const rd = () => -2 + Math.random() * 2;
  27. const curve = new Curve({
  28.   color: '#00FF00',
  29.   points: [277, 327, 230, 314, 236, 326, 257, 326],
  30.   data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
  31.   motion: function motion(points, data) {
  32.     points.forEach((item, index) => {
  33.       points[index] += data[index];
  35.       if(points[index] < 0) {
  36.         points[index] = 0;
  37.         data[index] *= -1;
  38.       }
  39.       if(index % 2 === 0) {
  40.         if(points[index] > canvas.width) {
  41.           points[index] = canvas.width;
  42.           data[index] *= -1;
  43.         }
  44.       } else if(points[index] > canvas.height) {
  45.         points[index] = canvas.height;
  46.         data[index] *= -1;
  47.       }
  48.     });
  49.   },
  50. });
  51. stage.add(curve);
  53. let ang = 0;
  54. function tick() {
  55.   stage.update();
  56.   rect.attributes.rotate = ang++;
  57.   layer.render({clear: false});
  58.   requestAnimationFrame(tick);
  59. }
  61. tick();

值得注意的是，不一定 webgl2/webgl 引擎就优于 canvas2d，在内存限制的情况下，某些特定场景使用 canvas2d 渲染因为节省内存，可能反而效率要更高。

canvas2d下，有些功能不能完全支持，比如 textureRepeat 属性，在 canvas2d 下不能支持。

内存

SpriteJS Next 在 webgl2/webgl 渲染引擎下，会自动合并能够合并的元素在同一批次下进行渲染，这会提升渲染效率，但是会耗费更多的内存。在内存限制的情况下，可以通过设置Scene或者Layer的bufferSize参数来减少合并的顶点个数，以减少内存消耗。

  1. const scene = new Scene({
  2.   container,
  3.   width: 1000,
  4.   height: 1000,
  5.   bufferSize: 500,
  6. })

默认的bufferSize值为1500。