TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

TWaver 3D实现颜色渐变

Posted on 2014-10-21 13:27 TWaver 阅读(2504) 评论(0)  编辑  收藏

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

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

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

1var 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渐变:

1node.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里面计算得到:

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

只有注册用户登录后才能发表评论。


网站导航: