WebGL是一项用来在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之交互的技术。Webgl技术结合了HTML5和JavaScript，允许开发者在网页上创建和渲染三维图形。
以前桌面程需要使用C或者C++等语言，借助专门的计算机图形库（Opengl或Direct3D），来开发三维程序，随着浏览器的强大以及HTML5的出现，得以让3D在网页上实现。webgl是基于OpenGL ES技术。opengl核心的一项特性就是可编程着色器方法
image.png
WebGL 程序结构
image
WebGL是利用HTML5的canvas标签作为绘制舞台的，如果没有webgl的加持，canvas只能绘制2维图形，有了webgl，那就不一样了，就可以绘制更加逼真的3维图形。
HTML5的canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器）必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
来一段代码先看看如何在这块画布canvas上绘制图形。下面就绘制了一个矩形.
<!DOCTYPE *html*>
<html *lang*="en">
<head>
<meta *charset*="UTF-8">
<meta *name*="viewport"*content*="width=device-width,
initial-scale=1.0">
<meta *http-equiv*="X-UA-Compatible"*content*="ie=edge">
<title>Document</title>
</head>
<body>
<canvas *width*="500"*height*="500" *id*="webgl"></canvas>
<script>
// 创建cnavas标签 得到dom对象
var canvas = document.getElementById('webgl');
// 获取绘制2d图形的上下文对象
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; // 设置颜色
ctx.fillRect(120, 10, 150, 150) // 绘制矩形
</script>
</body>
</html>
image.png
同样的我们获取到webgl的上下文对象，就可以来绘制3d图形了。显然要比2d的复杂点咯，需要借助着色器。至于着色器是什么，待后面给出详细解释。
<!DOCTYPE *html*>
<html *lang*="en">
<head>
<meta *charset*="UTF-8">
<meta *name*="viewport"*content*="width=device-width,
initial-scale=1.0">
<meta *http-equiv*="X-UA-Compatible"*content*="ie=edge">
<title>Document</title>
<script *src*="./cuon-utils.js"></script>
</head>
<body>
<canvas *width*="500"*height*="500" *id*="webgl"></canvas>
<script>
// 创建cnavas标签 得到dom对象
var canvas = document.getElementById('webgl');
// 获取webgl上下文对象
var ctx = canvas.getContext('webgl');
*console*.log(ctx)
// ctx.fillStyle ='rgba(0, 0, 255, 1.0)';
// ctx.fillRect(120, 10,150, 150)
var VSHADER_SOURCE =
'void main() { \n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' +
' gl_PointSize = 10.0; \n' +
'}\n'
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' +
'}\n'
// 初始化着色器
if (!initShaders(ctx,VSHADER_SOURCE, FSHADER_SOURCE)) {
*console*.log('failed')
}
ctx.clearColor(0.0, 0.0, 1.0, 1.0) // 设置背景色
ctx.clear(ctx.COLOR_BUFFER_BIT) // 清空颜色缓冲区, 相当于用定义好的背景色填充绘图区域
// ctx.drawColor(0.0, 1.0,0.0, 1.0)
// ctx.drawPoint(0, 0, 0,10) // 绘制点
ctx.drawArrays(ctx.POINTS, 0, 1)
</script>
</body>
</html>
cuon-utils.js
// cuon-utils.js (c) 2012 kanda and matsuda
/**
* Create a program object and make current
* @param gl GL context
* @param vshader a vertex shader program (string)
* @param fshader a fragment shader program (string)
* @return true, if the program object was created and successfully made current
*/
function initShaders(gl, vshader, fshader) {
var program = createProgram(gl, vshader, fshader);
if (!program) {
console.log('Failed to create program');
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
/**
* Create the linked program object
* @param gl GL context
* @param vshader a vertex shader program (string)
* @param fshader a fragment shader program (string)
* @return created program object, or null if the creation has failed
*/
function createProgram(gl, vshader, fshader) {
// Create shader object
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}
// Create a program object
var program = gl.createProgram();
if (!program) {
return null;
}
// Attach the shader objects
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Link the program object
gl.linkProgram(program);
// Check the result of linking
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
}
/**
* Create a shader object
* @param gl GL context
* @param type the type of the shader object to be created
* @param source shader program (string)
* @return created shader object, or null if the creation has failed.
*/
function loadShader(gl, type, source) {
// Create shader object
var shader = gl.createShader(type);
if (shader == null) {
console.log('unable to create shader');
return null;
}
// Set the shader program
gl.shaderSource(shader, source);
// Compile the shader
gl.compileShader(shader);
// Check the result of compilation
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compile shader: ' + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
/**
* Initialize and get the rendering for WebGL
* @param canvas <cavnas> element
* @param opt_debug flag to initialize the context for debugging
* @return the rendering context for WebGL
*/
function getWebGLContext(canvas, opt_debug) {
// Get the rendering context for WebGL
var gl = WebGLUtils.setupWebGL(canvas);
if (!gl) return null;
// if opt_debug is explicitly false, create the context for debugging
if (arguments.length < 2 || opt_debug) {
gl = WebGLDebugUtils.makeDebugContext(gl);
}
return gl;
}
绘制效果
image.png
-----------参考 <<WebGL编程指南>>
小cc: 关注公众号回复python，即可获得一套完美的python视频教程。发现更多惊喜。
image
image
网友评论