欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webgl渲染过程

程序员文章站 2022-03-22 08:34:27
一、简介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调用流程

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