竹笋

首页 » 问答 » 环境 » 图形学基础WebGL基础上
TUhjnbcbe - 2023/3/14 19:22:00

webGL程序的结构

在HTML中,动态网页包含HTML和JavaScript两种语言,引入webgl后,还需要加入着色器语言GLSLES。

我们是通过对GPU进行编程,进行渲染图形:对于GPU编程主要从下面两个方面进行编程:

webgl:APIglTranslate/glRotatefGLSL:顶点着色器-gl_Position和片元着色器-gl_FragColor

#webgl渲染管线

JavaScript通过显存的Buffer来实现顶点着色器与片元着色器的数据传递。

frameBuffer是帧缓冲区,保存顶点着色器与片元着色器渲染后的结果,可以进行进一步的操作。

#渲染过程

首先运行JavaScript程序,调用webgl的相关方法,然后顶点着色器和片元着色器就会指向,在颜色缓冲区内进行绘制,这时就清空了绘图区,最后,颜色缓冲区的内容会自动在浏览器的canvas上显示出来。

传入坐标计算显示坐标图元装备(根据坐标,组成图形)将装备好的图元变成像素的形式;(顶点着色器)片元着色器对每一个像素点进行渲染

顶点着色器的作用:将逻辑上的传入的顶点坐标,根据空间上的变换,进行计算屏幕上展示点的坐标。

#GLSL

OpenGL着色器语言让开发者可以对渲染过程拥有更多的控制

GLSL参考:

1
查看完整版本: 图形学基础WebGL基础上