WebGL

博客分类: 江河计划

WebGL

算法

矩阵置零

给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0。请使用原地算法。

var setZeroes = function(matrix) {
    var mapY = {};
    for(let x=0; x<matrix.length; x++){
        var tag = false;
        for(let y=0; y< matrix[x].length; y++){
            if(matrix[x][y] === 0){
                tag = true;
                mapY[y] = x;
            }else if(mapY[y] !== void 0){
                matrix[x][y] = 0;
            }
        }
        if(tag){
            matrix[x].fill(0);
        }
    }
    for(let i in mapY){
        for(let j=0; j<mapY[i]; j++){
            matrix[j][i] = 0;
        }
    }
};

webGL 缓冲区

// 准备数据
this.points.push({
    x,
    y,
    colorR: `${Math.round(Math.random())}.0`,
    colorG: `${Math.round(Math.random())}.0`,
    colorB: `${Math.round(Math.random())}.0`

})
// 清空画布
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 给画布重新着色
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
// 创建缓冲区
var vertexBuffer = this.gl.createBuffer();
// 创建数据 buffer
var arr = []
this.points.map(item => {
    arr.push(item.x);
    arr.push(item.y);
    console.log(item);
})
var vertices = new Float32Array(arr)
// 绑定缓冲区
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer)
// 写入缓冲区数据
this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
// 将缓冲区数据赋值给变量
this.gl.vertexAttribPointer(this.a_Position, 2, this.gl.FLOAT, false, 0, 0);
// 连接缓冲区变量和缓冲区对象
this.gl.enableVertexAttribArray(this.a_Position);
// 画点
this.gl.drawArrays(this.gl.POINTS, 0, this.points.length);

创建缓冲区对象

使用缓冲区对象之前,你必须创建它

// 返回的是创建成功的缓存区对象
var vertexBuffer = this.gl.createBuffer();
// 删除缓冲区对象
this.gl.deleteBuffer(vertexBuffer)

绑定缓存区对象

将缓存区对象绑定在目标对象上

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer)
// 第一个参数有下列三种
// gl.ARRAY_BUFFER  缓冲区对象中包含了顶点的数据
// gl.ELEMENT_ARRAY_BUFFER  表示缓存区对象中包含了顶点的索引值
// buffer 指定之前由 gl.createBuffer 返回的待绑定的缓冲区对象

向缓冲区对象中写入数据

this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
// 向绑定的缓存区对象写入数据
// gl.STATIC_DRAW   只会向缓冲区对象中写入一次数据,但需要绘制很多次
// gl.STREAM_DRAW   只会向缓冲区对象中写入一次数据,然后绘制若干次
// gl.DYNAMIC_DRAW  会向缓冲区对象中多次写入数据,并绘制很多次

将缓冲区对象分配给 attribute 变量

// 分配变量
this.gl.vertexAttribPointer(this.a_Position, 2, this.gl.FLOAT, false, 0, 0);
// 开启 attribute 变量
this.gl.enableVertexAttribArray(this.a_Position);

绘制

一笔绘制就行了