如何实现TWaver 3D颜色渐变

一般而言，需要实现3D物体的渐变，通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图，这种方式是可以解决这类问题的，不过对于一般用户而言，通过2D生成一张渐变的图片，有一定的难度，另外如果要生成的图片比较多，性能效率上会成为一个瓶颈，特别是渐变随着条件在不断变化的情况下，就需要每次绘制的时候都去生成一张渐变的canvas图，效率极其低。

 

在3D中，另外一种通常的方式就是通过顶点色来实现渐变，然而这种方式对于用户的难度更大，因为需要用户了解3D底层的一些原理，同时需要对于每个物体的顶点结构有深入了解；尽管如此难，这种方式由于受到了顶点数量的限制，其渐变的颜色数量也受到了限制，这是不能接受的一个问题。

由此看来，3D对象实现任意渐变有一定难度。不过，有一个好消息是，对于使用TWaver 3D的用户而言，TWaver 3D从底层封装了一些常用的渐变，用户只需要调用简单的接口，就可以实现3D物体的色彩缤纷。
如果通过TWaver 3D实现渐变，通过一个简单的例子，就可以看出来效果：

1 var box, node;
2          function load() {
3
4              box = new mono.DataBox();
5              var camera = new mono.PerspectiveCamera(30, 1.5, 0.1, 10000);
6              camera.setPosition(0, 200, 500);
7
8              var network = new mono.Network3D(box, camera, myCanvas);
9              var interaction = new mono.DefaultInteraction(network);
10              interaction.zoomSpeed = 10;
11              network.setInteractions([new mono.SelectionInteraction(network), interaction]);
12              mono.Utils.autoAdjustNetworkBounds(network, document.documentElement, 'clientWidth', 'clientHeight', 0, 30);
13
14              var pointLight = new mono.PointLight(0xFFFFFF, 1);
15              pointLight.setPosition(10000, 10000, 10000);
16              box.add(pointLight);
17              box.add(new mono.AmbientLight(0x888888));
18              createGradientNode();
19          }
20
21          function createGradientNode(i) {
22              var node = new mono.Cylinder(30, 30, 60,100);
23              node.setStyle('m.color', 'orange');
24              node.setStyle('side.m.gradient', {
25                  0 : 'red',
26                  1 : 'orange'
27              });
28              node.setStyle('top.m.gradient', {
29                  0 : 'yellow',
30                  1 : 'orange'
31              });
32              node.setStyle('bottom.m.gradient', {
33                  0 : 'yellow',
34                  1 : 'red'
35              });
36              node.setStyle('side.m.gradientType', 2);
37              node.setStyle('top.m.gradientType', 5);
38              node.setStyle('bottom.m.gradientType', 5);
39              box.add(node);
40          }
41
42          function randomSeverity() {
43              var severities = mono.AlarmSeverity.severities;
44              return severities.get(randomInt(severities.size()));
45          };
46
47          function randomInt(n) {
48              return Math.floor(Math.random() * n);
49          };

其中设置节点渐变的代码如下,其中对圆柱体的top，side，bottom 3个面都设置了渐变，top，bottom设置了radial 渐变，side设置了linear渐变：

1 node.setStyle('side.m.gradient', {
2                     0 : 'red',
3                     1 : 'orange'
4                 });
5                 node.setStyle('top.m.gradient', {
6                     0 : 'yellow',
7                     1 : 'orange'
8                 });
9                 node.setStyle('bottom.m.gradient', {
10                     0 : 'yellow',
11                     1 : 'red'
12                 });
13                 node.setStyle('side.m.gradientType', 2);
14                 node.setStyle('top.m.gradientType', 5);
15                 node.setStyle('bottom.m.gradientType', 5);

最终的效果如下：

可以看出，使用TWaver 3D，只需要很少的代码，就能实现效果比较炫的渐变效果。
如果你对于底层的实现比较感兴趣，在此也可以顺便提一下，其实底层的实现是GPU通过物体的UV坐标来实现的渐变，以linear-v渐变方式为例，如果你设置了0的位置是color1 ‘red’,1 的位置是 color2 ‘orange’，那么在任何一个点A上，假定其UV坐标为u，v，其颜色就可以在GPU里面计算得到：

1 finalColor = (v - 0) * color2 + (1 - v) * color1;