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