webgl学习笔记一-绘图单点

xiaoxiao2021-02-28 73

写在前面

WebGl（全称：Web Graphics Library ： web图形库）是基于OpenGL ES 2.0的3D绘图协议。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

绘图一个点的步骤

创建HTML5 canvas <canvas id="canvas" width="200px" height="200px"></canvas> 获取画布canvas的Id var canvas = document.getElementById('canvas'); 获取画布webgl的上下文 var gl = canvas.getContext('webgl');

编写存储着色器程序

顶点着色器：指定了点的位置和尺寸 //顶点着色器程序 var VSHADER_SOURCE = "void main() {" + //设置坐标 "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " + //设置尺寸 "gl_PointSize = 10.0; " + "} "; 片元着色器：指定了点的颜色 //片元着色器程序 var FSHADER_SOURCE = "void main() {" + //设置颜色 "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" + "}"; 编译着色器。三步曲创建Shader（着色器）对象 Object createShader (enum type) type 两种选择： gl.VERTEX_SHADER创建顶点着色器， gl.FRAGMENT_SHADER 创建片段着色器。将前面的着色器程序绑定到Shader对象上 shaderSource(Object shader, string source) shader ：着色器对象 source ：着色器程序编译程序 compileShader(Object shader)

合并程序：将顶点着色器和片元着色器合并，并链接到程序中。四步走

创建一个程序对象 createProgram(); 附件着色器 attachShader(Object program, Object shader); 链接着色器 linkProgram(shaderProgram); 使用程序 useProgram(shaderProgram); 绘图 gl.drawArrays(gl.POINTS, 0, 1);

附上代码

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" width="200px" height="200px"></canvas> </body> </html>

javascript

参考文献

webgl API

转载请注明原文地址: https://www.6miu.com/read-58075.html

技术

最新回复(0)