您的位置:首页 > 其它

webGL第二课

2016-07-18 13:05 926 查看
看完论坛的第一个例子之后,论坛网址。发现该作者的系列讲解比老外讲解的好多了,虽然思路和实现方法不一样,但不失为一个入门接触webGL的好教材。还是先了解,再系统性学习。今天进行第二课的学习

概述

该例子介绍了如何给图形绘制颜色。原理和绘制图形是一样的。

一般流程

首先创建着色器。顶点着色器中包含gl_Position变量,片段着色器中包括gl_FragColor变量。

然后将数据通过index绑定到程序对象上。bindAttribLocation(),貌似去掉这一步也没影响。还是不能去掉的,如果定义两个index=0,1,凑巧没有影响,但是如果改为其他数,则必须进行绑定了。在老外教程的第一个例子上,把locationattribute直接当作程序对象的属性来用的。这个属性可以连接到不同的顶点着色器上,即gl_Position。

创建两个数组,并将两个数组传送到webGL中并绑定。

打开index,并将数据流接到index上。

绘制图形。

启示

所以,通过这节课,我们可以创建很多的图形和颜色的源码,也就是像这样的:

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
void main(void)
{
gl_Position = vec4(v3Position, 1.0);
}
</script>


这样,就可以对不同的图形绑定不同的颜色。可以参见老外的example2.

学习webGL编程指南之第六章openGL ES 着色器语言(GLSL ES)

GLSL ES 是GLSL(openGL 着色器语言)的简化版,更高效,减少性能开销。

和C语言非常相似,包括了计算机图形学相关的特性和函数,包括对矢量和矩阵类型的支持。

看起来好熟悉~

学习openGL ES 2.0 Programming Guide之4.Shaders and Programs

Shaders and Programs

看到这句话时,瞬间明白了这俩货的本质The best way to think of a shader object and a program object is by comparison to a C compiler and linker.

原来就是编译器和连接器的作用啊,看来之前的硕士和Intesim确实没白学习。所以,上网查了一下gcc的基础,这里供大家参考

所以,在创建着色器时,用到了shaderSource()和compileShader()两个函数 —-用来把源代码附着并进行编译;

还用到了attachShader()和linkProgram()两个函数—-用来把编译后的对象进行链接,生成可执行代码。

*一个program 对象有且只能有一个顶点着色器对象和一个片段着色器对象。该program对象链接完成之后,即可用于渲染工作。

Uniforms and Attributes

Uniforms are variables that store read-only constant values that are passed in by the application through the OpenGL ES 2.0 API to the shader

离线或在线编译工具? 我们现在例子中用的是在线编译工具,但是也课程某些厂商仅支持二进制码的编辑,所以要提供离线编译工具。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  webgl