webgl bufferdata 更新 update

前言：照着关键字搜了几篇，基本都是介绍API，没有实际例子如何更新，提供一个例子，以供大家参考。

代码

既然涉及到更新了，那必然已经把初始的图像绘制出来了，找到你的Buffer ，将他保存起来，如下。

		//创建缓冲区对象
        var vertexBuffer = gl.createBuffer()
        if (!vertexBuffer) {
            console.log('Failed to create the buffer object')
            return -1
        }
        //将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
        this.positionBuffer = vertexBuffer

首先将保存好的buffer，将缓冲区对象绑定，表示接下来如果操作的是缓冲区的话就是操作此buffer。

positionBufferView 为： this.positionBufferView = new Float32Array(vertexPositions)

		// 更新位置
        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
        gl.bufferSubData(gl.ARRAY_BUFFER,0,this.positionBufferView)

完整例子

	// 刷新渲染图像
    refreshRender(){
        let gl = this.gl

        // 清除之前的绘制内容
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

        // 更新位置
        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
        gl.bufferSubData(gl.ARRAY_BUFFER,0,this.positionBufferView)
        // 更新颜色
        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer)
        gl.bufferSubData(gl.ARRAY_BUFFER,0,this.colorBufferView)

        // 再次绘制
        gl.drawElements(gl.TRIANGLES, this.count, gl.UNSIGNED_INT, 0)
        console.log(gl.canvas.toDataURL());
    }