webgl 初识2

Posted 2020-11-01 honghong

之前的文章介绍了webgl.

这里进一步精简。

WebGL的全部内容就是创建不同的着色器，

向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements 

让WebGL调用当前顶点着色器处理每个顶点，调用当前片断着色器渲染每个像素。

既然着色器需要数据,着色器分两部分,顶点和片段着色器

顶点着色器需要的数据，可以通过以下三种方式获得。

1. Attributes 属性 (从缓冲中获取的数据)
2. Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
3. Textures 纹理 (从像素或纹理元素中获取的数据)

片断着色器所需的数据，可以通过以下三种方式获取

1. Uniforms 全局变量 (values that stay the same for every pixel of a single draw call)
2. Textures 纹理 (data from pixels/texels)
3. Varyings 可变量 (data passed from the vertex shader and interpolated)

 

属性写入

• var buf = gl.createBuffer();
• gl.bindBuffer(gl.ARRAY_BUFFER, buf);
• gl.bufferData(gl.ARRAY_BUFFER, someData, gl.STATIC_DRAW);

属性读取

• gl.getAttribLocation(positionLoc);(可初始进行)
• gl.enableVertexAttribArray(positionLoc);
• gl.bindBuffer(gl.ARRAY_BUFFER, buf);
• gl.vertexAttribPointer(positionLoc, numComponents, type, false, stride, offset);

变量读写(用的时候，直接给某变量绑定值就好了)

• var offsetLoc = gl.getUniformLocation(progress, XX);
• gl.uniform(XXXXXX); // 向右偏移一半屏幕宽度

纹理写入

•   var txt = gl.createTexture();
•   gl.bindTexture(gl.TEXTURE_2D, tex);
•   gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, img);

纹理读取

• gl.getUniformLocation(positionLoc);(可初始化进行)
• gl.activeTexture(gl.TEXTURE0 + unit);
• gl.bindTexture(gl.TEXTURE_2D, tex);
• gl.uniform1i(someSamplerLoc, unit);

可变量

    顶点着色器 直接传给 片段着色器