webgl渲染过程
程序员文章站
2022-06-23 21:14:40
一、简介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交互式三维动画的制作,无...
一、简介
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