webgl渲染过程

一、简介

1.WebGL概述

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

2.WebGL优点

• 通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持。
• 利用底层的图形硬件加速功能进行的图形渲染，通过统一的、标准的、跨平台的OpenGL接口实现的。

二、WebGL调用流程

三、接口要点说明

1.初始化WebGL上下文initContextGL

获取webgl渲染上下文getContext()

2.初始化着色器程序 initProgram

• 1.创建着色器createShader();
• 2.附加源到着色器shaderSource();
• 3.编译程序compileShader();
• 4.合并程序（①创建程序对象createProgram();②附加着色器attachShader()；③链接着色器linkProgram();④使用程序useProgram(),在属性赋值后使用）

3.初始化数据缓存 initBuffers

包含顶点坐标系和纹理坐标系

• 创建缓冲区createBuffer()；
• 绑定缓冲区bindBuffer()；
• 把数据传递到缓冲区bufferData()；
• 解除绑定bindBuffer(,null)

4.创建纹理 initTexture

• 创建纹理对象createTexture()；

• 向目标绑定纹理对象bindTexture()；

• 配置纹理参数texParameteri();(纹理放大，缩小，水平填充，垂直填充)

5.初始化YUV纹理 initTextures

• 创建Y、U、V纹理initTextures();获取ySampler,uSampler, vSampler的存储位置

• 将纹理单元编号0，1，2传给YUV着色器

6.上传YUV数据到纹理 updateFrameData(width, height, data)

上传YUV数据到纹理：（像素个数等于Y个数，4个像素共用一个U和一个V）

• 激活纹理单元activeTexture();
• 绑定纹理bindTexture()；
• 指定纹理的绑定对象texImage2D();

7.显示帧数据 SR_DisplayFrameData(width, height, data)

关联缓冲区对象和着色器程序:

• ①清除canvas. clearColor(); ②清除颜色缓冲区位clear(); ③设置浏览窗口viewport();④上传数据到纹理updateFrameData(); ⑤使用程序(useProgram()->2.3.4.4).
• 获取属性的位置getAttribLocation();2.启用属性enableVertexAttribArray()；
• 分配属性vertexAtrribPointer();4.绘制所需对象drawArrays()

8.设置显示区域 SR_SetDisplayRect(stDisplayRect)

stDisplayRect.left；stDisplayRect.right；stDisplayRect.top；stDisplayRect.bottom电子放大

9.释放显示资源 SR_Destroy

• 释放着色器程序；
• 释放buffer缓冲区；
• 释放YUV纹理

Webgl API 接口参考

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext

本文地址：https://blog.csdn.net/qq_34754747/article/details/107281312