WebGL基础实践-下

// 设置浮点数精度为中等
precision mediump float;
 
// attribute: 从缓冲区接收数据
attribute vec2 a_Position;      // 接收顶点位置坐标
attribute vec2 a_Screen_Size;   // 接收 canvas 尺寸
attribute vec2 a_Uv;            // 接收顶点对应的 UV 坐标
 
// varying: 将数据从顶点着色器传递到片元着色器
varying vec2 v_Uv;              // 将 UV 坐标传递给片元着色器
 
void main() {
    // 将屏幕坐标转换为裁剪空间坐标
    vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
    position = position * vec2(1.0, -1.0);
 
    gl_Position = vec4(position, 0.0, 1.0);
 
    // 将接收到的 UV 坐标赋值给 varying 变量
    v_Uv = a_Uv;
}

// 设置浮点数精度为中等
precision mediump float;
 
// varying: 接收从顶点着色器传递过来的插值后的 UV 坐标
varying vec2 v_Uv;
 
// uniform: 接收来自 JavaScript 的纹理单元
uniform sampler2D u_Texture;
 
void main() {
    // texture2D(sampler, coord): 从 sampler (纹理) 的 coord (UV坐标) 处进行颜色采样
    gl_FragColor = texture2D(u_Texture, v_Uv);
}

function createAndSetupTexture(gl, image) {
  // 1. 创建纹理对象
  const texture = gl.createTexture()
 
  // 2. 激活指定的纹理单元
  // WebGL 允许我们同时使用多个纹理，通过纹理单元来区分
  // gl.TEXTURE0, gl.TEXTURE1, ..., gl.TEXTUREN
  gl.activeTexture(gl.TEXTURE0)
 
  // 3. 绑定纹理对象到目标
  // gl.TEXTURE_2D 表示这是一个二维纹理
  gl.bindTexture(gl.TEXTURE_2D, texture)
 
  // 4. 配置纹理参数
  // a. 设置图片在xy轴方向的重复/拉伸方式
  // gl.REPEAT: 重复
  // gl.CLAMP_TO_EDGE: 边缘拉伸
  // gl.MIRRORED_REPEAT: 镜像重复
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
 
  // b. 设置图片放大或缩小时的滤波（插值）算法
  // gl.LINEAR: 线性插值，效果平滑
  // gl.NEAREST: 最近点采样，效果锐利但可能产生像素感
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
 
  // 5. 将图片数据上传到 GPU
  // gl.texImage2D(target, level, internalformat, format, type, source);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
 
  // 6. 将纹理单元编号传递给着色器中的 sampler2D uniform 变量
  const u_Texture = gl.getUniformLocation(gl.program, "u_Texture")
  gl.uniform1i(u_Texture, 0) // 0 对应 gl.TEXTURE0
}
 
// --- 在你的主程序中 ---
 
// 定义包含位置和 UV 坐标的顶点数据
// 矩形由两个三角形组成，共 6 个顶点
const vertices = new Float32Array([
  // -- 顶点位置 --   -- UV 坐标 --
  30,
  30,
  0.0,
  0.0, // V0
  30,
  300,
  0.0,
  1.0, // V1
  300,
  300,
  1.0,
  1.0, // V2
 
  30,
  30,
  0.0,
  0.0, // V0
  300,
  300,
  1.0,
  1.0, // V2
  300,
  30,
  1.0,
  0.0 // V3
])
 
// ... 创建并绑定缓冲区，设置 vertexAttribPointer ...
 
// 加载图片并设置回调
const image = new Image()
image.crossOrigin = "anonymous"
image.onload = () => {
  // 在图片加载完成后创建纹理并绘制
  createAndSetupTexture(gl, image)
  gl.drawArrays(gl.TRIANGLES, 0, 6)
}
image.src = "path/to/your/image.png"

// 伪代码
gl_Position = u_ProjectionMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;

//顶点信息
var positions = [
 30, 30, 1, 0, 0, 1, //V0
 30, 300, 1, 0, 0, 1, //V1
 300, 300, 1, 0, 0, 1, //V2
 30, 30, 1, 0, 0, 1, //V0
 300, 300, 1, 0, 0, 1, //V2
 300, 30, 1, 0, 0, 1 //V3
]

//顶点信息
var positions = [
 30, 30, 1, 0, 0, 1, //V0，红色
 30, 300, 0, 1, 0, 1, //V1，绿色
 300, 300, 0, 1, 0, 1, //V2，绿色
 30, 30, 1, 1, 0, 1, //V4，黄色
 300, 300, 1, 1, 0, 1,//V5，黄色
 300, 30, 0, 0, 1, 1 //V3，蓝色
]

 //正方体 8 个顶点的坐标信息
let zeroX = 0.5;
let zeroY = 0.5;
let zeroZ = 0.5;
let positions = [
 [-zeroX, -zeroY, zeroZ], //V0
 [zeroX, -zeroY, zeroZ], //V1
 [zeroX, zeroY, zeroZ], //V2
 [-zeroX, zeroY, zeroZ], //V3
 [-zeroX, -zeroY, -zeroZ],//V4
 [-zeroX, zeroY, -zeroZ], //V5
 [zeroX, zeroY, -zeroZ], //V6
 [zeroX, -zeroY, -zeroZ] //V7
]

const CUBE_FACE_INDICES = [
 [0, 1, 2, 3], //前面
 [4, 5, 6, 7], //后面
 [0, 3, 5, 4], //左面
 [1, 7, 6, 2], //右面
 [3, 2, 6, 5], //上面
 [0, 4, 7, 1] // 下面
];

const FACE_COLORS = [
 [1, 0, 0, 1], // 前面，红色
 [0, 1, 0, 1], // 后面，绿色
 [0, 0, 1, 1], // 左面，蓝色
 [1, 1, 0, 1], // 右面，黄色
 [1, 0, 1, 1], // 上面，品色
 [0, 1, 1, 1] // 下面，青色
]

function createCube(width, height, depth) {
 let zeroX = width / 2;
 let zeroY = height / 2;
 let zeroZ = depth / 2;
 
 let cornerPositions = [
 [-zeroX, -zeroY, -zeroZ],
 [zeroX, -zeroY, -zeroZ],
 [zeroX, zeroY, -zeroZ],
 [-zeroX, zeroY, -zeroZ],
 [-zeroX, -zeroY, zeroZ],
 [-zeroX, zeroY, zeroZ],
 [zeroX, zeroY, zeroZ],
 [zeroX, -zeroY, zeroZ]
 ];
 let colorInput = [
 [255, 0, 0, 1],
 [0, 255, 0, 1],
 [0, 0, 255, 1],
 [255, 255, 0, 1],
 [0, 255, 255, 1],
 [255, 0, 255, 1]
 ];
 
 let colors = [];
 let positions = [];
 var indices = [];
 
 for (let f = 0; f < 6; ++f) {
 let faceIndices = CUBE_FACE_INDICES[f];
 let color = colorInput[f];
 for (let v = 0; v < 4; ++v) {
 let position = cornerPositions[faceIndices[v]];
 positions = positions.concat(position);
 colors = colors.concat(color);
 }
 let offset = 4 * f;
 indices.push(offset + 0, offset + 1, offset + 2);
 indices.push(offset + 0, offset + 2, offset + 3);
 }
 indices = new Uint16Array(indices);
 positions = new Float32Array(positions);
 colors = new Float32Array(colors);
 return {
 positions: positions,
 indices: indices,
 colors: colors
 };
}

var cube = createCube(1, 1, 1);

//返回一个单位矩阵
function identity() {}
//计算两个矩阵的乘积，返回新的矩阵。
function multiply(matrixLeft, matrixRight){}
//绕 X 轴旋转一定角度，返回新的矩阵。
function rotationX(angle) {}
//绕 Y 轴旋转一定角度，返回新的矩阵。
function rotateY(m, angle) {}
//正交投影，返回新的矩阵
function ortho(left, right, bottom, top, near, far, target) {}

 // 接收顶点坐标 (x, y, z)
 precision mediump float;
 attribute vec3 a_Position;
 attribute vec4 a_Color;
 varying vec4 v_Color;
 uniform mat4 u_Matrix;
 void main(){
 gl_Position = u_Matrix * vec4(a_Position, 1);
 v_Color = a_Color;
 }

//生成单位矩阵
var initMatrix = matrix.identify();
var currentMatrix = null;
var xAngle = 0;
var yAngle = 0;
var deg = Math.PI / 180;
function animate(e) {
 if (timer) {
 clearInterval(timer);
 timer = null;
 } else {
 timer = setInterval(() => {
 xAngle += 1;
 yAngle += 1;
 
 currentMatrix = matrix.rotationX(deg * xAngle);
 currentMatrix = matrix.rotateY(currentMatrix, deg * yAngle);
 gl.uniformMatrix4fv(u_Matrix, false, currentMatrix);
 render(gl);
 }, 50);
 }
 }

function createSphere(radius, divideByYAxis, divideByCircle) {
 let yUnitAngle = Math.PI / divideByYAxis;
 let circleUnitAngle = (Math.PI * 2) / divideByCircle;
 let positions = [];
 for (let i = 0; i <= divideByYAxis; i++) {
 let yValue = radius * Math.cos(yUnitAngle * i);
 let yCurrentRadius = radius * Math.sin(yUnitAngle * i);
 
 for (let j = 0; j <= divideByCircle; j++) {
 let xValue = yCurrentRadius * Math.cos(circleUnitAngle * j);
 let zValue = yCurrentRadius * Math.sin(circleUnitAngle * j);
 positions.push(xValue, yValue, zValue);
 }
 }
 
 let indices = [];
 let circleCount = divideByCircle + 1;
 for (let j = 0; j < divideByCircle; j++) {
 for (let i = 0; i < divideByYAxis; i++) {
 indices.push(i * circleCount + j);
 indices.push(i * circleCount + j + 1);
 indices.push((i + 1) * circleCount + j);
 
 indices.push((i + 1) * circleCount + j);
 indices.push(i * circleCount + j + 1);
 indices.push((i + 1) * circleCount + j + 1);
 }
 }
 return {
 positions: new Float32Array(positions),
 indices: new Uint16Array(indices)
 };
}

function transformIndicesToUnIndices(vertex) {
 let indices = vertex.indices;
 let vertexsCount = indices.length;
 let destVertex = {};
 
 Object.keys(vertex).forEach(function(attribute) {
 if (attribute == 'indices') {
 return;
 }
 let src = vertex[attribute];
 let elementsPerVertex = getElementsCountPerVertex(attribute);
 let dest = [];
 let index = 0;
 for (let i = 0; i < indices.length; i++) {
 for (let j = 0; j < elementsPerVertex; j++) {
 dest[index] = src[indices[i] * elementsPerVertex + j];
 index++;
 }
 }
 let type = getArrayTypeByAttribName();
 destVertex[attribute] = new type(dest);
 });
 return destVertex;
}

function createColorForVertex(vertex) {
 let vertexNums = vertex.positions;
 let colors = [];
 let color = {
 r: 255,
 g: 0,
 b: 0
 };
 
 for (let i = 0; i < vertexNums.length; i++) {
 if (i % 36 == 0) {
 color = randomColor();
 }
 colors.push(color.r, color.g, color.b, 255);
 }
 
 vertex.colors = new Uint8Array(colors);
 return vertex;
}

function createCone(
 topRadius,
 bottomRadius,
 height,
 bottomDivide,
 verticalDivide
) {
 
 let vertex = {};
 let positions = [];
 let indices = [];
 
 for (let i = -1; i <= verticalDivide + 1; i++) {
 let currentRadius = 0;
 if (i > verticalDivide) {
 currentRadius = topRadius;
 } else if (i < 0) {
 currentRadius = bottomRadius;
 } else {
 currentRadius =
 bottomRadius + (topRadius - bottomRadius) * (i / verticalDivide);
 }
 let yValue = (height * i) / verticalDivide - height / 2;
 if (i == -1 || i == verticalDivide + 1) {
 currentRadius = 0;
 if (i == -1) {
 yValue = -height / 2;
 } else {
 yValue = height / 2;
 }
 }
 
 for (let j = 0; j <= bottomDivide; j++) {
 let xValue = currentRadius * Math.sin((j * Math.PI * 2) / bottomDivide);
 var zValue = currentRadius * Math.cos((j * Math.PI * 2) / bottomDivide);
 positions.push(xValue, yValue, zValue);
 }
 }
 
 // indices
 let vertexCountPerRadius = bottomDivide + 1;
 for (let i = 0; i < verticalDivide + 2; i++) {
 for (let j = 0; j < bottomDivide; j++) {
 indices.push(i * vertexCountPerRadius + j);
 indices.push(i * vertexCountPerRadius + j + 1);
 indices.push((i + 1) * vertexCountPerRadius + j + 1);
 
 indices.push(
 vertexCountPerRadius * (i + 0) + j,
 vertexCountPerRadius * (i + 1) + j + 1,
 vertexCountPerRadius * (i + 1) + j
 );
 }
 }
 
 vertex.positions = new Float32Array(positions);
 vertex.indices = new Uint16Array(indices);
 return vertex;
}

let coneVertex = createCone(6, 0, 12, 12, 12);

let coneVertex = createCone(4, 4, 12, 12, 12);

let coneVertex = createCone(6, 3, 12, 12, 12);

//模型类
function Model(bufferInfo, uniforms ){
 this.uniforms = uniforms || {};
 this.u_Matrix = matrix.identity();
 this.bufferInfo = bufferInfo || {};
 
 // 偏移
 this.translation = [0, 0, 0];
 // 旋转角度
 this.rotation = [0, 0, 0];
 // 缩放
 this.scalation = [1, 1, 1];
}

bufferInfo = {
 attributes:{
 a_Positions: {
 buffer: buffer,
 type: gl.FLOAT,
 normalize: false,
 numsPerElement: 4,
 },
 a_Colors:{
 buffer:buffer,
 type: gl.UNSIGNED_BYTE,
 normalize: true,
 numsPerElement: 4
 },
 a_Normals:{
 buffer:buffer,
 type: gl.FLOAT,
 normalize: false,
 numsPerElement: 3
 },
 a_Texcoords:{
 buffer:buffer,
 type: gl.FLOAT,
 normalize: false,
 numsPerElement: 2
 }
 },
 indices:[],
 elementsCount: 30
}

Model.prototype.setBufferInfo = function(bufferInfo){
 this.bufferInfo = bufferInfo || {};
}

let vertexObject = {
 positions: [],
 normals: [],
 texcoords: [],
 indices: [],
 colors: []
}

Model.prototype.translate = function(tx, ty, tz){
 this.translateX(tx);
 this.translateY(ty);
 this.translateZ(tz);
}
Model.prototype.translateX = function(tx){
 this.translation[0] = tx || 0;
}
Model.prototype.translateY = function(ty){
 this.translation[1] = ty || 0;
}
Model.prototype.translateZ = function(tz){
 this.translation[2] = tz || 0;
}

Model.prototype.scale = function(sx, sy, sz){
 this.scaleX(sx);
 this.scaleY(sy);
 this.scaleZ(sz);
}
Model.prototype.scaleX = function(sx){
 this.scalation[0] = sx || 1;
}
Model.prototype.scaleY = function(sy){
 this.scalation[1] = sy || 1;
}
Model.prototype.scaleZ = function(sz){
 this.scalation[2] = sz || 1;
}

Model.prototype.rotate = function(rx, ry, rz){
 this.rotateX(rx);
 this.rotateY(ry);
 this.rotateZ(rz);
}
Model.prototype.rotateX = function(rx){
 this.rotation[0] = rx || 0;
}
Model.prototype.rotateY = function(ry){
 this.rotation[1] = ry || 0;
}
Model.prototype.rotateZ = function(rz){
 this.rotation[2] = rz || 0;
}

Model.prototype.preRender = function( viewMatrix, projectionMatrix){
 let modelMatrix = matrix.identity();
 if (this.translation) {
 modelMatrix = matrix.translate(
 modelMatrix,
 this.translation[0],
 this.translation[1],
 this.translation[2]
 );
 }
 if (this.rotation) {
 if (this.rotation[0] !== undefined)
 modelMatrix = matrix.rotateX(modelMatrix, degToRadians(this.rotation[0]));
 if (this.rotation[1] !== undefined)
 modelMatrix = matrix.rotateY(modelMatrix, degToRadians(this.rotation[1]));
 if (this.rotation[2] !== undefined)
 modelMatrix = matrix.rotateZ(modelMatrix, degToRadians(this.rotation[2]));
 }
 if (this.scalation) {
 modelMatrix = matrix.scale(
 modelMatrix,
 this.scalation[0],
 this.scalation[1],
 this.scalation[2]
 );
 }
 
 this.u_ModelMatrix = modelMatrix;
 
 //重新计算 MVP 矩阵
 
 this.u_Matrix = matrix.multiply(viewMatrix, this.u_ModelMatrix);
 this.u_Matrix = matrix.multiply(projectionMatrix, this.u_Matrix);
}

bufferInfo = {
 colors: [],
 positions: [],
 normals: [],
 indices: [],
 texcoords: []
}

attribute vec4 a_Positions;
attribute vec3 a_Normals;
attribute vec2 a_Texcoords;
attribute vec4 a_Colors;

let attributesCount = gl.getProgramParameter(program, param);

for(let i = 0; i< attributesCount; i++){
 let attributeInfo = gl.getActiveAttrib(program, i);
}

let attributeIndex = gl.getAttribLocation(program, attributeInfo.name);

function createAttributeSetter(attributeIndex){
 return function(bufferInfo){
 gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.buffer);
 gl.enableVertexAttribArray(attributeIndex);
 gl.vertexAttribPointer(
 attributeIndex,
 bufferInfo.numsPerElement || bufferInfo.size,
 bufferInfo.type || gl.FLOAT,
 bufferInfo.normalize || false,
 bufferInfo.stride || 0,
 bufferInfo.offset || 0
 );
 }
}

let attributeSetter = {};
for(let i = 0; i< attributesCount; i++){
 let attributeInfo = gl.getActiveAttrib(program, i);
 let attributeIndex = gl.getAttribLocation(program, attributeInfo.name);
 attributeSetter[attributeInfo.name] = createAttributeSetter(attributeIndex);
}
return attributeSetter;

let uniformsCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);

let uniformSetters = {};
for(let i = 0; i< uniformsCount; i++){
 let uniformInfo = gl.getActiveUniform(program, i);
 if (!uniformInfo) {
 break;
 }
 let name = uniformInfo.name;
 if (name.substr(-3) === '[0]') {
 name = name.substr(0, name.length - 3);
 }
 var setter = createUniformSetter(program, uniformInfo);
 uniformSetters[name] = setter;
}

let enums = {
 FLOAT_VEC2: {
 value: 0x8B50,
 setter: function(location, v){
 gl.uniform2fv(location, v);
 }
 },
 FLOAT_VEC3: {
 value: 0x8B51,
 setter: function(location, v){
 gl.uniform3fv(location, v);
 }
 },
 FLOAT_VEC4: {
 value: 0x8B52,
 setter: function(location, v){
 gl.uniform3fv(location, v);
 }
 },
 INT_VEC2: {
 value: 0x8B53,
 setter: function(location, v){
 gl.uniform2iv(location, v);
 }
 },
 INT_VEC3: {
 value: 0x8B54,
 setter: function(location, v){
 gl.uniform3iv(location, v);
 }
 },
 INT_VEC4: {
 value: 0x8B55,
 setter: function(location, v){
 gl.uniform4iv(location, v);
 }
 },
 BOOL: {
 value: 0x8B56,
 setter: function(location, v){
 gl.uniform1iv(location, v);
 }
 },
 BOOL_VEC2: {
 value: 0x8B57,
 setter: function(location, v){
 gl.uniform2iv(location, v);
 }
 },
 BOOL_VEC3: {
 value: 0x8B58,
 setter: function(location, v){
 gl.uniform3iv(location, v);
 }
 },
 BOOL_VEC4: {
 value: 0x8B59,
 setter: function(location, v){
 gl.uniform4iv(location, v);
 }
 },
 FLOAT_MAT2: {
 value: 0x8B5A,
 setter: function(location, v){
 gl.uniformMatrix2fv(location, false, v);
 }
 },
 FLOAT_MAT3: {
 value: 0x8B5B,
 setter: function(location, v){
 gl.uniformMatrix3fv(location, false, v);
 }
 },
 FLOAT_MAT4: {
 value: 0x8B5C,
 setter: function(location, v){
 gl.uniformMatrix4fv(location, false, v);
 }
 },
 SAMPLER_2D: {
 value: 0x8B5E,
 setter: function(location, texture){
 gl.uniform1i(location, 0);
 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, texture);
 }
 },
 SAMPLER_CUBE: {
 value: 0x8B60,
 setter: function(location, texture){
 gl.uniform1i(location, 0);
 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
 }
 },
 
 INT: {
 value: 0x1404,
 setter: function(location, v){
 gl.uniform1i(location, v);
 }
 },
 
 FLOAT: {
 value: 0x1406,
 setter: function(location, v){
 gl.uniform1f(location, v);
 }
 }
};

function createUniformSetter(gl, program, uniformInfo) {
 let uniformLocation = gl.getUniformLocation(program, uniformInfo.name);
 let type = uniformInfo.type;
 let isArray = uniformInfo.size > 1 && uniformInfo.name.substr(-3) === '[0]';
 
 if(isArray && type == enums.INT.value){
 return function(v) {
 gl.uniform1iv(uniformLocation, v);
 };
 }
 if(isArray && type == enums.FLOAT.value){
 return function(v) {
 gl.uniform1fv(uniformLocation, v);
 };
 }
 return function createSetter(v){
 return enums[getKeyFromType(type)].setter(uniformLocation, v)
 }
}

// 渲染列表
let renderList = new List();
// 模型列表
let modelList = new List();
 
// 列表类
function List(list){
 this.list = list || [];
 this.uuid = list.length;
}
// 添加对象
List.prototype.add = function(object){
 object.uuid = this.uuid;
 this.list.push(object);
 this.uuid++;
}
// 删除对象
List.prototype.remove = function(object){
 this.list.splice(object.uuid, 1);
}
// 查找对象
List.prototype.get = function(index){
 return this.list[index];
}
// 遍历列表
List.prototype.forEach = function(callback){
 return this.list.forEach(callback);
}

let modelObject={
 // 偏移状态
 translation:[0, 0, 0],
 // 缩放状态
 scalation:[1, 1, 3],
 // 旋转状态
 rotation:[30, 60, 100],
 bufferInfo:{
 // 顶点属性
 attributes:{
 // 顶点坐标
 a_Position: {
 buffer: [],
 type: gl.FLOAT,
 normalize: false,
 numsPerElement: 4
 },
 ...
 },
 // 顶点索引
 indices: [],
 // 顶点数量
 elementsCount: 30
 },
 uniforms: {
 // MVP 矩阵
 u_Matrix: ...,
 // 模型矩阵
 u_ModelMatrix: ...,
 // 法向量矩阵
 u_NormalMatrix: ...,
 // 全局光照
 u_LightColor: ...,
 ...
 }
}

let renderObject = {
 // 模型
 bufferInfo: modelObject.bufferInfo,
 program: program,
 uniforms: modelObject.uniforms,
}

let cube = createCube(5, 5, 5);
let cubeModel = new Model(cube);
objectList.add(cubeModel);
let renderObject= {
 program: program,
 model: cubeModel,
 primitive: 'TRIANGLES',
 renderType: 'drawArrays'
}
renderList.add(renderObject);

objectList.forEach(function(modelObject){
 // 计算相关 uniforms 属性。
 modelObject.preRender();
})
renderList.forEach(function(renderObject){
 let bufferInfo = renderObject.model.bufferInfo;
 let uniforms = renderObject.model.uniforms;
 let program = renderObject.program;
 // 往顶点缓冲区传递数据
 setBufferInfos(gl, program, bufferInfo);
 // 设置 uniforms 变量。
 setUniforms(gl, program, uniforms);
 // 绘制
 if (renderObject.renderType === 'drawElements') {
 if (bufferInfo.indices) {
 gl.drawElements(renderObject.primitive, bufferInfo.indices.length, gl.UNSIGNED_SHORT, 0);
 return;
 } else {
 console.warn('model buffer does not support indices to draw');
 return;
 }
 } else {
 gl.drawArrays(gl[renderObject.primitive], 0, bufferInfo.elementsCount);
 }
})

let cube = createCube(2, 2, 2);
// 将带索引的立方体顶点数据转化成无索引的顶点数据
cube = transformIndicesToUnIndices(cube);
// 为顶点数据添加颜色信息
createColorForVertex(cube);
let sphere = createSphere(1, 10, 10);
// 将带索引的球体顶点数据转化成无索引的顶点数据
sphere = transformIndicesToUnIndices(sphere);
// 为顶点数据添加颜色信息
createColorForVertex(sphere);

// 生成立方体的顶点缓冲对象
let cubeBufferInfo = createBufferInfoFromObject(gl, cube);
// 生成球体的顶点缓冲对象
let sphereBufferInfo = createBufferInfoFromObject(gl, sphere);

let modelList = new List();
let renderList = new List();
for (var i = 0; i < 100; ++i) {
 var object = new Model();
 if (i % 2 == 0) {
 object.setBufferInfo(bufferInfo);
 } else {
 object.setBufferInfo(sphereBufferInfo);
 }
 // 设置模型的位置
 object.translate(rand(-10, 10), rand(-10, 10), rand(-10, 10));
 // 设置模型的旋转角度
 object.rotate(rand(0, 90));
 // 预渲染
 object.preRender(viewMatrix, projectionMatrix);
 // 设置模型的 uniforms 属性。
 object.setUniforms({
 u_ModelMatrix: object.u_ModelMatrix,
 u_Matrix: object.u_Matrix,
 u_ColorFactor: new Float32Array([rand(0.5, 0.75), rand(0.5, 0.75), rand(0.25, 0.5)])
 })
 
 objectList.add(object);
 // 根据模型对象创建渲染对象，并将渲染对象添加到渲染列表中
 renderList.add({
 programInfo: program,
 model: object,
 primitive: gl.TRIANGLES,
 renderType: 'drawArrays'
 });
}

function render() {
 if (!playing) {
 requestAnimationFrame(render);
 return;
 }
 // 重新设置模型的状态
 objectList.forEach(function (object) {
 object.rotateX(object.rotation[0] + rand(0.2, 0.5));
 object.rotateY(object.rotation[1] + rand(0.2, 0.5));
 object.rotateZ(object.rotation[2] + rand(0.2, 0.5));
 object.preRender(viewMatrix, projectionMatrix);
 object.setUniforms({
 u_ModelMatrix: object.u_ModelMatrix,
 u_Matrix: object.u_Matrix,
 })
 })
 // 执行渲染
 let lastProgram;
 let lastBufferInfo;
 renderList.forEach(function (object) {
 let programInfo = object.programInfo;
 let bufferInfo = object.model.bufferInfo;
 let uniforms = object.model.uniforms;
 let bindBuffers = false;
 if (programInfo !== lastProgram) {
 lastProgram = programInfo;
 gl.useProgram(programInfo.program);
 bindBuffers = true;
 }
 
 if (bindBuffers || bufferInfo !== lastBufferInfo) {
 lastBufferInfo = bufferInfo;
 setBufferInfos(gl, programInfo, bufferInfo);
 }
 setUniforms(programInfo, uniforms);
 
 // 绘制
 if (object.renderType === 'drawElements') {
 if (bufferInfo.indices) {
 gl.drawElements(object.primitive, bufferInfo.indices.length, gl.UNSIGNED_SHORT, 0);
 return;
 } else {
 console.warn('model buffer does not support indices to draw');
 return;
 }
 } else {
 gl.drawArrays(gl[object.primitive], 0, bufferInfo.elementsCount);
 }
 });
 requestAnimationFrame(render);
 }