怎么学习企业网站维护,六安人才网,企业综合信息服务平台,宁国市网站建设1. WebGL是什么#xff1f; WebGL#xff08;Web Graphics Library#xff09;是一种JavaScript API#xff0c;它允许你在不需要安装任何额外插件的情况下#xff0c;直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元#xff08;GPU#xff09;来…1. WebGL是什么 WebGLWeb Graphics Library是一种JavaScript API它允许你在不需要安装任何额外插件的情况下直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元GPU来加快渲染速度这意味着你可以在网页上创建类似桌面应用程序的视觉效果。 1.1 WebGL入门代码实现如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title给画布换个颜色/title
/head
bodycanvas idcanvas width400 height400此浏览器不支持canvas/canvasscriptconst ctx document.getElementById(canvas)const gl ctx.getContext(webgl)gl.clearColor(1.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)/script
/body
/html
1.2 方法详解
1gl.clearColor(r,g,b,a) 指定清空canvas的颜色接收四个参数取值区间为 0.0~1.0)
2gl.clear(buffer) 清空canvas参数分为三项
gl.COLOR_BUFFER_BIT 清空颜色缓存gl.DEPTH_BUFFER_BIT 清空深度缓冲区gl.STENCIL_BUFFER_BIT 清空模板缓冲区
3gl.clear 需要和 gl.clearColor 提到的函数搭配使用
gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0) 2. WebGL的基本组件
2.1 什么是着色器
1着色器就是让开发者自己去编写一段程序用来代替固定渲染管线来处理图像的渲染。
顶点着色器处理每个顶点的数据如位置、颜色和纹理坐标。片元着色器处理每个像素片元的颜色和其他属性最终决定屏幕上显示的颜色。
2.2 webgl 绘制一个点的流程 2.2.1 创建着色器源码
// 顶点着色器源码
const vertexShaderSource
// 必须要存在 main 函数
void main() {// 要绘制的点的坐标gl_Position vec4(0.0,0.0,0.0,1.0); // x, y, z, w齐次坐标(x/wy/w z/w)// 点的大小gl_PointSize 10.0;
}// 片源着色器源码
const fragmentShaderSource
// 必须要存在 main 函数
void main() {gl_FragColor vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}
2.2.2 创建着色器
// 创建顶点着色器对象
const vertexShader gl.createShader(gl.VERTEX_SHADER);
// 创建片段着色器对象
const fragmentShader gl.createShader(gl.FRAGMENT_SHADER);
2.2.3 指定关联着色器源码
// 设置顶点着色器源代码
gl.shaderSource(vertexShader, vertexShaderSource);
// 设置片段着色器源代码
gl.shaderSource(fragmentShader, fragmentShaderSource);
2.2.4 编译着色器
// 编译顶点着色器
gl.compileShader(vertexShader);
// 编译片段着色器
gl.compileShader(fragmentShader);
2.2.5 创建程序对象
const program gl.createProgram();
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)
2.2.6 执行绘制
gl.drawArrays(gl.POINTS,0,1); // 绘制一个点需要1个点
