如何实现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;