模型

前面我们已经看到过，只要给元素传入一组顶点，就可以渲染出来。这一组顶点的数据，就是元素的模型 model。

但是实际上只有顶点是不够的，如果我们要比较逼真的点光源漫反射效果，还要计算出每个面的法向量 normal。

  1. const {Scene} = spritejs;
  2. const {Mesh3d, shaders} = spritejs.ext3d;
  3. const container = document.getElementById('container');
  4. const scene = new Scene({
  5.   container,
  6.   width: 600,
  7.   height: 600,
  8. });
  9. const layer = scene.layer3d('fglayer', {
  10.   camera: {
  11.     fov: 35,
  12.     z: 8,
  13.   },
  14. });
  16. const program = layer.createProgram({
  17.   ...shaders.NORMAL,
  18.   cullFace: null,
  19. });
  21. function normalize(v) {
  22.   const len = Math.hypot(...v);
  23.   return [v[0] / len, v[1] / len, v[2] / len];
  24. }
  26. // 两个向量的叉积就是这个向量的法向量
  27. function getNormal(a, b, c) {
  28.   const ab = [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
  29.   const bc = [b[0] - c[0], b[1] - c[1], b[2] - c[2]];
  31.   return normalize([
  32.     ab[1] * bc[2] - ab[2] * bc[1],
  33.     ab[0] * bc[2] - ab[2] * bc[0],
  34.     ab[0] * bc[1] - ab[1] * bc[0],
  35.   ]);
  36. }
  38. const p = 1 / Math.sqrt(2);
  40. const position = [
  41.   -1, 0, -p,
  42.   1, 0, -p,
  43.   0, 1, p,
  44.   -1, 0, -p,
  45.   1, 0, -p,
  46.   0, -1, p,
  47.   1, 0, -p,
  48.   0, -1, p,
  49.   0, 1, p,
  50.   -1, 0, -p,
  51.   0, 1, p,
  52.   0, -1, p,
  53. ];
  55. const normal = [];
  57. for(let i = 0; i < position.length; i += 9) {
  58.   const a = [position[i], position[i + 1], position[i + 2]],
  59.     b = [position[i + 3], position[i + 4], position[i + 5]],
  60.     c = [position[i + 6], position[i + 7], position[i + 8]];
  62.   const norm = getNormal(a, b, c);
  63.   normal.push(...norm, ...norm, ...norm);
  64. }
  66. const model = {
  67.   position,
  68.   normal,
  69. };
  71. const sprite = new Mesh3d(program, {
  72.   model,
  73. });
  74. layer.append(sprite);
  76. sprite.animate([
  77.   {rotateY: 0},
  78.   {rotateY: 360},
  79. ], {
  80.   duration: 7000,
  81.   iterations: Infinity,
  82. });
  84. sprite.animate([
  85.   {rotateZ: 0},
  86.   {rotateZ: 360},
  87. ], {
  88.   duration: 17000,
  89.   iterations: Infinity,
  90. });
  92. sprite.animate([
  93.   {rotateX: 0},
  94.   {rotateX: -360},
  95. ], {
  96.   duration: 11000,
  97.   iterations: Infinity,
  98. });
  100. layer.setOrbit();

我们可以通过两个向量的叉积计算出这两个向量所在平面的法向量。

不过这样计算顶点和法向量也挺麻烦的，所以3D扩展内置了一些几何体，直接创建这些几何体的元素，就不用自己手动计算了。

目前支持的内置几何体包括以下几类：

  • Cube - 立方体
  • Cylinder - 圆柱体
  • Plane - 平面
  • Sphere - 球体

你可以像操作普通的2D元素那样给这些对象设置属性，比如：

  1. cube.attr({
  2.   width: 1.0,
  3.   height: 0.5,
  4.   depth: 0.5,
  5. });

批量绘制

我们可以通过给program传额外的attribute来做一些特别的事情，如果我们传的数据对象有instanced属性，那么引擎会启用批量绘制。

要动态传给元素model数据，我们可以在创建program的时候传入一个attributes配置，这个配置的内容是一组getter。

  1. const fragment = `
  2.   precision highp float;
  3.   precision highp int;
  5.   varying vec3 vNormal;
  6.   varying vec4 vColor;
  8.   uniform vec4 lighting;
  10.   void main() {
  11.     vec3 normal = normalize(vNormal);
  12.     float l = dot(normal, normalize(lighting.xyz));
  13.     gl_FragColor.rgb = vColor.rgb + l * lighting.w;
  14.     gl_FragColor.a = vColor.a;
  15.   }
  16. `;
  17. const vertex = `
  18.   precision highp float;
  19.   precision highp int;
  21.   attribute vec3 position;
  22.   attribute vec3 normal;
  23.   attribute vec4 color;
  24.   attribute vec3 offset;
  25.   attribute vec2 random;
  27.   uniform mat4 modelViewMatrix;
  28.   uniform mat4 projectionMatrix;
  29.   uniform mat3 normalMatrix;
  31.   varying vec3 vNormal;
  32.   varying vec4 vColor;
  34.   void rotate2d(inout vec2 v, float a){
  35.     mat2 m = mat2(cos(a), -sin(a), sin(a),  cos(a));
  36.     v = m * v;
  37.   }
  39.   void main() {
  40.     vNormal = normalize(normalMatrix * normal);
  41.     vColor = color;
  42.     vec3 pos = position;
  43.     rotate2d(pos.xz, random.x * 6.28);
  44.     rotate2d(pos.xy, random.y * 6.28);
  45.     gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0) + vec4(offset, 1.0);
  46.   }    
  47. `;
  49. const {Scene} = spritejs;
  50. const {Cube} = spritejs.ext3d;
  51. const container = document.getElementById('container');
  52. const scene = new Scene({
  53.   container,
  54.   displayRatio: 2,
  55. });
  56. const layer = scene.layer3d('fglayer', {
  57.   camera: {
  58.     fov: 35,
  59.     pos: [0, 0, 7],
  60.   },
  61. });
  62. layer.camera.lookAt([0, -0.5, 0]);
  64. const program = layer.createProgram({
  65.   vertex,
  66.   fragment,
  67.   cullFace: null,
  68.   uniforms: {
  69.     lighting: {value: [-0.3, 0.8, 0.6, 0.1]},
  70.   },
  71. }, {
  72.   attributes: {
  73.     offset(node, geometry) {
  74.       const data = new Float32Array(5 * 5 * 3);
  75.       for(let i = 0; i < 5; i++) {
  76.         const p = -5 + 2 * i;
  77.         for(let j = 0; j < 5; j++) {
  78.           const q = -5 + 2 * j;
  79.           data.set([p, q, 0], (i * 5 + j) * 3);
  80.         }
  81.       }
  82.       return {instanced: 1, size: 3, data};
  83.     },
  84.     random(node, geometry) {
  85.       const data = new Float32Array(5 * 5 * 2);
  86.       for(let i = 0; i < 25; i++) {
  87.         data.set([Math.random() * 2 - 1, Math.random() * 2 - 1], i * 2);
  88.       }
  89.       return {instanced: 1, size: 2, data};
  90.     },
  91.   },
  92. });
  94. const cube = new Cube(program);
  95. cube.attributes.pos = [0, 0, 0];
  96. cube.attributes.colors = 'red red blue blue orange orange';
  97. cube.attributes.scale = 0.5;
  98. layer.append(cube);
  99. cube.animate([
  100.   {rotateY: 0},
  101.   {rotateY: -360},
  102. ], {
  103.   duration: 5000,
  104.   iterations: Infinity,
  105. });

共享模型

有时候，我们要创建许多个相同模型的对象，如果我们直接将model传给这些对象，那么它们之间的数据是不共享的，也就是说，我们可以改变一个元素的几何体数据，不会影响另一个元素。

但是，如果我们确定它们可以共享几何形状，那么我们可以先创建Geometry对象：

  1. const model = {
  2.   position,
  3.   normal,
  4. };
  6. const geometry = new Geometry({
  7.   position: {size: 3, data: new Float32Array(model.position)},
  8.   normal: {size: 3, data: new Float32Array(model.normal)},
  9. });
  11. const s1 = new Mesh3d(program, {model: geometry});
  12. const s2 = new Mesh3d(program, {model: geometry}); // s1、s2 共享几何形状

如果要创建很多个元素，共享几何形状能够减少内存消耗。

💡如果使用cloneNode，被clone的对象和clone对象会自动共享几何形状。

如果我们要取消几何形状的共享（因为共享几何形状如果改变颜色，所有的元素会一起改变），我们可以调用对应元素的remesh方法，该方法刷新它的geometry和mesh信息。