a23366192007-CSDN博客

原创八、WebGL入门，纹理贴图

本节我们来讲WebGL里面很重要的纹理纹理贴图在游戏开发中十分常见，但是纹理不单单只是一张贴图那么简单。在WebGL中，纹理有多种，一维纹理：就是一条线；二维纹理：一张二维图片；二维纹理数组：由多张二维图片组成；还有三维纹理，立体纹理，本节主要介绍二维纹理在早期的OpenGL中，只支持图片大小为2^n的纹理，但现在支持，但是最好用大小为2^n的纹理，这样效率会比较高先看

2016-04-27 21:59:36 8111

原创七、WebGL入门，正交投影，坐标变换初探

我们之前几节当中，绘制的物体的位置坐标的范围是[-1,1]，超过这个范围的部分将不可见，那么如何看到范围之外的部分呢，这就需要用到投影操作。说到投影，我们就不得不说下WebGL里面的6大坐标系（同OpenGL）:1. Object or model coordinates(物体或模型坐标系)2. World coordinates（世界坐标系）3. Eye (or Ca

2016-03-09 21:18:48 3331

原创六、WebGL入门，动画

本节将以前的内容整合下，为以后的章节打基础。本节主要内容是让我们绘制的图形动起来。图形动起来的原理是每一帧都绘制下面是代码的整体结构： //变量 var webgl = null;//WebGL对象 var vertexShaderObject = null;//vsShader对象 var fragmentShaderObject = nul

2016-01-22 20:57:06 1513

原创五、WebGL入门，shader剖析

WebGL用的shader语言是glsl(OpenGL Shading Language),shader的主要工作有：1. 利用视图和投影矩阵对点的位置进行变化2. 如果需要利用法线的时候，也同样需要利用视图矩阵对其进行转换3. 纹理坐标的产生和转换4. 顶点的光照或者象素光照的计算5. 颜色计算 1-4在后面会详细的介绍，本节我们利

2016-01-20 19:41:46 4387

原创四、WebGL入门，索引缓冲区

这一节简单的介绍下索引缓冲区先看一个问题，绘制如下一个矩形：按照之前所学的的方法需要6个顶点数据，代码如下： var jsArrayData = [ //x y z -0.5, +0.5, 0.0, //0

2016-01-19 16:36:02 2159 1

翻译三、WebGL入门，顶点缓冲区

我们在接下来的学习中，我们主要会了解到一下一些知识点：顶点缓冲区索引缓冲区纹理帧缓冲深度缓冲颜色缓冲模型缓冲模型矩阵观察矩阵投影矩阵视口本节先介绍顶点缓冲区顶点缓冲区的使用步骤：创建缓冲区绑定缓冲区到WebGL对象传入数据到缓冲区1 ，createBuffer() triangleBuffer = webgl.crea

2016-01-17 21:12:48 6383

原创二、WebGL入门，基本开发流程

WebGL的标准来自于OpenGLES2.0,而OpenGLES2.0来自于纯可编程管线技术，有别与以前OpenGL的固定管线技术，可编程管线技术更加灵活，效率更高，但是对开发人员的要求更高。比如：以前光照只需要调几个函数就行，现在则需要写比较底层的东西，如怎么反射，怎么折射等等。本节通过绘制一个三角形来介绍下WebGL的基本开发流程。废话不多说先上代码： webgl-less

2016-01-17 15:43:04 2576 2

原创一、WebGL入门的开始

一直对WebGL很感兴趣，但一直没时间学习，现在总算有了点时间。这也是鄙人第一次写博客，写的得不好望指正。我比较喜欢先看效果，再分析代码。代码如下： webgl-lesson1 var webgl = null; function Init() { var canvas = document.getElementById("myCanvas");

2016-01-15 19:15:19 2608

a23366192007的博客