cesium three性能比较_用three.js调试简单的shader

目的是演示在WebGL上跑自制shader(着色器)。 框架使用three.js, 搭建hello world参见:

• three.js

注意，WebGL 1.0使用的shader只支持GLSL 1.0.17, 这是因为WebGL是基于OpenGL ES 2.0的，是给相对于台式机性能较低的手持设备用的。 所以如果在网上找到的GLSL的例子，在WebGL上可能不管用，要注意版本。 GLSL 1.0与现行最高的4版本比起区别还是比较多的，比如老版本里叫attribute, varying的变量到高版本里叫in, out了。 具体WebGL学习参见:

• Learn WebGL

先上代码: Github: demaxism/shader-threejs

使用: git clone代码后进入文件夹, 启动web server, 比如我用node:

http-server .

浏览器打开http://127.0.0.1:8080/后，点击Simple Shader按钮。

代码解释: v_shader和f_shader是我们要加载的vertex shader和fragment shader，以字符串形式保存。 vertex shader的工作比较好理解，是对单个顶点的处理，顶点就是三维模型数据里的顶点。 b