渲染对象

有时候我们需要多次渲染，比如先将一些内容渲染到FrameBuffer中，然后再输出到屏幕。

在3D扩展中，我们可以使用RenderTarget对象来创建一块可绘制的FrameBuffer。

  1. const vertex = /* glsl */ `
  2.     precision highp float;
  3.     precision highp int;
  5.     attribute vec3 position;
  6.     attribute vec3 normal;
  7.     attribute vec2 uv;
  9.     uniform mat4 modelViewMatrix;
  10.     uniform mat4 projectionMatrix;
  11.     uniform mat3 normalMatrix;
  13.     varying vec2 vUv;
  14.     varying vec3 vNormal;
  16.     void main() {
  17.         vUv = uv;
  18.         vNormal = normalize(normalMatrix * normal);
  20.         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  21.     }
  22. `;
  24. const fragment = /* glsl */ `
  25.     precision highp float;
  26.     precision highp int;
  28.     uniform sampler2D tMap;
  30.     varying vec2 vUv;
  31.     varying vec3 vNormal;
  33.     void main() {
  34.         vec3 normal = normalize(vNormal);
  35.         float lighting = 0.2 * dot(normal, normalize(vec3(-0.3, 0.8, 0.6)));
  36.         vec3 tex = texture2D(tMap, vUv).rgb;
  37.         gl_FragColor.rgb = tex + lighting + vec3(vUv - 0.5, 0.0) * 0.1;
  38.         gl_FragColor.a = 1.0;
  39.     }
  40. `;
  42. const {Scene} = spritejs;
  43. const {Cube, RenderTarget} = spritejs.ext3d;
  44. const container = document.getElementById('container');
  45. const scene = new Scene({
  46.   container,
  47.   displayRatio: 2,
  48. });
  49. const layer = scene.layer3d('fglayer', {
  50.   camera: {
  51.     fov: 35,
  52.   },
  53. });
  55. layer.camera.attributes.pos = [0, 1, 5];
  56. layer.camera.lookAt([0, 0, 0]);
  58. const texture = layer.createTexture({
  59.   image: new Uint8Array([
  60.     191, 25, 54, 255,
  61.     96, 18, 54, 255,
  62.     96, 18, 54, 255,
  63.     37, 13, 53, 255,
  64.   ]),
  65.   width: 2,
  66.   height: 2,
  67.   magFilter: layer.gl.NEAREST,
  68. });
  70. const program = layer.createProgram({
  71.   vertex,
  72.   fragment,
  73.   texture,
  74. });
  76. const target = new RenderTarget(layer.gl, {
  77.   width: 512,
  78.   height: 512,
  79.   camera: {
  80.     fov: 35,
  81.   },
  82. });
  83. target.camera.attributes.pos = [0, 1, 5];
  84. target.camera.lookAt([0, 0, 0]);
  86. const mesh = new Cube(program);
  87. target.append(mesh);
  89. const targetProgram = layer.createProgram({
  90.   vertex,
  91.   fragment,
  92.   texture: target.texture,
  93. });
  95. target.addEventListener('beforerender', (e) => {
  96.   layer.gl.clearColor(0.15, 0.05, 0.2, 1);
  97. });
  99. target.addEventListener('afterrender', (e) => {
  100.   layer.gl.clearColor(1, 1, 1, 0);
  101. });
  103. const mesh2 = new Cube(targetProgram);
  104. layer.append(mesh2);
  106. layer.tick(() => {
  107.   layer.renderTarget(target);
  108.   mesh.attributes.rotateY -= 1.5;
  109.   mesh2.attributes.rotateY -= 0.9;
  110.   mesh2.attributes.rotateX -= 1;
  111. });

我们可以通过layer.renderTarget来绘制内容到FrameBuffer上，然后通过将target.texture绑定为program的texture的方式使用。

我们可以创建多个RenderTarget将内容叠加，比如：

  1. const target1 = new RenderTarget(layer.gl, {
  2.   width: 512,
  3.   height: 512,
  4.   camera: {
  5.     fov: 35,
  6.   },
  7. });
  9. const target2 = new RenderTarget(layer.gl, {
  10.   width: 512,
  11.   height: 512,
  12.   camera: {
  13.     fov: 35,
  14.   },
  15. });
  17. const target3 = new RenderTarget(layer.gl, {
  18.   width: 512,
  19.   height: 512,
  20.   camera: {
  21.     fov: 35,
  22.   },
  23. });
  25. ...
  27. const root = new Mesh3d(...);
  28. layer.tick(() => {
  29.   // 我们可以不将root添加到renderTarget上，这样就可以针对不同的renderTarget复用root
  30.   layer.renderTarget(target1, {root});
  31.   root.program.uniforms.tMap.value = target1.texture;
  32.   layer.renderTarget(target2, {root});
  33.   root.program.uniforms.tMap.value = target2.texture;
  34.   layer.renderTarget(target3, {root});
  35.   root.program.uniforms.tMap.value = target2.texture;
  36.   ...
  38. });

但是这样的话，要处理多次就要创建多个RenderTarget，比较消耗内存。实际上，如果我们多次处理，可以只创建两个target，依次交换他们

  1. const root = new Mesh3d(...);
  2. layer.tick(() => {
  3.   // 我们可以不将root添加到renderTarget上，这样就可以针对不同的renderTarget复用root
  4.   layer.renderTarget(target1, {root});
  5.   root.program.uniforms.tMap.value = target1.texture;
  6.   layer.renderTarget(target2, {root});
  7.   root.program.uniforms.tMap.value = target2.texture;
  8.   layer.renderTarget(target1, {root});
  9.   ...
  11. });

RenderTarget在创建的时候还可以传一个配置项buffer，设为true，则启用双缓冲，这样就不需要创建两个Target，代码就可以简化为：

  1. const root = new Mesh3d(...);
  2. layer.tick(() => {
  3.   // 我们可以不将root添加到renderTarget上，这样就可以针对不同的renderTarget复用root
  4.   layer.renderTarget(target, {root});
  5.   root.program.uniforms.tMap.value = target.texture;
  6.   target.swap();
  7.   layer.renderTarget(target, {root});
  8.   root.program.uniforms.tMap.value = target.texture;
  9.   target.swap();
  10.   layer.renderTarget(target, {root});
  11.   ...
  13. });

默认情况下，执行layer.renderTarget会清空之前缓冲区中的内容，如果我们不希望这么做，可以设置layer.autoClear为false，那么就可以保留缓冲区的内容。