webGL第二课
2016-07-18 13:05
926 查看
看完论坛的第一个例子之后,论坛网址。发现该作者的系列讲解比老外讲解的好多了,虽然思路和实现方法不一样,但不失为一个入门接触webGL的好教材。还是先了解,再系统性学习。今天进行第二课的学习
然后将数据通过index绑定到程序对象上。bindAttribLocation(),貌似去掉这一步也没影响。还是不能去掉的,如果定义两个index=0,1,凑巧没有影响,但是如果改为其他数,则必须进行绑定了。在老外教程的第一个例子上,把locationattribute直接当作程序对象的属性来用的。这个属性可以连接到不同的顶点着色器上,即gl_Position。
创建两个数组,并将两个数组传送到webGL中并绑定。
打开index,并将数据流接到index上。
绘制图形。
这样,就可以对不同的图形绑定不同的颜色。可以参见老外的example2.
和C语言非常相似,包括了计算机图形学相关的特性和函数,包括对矢量和矩阵类型的支持。
看起来好熟悉~
看到这句话时,瞬间明白了这俩货的本质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
离线或在线编译工具? 我们现在例子中用的是在线编译工具,但是也课程某些厂商仅支持二进制码的编辑,所以要提供离线编译工具。
概述
该例子介绍了如何给图形绘制颜色。原理和绘制图形是一样的。一般流程
首先创建着色器。顶点着色器中包含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利用FBO完成立方体贴图效果完整实例(附demo源码下载)
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
- Three.js / DOC (一) 创建一个场景
- 工作总结-摸水游戏制作
- three js相关的文档
- 翻译 Cesium入门教程(一)------环境配置 Hello World
- 翻译 Cesium入门教程(二)------图层 Imagery Layers
- Cesium教程番外篇--自定义Geometry(一)
- three.js 学习笔记之 混乱的矩阵
- WebGL and WebSocket
- WebGL and WebSocket
- 页游逆袭,WebGL让网页游戏终于用上本地显卡了!
- webgl学习笔记1--如何绘制一个基本图形
- webgl学习笔记2--图形绘制的几个重要方法详解
- Cesium教程番外篇--自定义Geometry(一)
- threejs使用概述
- webgl入门
- Three.js API文档
- webGL背景知识
- three.js 性能插件stats简单用法