webgl绘制基础
一、WebGL是什么
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过 增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D加速渲染,这样 Web开发人员 就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。
二、WebGL与Canvas
Canvas API 提供 二维 绘图的方式,用于显示 二维 和 三维 的图像。
图像的绘制主要通过 CanvasRenderingContext2D 接口完成。
WebGL API 提供 三维 绘图的方式。
图像的绘制主要通过 WebGLRenderingContext 接口完成。
三、绘制一个点
着色器:着色器就是让开发者自己去编写一段程序,用来代替固定渲染管线,来处理图像的渲染。
顶点着色器:用来描述顶点的特性,通过计算来获取位置信息。 顶点 是指二维三维空间中的一个点,可以理解为一个个坐标。
片元着色器: 进行逐片源处理程序,通过计算来获取颜色信息。片源 可以理解为一个个像素。
绘制一个点:创建顶点着色器源码和片元着色器源码,通过 initShader() 把 gl 上下文 和 顶点着色器、片元着色器 连接起来。initShader() 是封装的一个方法,用于初始化片元着色器源程序。
完整源码如下:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="./index.js"></script></head><body><canvasid="canvas"width="400"height="400"style="background: gray;">
此浏览器不支持canvas
</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 着色器// 创建着色器源码// 顶点着色器constVERTEX_SHADER_SOURCE=`
void main() {
// 要绘制的点的坐标 x, y, z, w
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
// 点的大小(px)
gl_PointSize = 30.0;
}
`;// 片元着色器constFRAGMENT_SHADER_SOURCE=`
void main() {
// r g b a
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE);// 执行绘制
gl.drawArrays(gl.POINTS,0,1);functioninitShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE){// 创建着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER);const fragmentSharder = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader,VERTEX_SHADER_SOURCE)// 指定顶点着色器的源码
gl.shaderSource(fragmentSharder,FRAGMENT_SHADER_SOURCE)// 指定片元着色器的源码// 编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentSharder);// 创建一个程序对象,用于关联JavaScript和WebGLconst program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentSharder);
gl.linkProgram(program);
gl.useProgram(program);return program;}</script></body></html>
版权归原作者 伍嘉源 所有, 如有侵权,请联系我们删除。