当前位置： 移动技术网 > IT编程>开发语言>JavaScript > webgl渲染过程

webgl渲染过程

2020年07月13日  | 移动技术网IT编程  | 我要评论

一、简介

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网