彻底理解webgl

javascript很简单,核心点就一个: 一切皆对象. 简单又熟悉.呵呵

这么简单的一句话，理解后，你就掌握了js。

一切皆对象,函数也是对象,创建静态方法 fun.action, 创建实例:new fun。。。

就是这么简单，这么随意。因为简单随意，所以要牢记根本.

下面切入正题, 彻底理解webgl

webgl是干什么的？是一套在cpu上调用在gpu上运行的画三角形工具.

传统的画三角形过程如下 创建实例. 设置顶点，设置样式，调用方法

let shape = new Shape();

shape.beginFill(color);

shape.move(ax, ay)

shape.line(bx, by)

shape.line(cx, cy);

shape.line(ax, ay)

shape.endFill();

webgl基本上也就这个过程

创建变量 var buffer = gl.createBuffer();

设置顶点

　　let positions = [ax,ay,bx,by,cx,cy...];

　　gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

　　gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

设置样式

gl.uniform();

调用方法

　  gl.drawArray();

传统的画三角形方法与gpu画三角形不同的是

传统的画三角形 数据直接存内存中

webgl画三角形

　　　数据是要从内存中传到显示中,并且只能传二进制数据.

　　　gpu自已有一套流程, 设置顶点->设置样式->画三角形.

设置顶点，通过"顶点着色器语言"实现

设置样式, 通过"像素着色器语言"实现

drawcall数

egret的计算方式丑的一逼.

优雅的姿势是给drawelement加个钩子函数, 参见https://github.com/eXponenta/gstatsjs