【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期
原创【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期
原创
前言
本文是专题类文章，主要是针对数字孪生和WEB 3D可视化展开，下面是数字孪生相关概念。
数字孪生（Digital Twin）是指在数字世界中创建真实对象或系统的虚拟副本，并在这个虚拟模型上进行仿真和分析。数字孪生通过收集、整合和分析物理系统的数据，可以帮助模拟和预测实际系统的行为，并为决策提供更准确和实时的数据支持。数字孪生技术已经在很多领域得到应用，如智能制造、能源管理、交通运输等。
学习数字孪生技术可以帮助你了解物理系统的本质和运作方式，同时也可以帮助你掌握虚拟建模和仿真技术。通过数字孪生技术，你可以将现实中的物理过程转化为数字化的模型，并通过对数字模型的分析和优化，进而改善实际系统的运行状况。这种能力对于未来物联网和工业4.0时代的工作和研究，都具有非常重要的意义。同时，数字孪生技术也是一种前沿的、有发展潜力的技术，学习数字孪生技术可以使你站在技术发展的最前沿，开拓更广阔的职业发展前景。
一、canvas和webgl的区别
1.canvas
Canvas是一个HTML5元素，可以用于在网页上绘制图形。它可以让开发者使用JavaScript绘制图形和动画，以及实现图形交互。Canvas可以帮助开发者创建交互式的游戏、图表、图像编辑工具等应用程序。
Canvas的作用如下：
- 动态绘制图形：开发者可以使用JavaScript动态地绘制图形，包括线条、圆形、矩形、多边形等。
- 动画效果：开发者可以使用JavaScript实现动画效果，例如展示图表数据变化、添加滑动特效等。
- 图像处理：开发者可以使用Canvas进行图像处理，例如对图像进行裁剪、缩放、旋转等操作。
- 游戏开发：开发者可以使用Canvas创建2D游戏，例如跳跃、射击、塔防等。
- 数据可视化：开发者可以使用Canvas绘制图表、图形等，以展示数据的变化和趋势。
以下是一个Canvas的简单案例，演示如何在一个Canvas中绘制一个红色的矩形：
<!DOCTYPE html>
<html>
<head>
<title>Canvas简单案例</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
//获取Canvas元素
var canvas = document.getElementById("myCanvas");
//获取2D绘图上下文对象
var ctx = canvas.getContext("2d");
//绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
</body>
</html>在这个案例中，我们在HTML中添加一个id为“myCanvas”的Canvas元素，并且设置其宽度为200px，高度为100px。然后，在JavaScript代码中，我们获取了这个Canvas元素，并使用“getContext”方法获取2D绘图上下文对象。接着，我们设置矩形的颜色为红色，并使用“fillRect”方法在Canvas上绘制了一个矩形，位置位于Canvas的(10,10)坐标处，宽度和高度都为50px。
运行该案例，可以在浏览器中看到一个红色的矩形：
2.webgl
WebGL是一种JavaScript API，用于在Web浏览器中渲染3D图形。它允许开发人员使用OpenGL ES 2.0（OpenGL for Embedded Systems）API，通过在浏览器中运行的JavaScript代码，使用GPU加速渲染3D图形。
WebGL的主要作用包括：
- 在Web浏览器中实现高性能的3D图形渲染，以便在Web应用程序中创建3D游戏、可视化工具、虚拟现实和增强现实应用程序等。
- 在线展示产品，使用户能够以三维方式查看产品。
- 在Web应用中显示复杂的数据可视化，例如地图、股票交易图表和医学图像等。
- 在网站上显示交互式3D模型，例如建筑模型、汽车模型和机械模型等，以便用户可以以不同角度查看它们。
以下是一个简单的WebGL案例，它使用三角形绘制了一个彩色的立方体：
<!doctype html>
<html>
<head>
<title>WebGL简单案例</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var gl;
var program;
var vertices, colors;
window.onload = function() {
var canvas = document.getElementById("myCanvas");
gl = canvas.getContext("webgl");
if (!gl) {
alert("WebGL not supported");
return;
}
// 顶点坐标
vertices = [
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5
];
// 颜色值
colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
1.0, 1.0, 1.0, 1.0
];
// 创建顶点着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 coordinates;
attribute vec4 color;
varying vec4 vColor;
uniform mat4 transformMatrix;
void main() {
gl_Position = transformMatrix * vec4(coordinates, 1.0);
vColor = color;
}
`);
gl.compileShader(vertexShader);
// 创建片元着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`);
gl.compileShader(fragmentShader);
// 创建着色器程序
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 设置顶点坐标和颜色属性
var coordinates = gl.getAttribLocation(program, "coordinates");
gl.enableVertexAttribArray(coordinates);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(coordinates, 3, gl.FLOAT, false, 0, 0);
var colorLocation = gl.getAttribLocation(program, "color");
gl.enableVertexAttribArray(colorLocation);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
// 设置变换矩阵
var transformMatrix = gl.getUniformLocation(program, "transformMatrix");
var matrix = mat4.create();
mat4.perspective(matrix, 45, canvas.width/canvas.height, 0.1, 100.0);
mat4.translate(matrix, matrix, [0, 0, -6]);
var angle = 0;
function render() {
angle += 0.01;
mat4.rotateY(matrix, matrix, angle);
mat4.rotateX(matrix, matrix, angle);
gl.uniformMatrix4fv(transformMatrix, false, matrix);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
gl.drawArrays(gl.TRIANGLE_FAN, 4, 4);
gl.drawArrays(gl.TRIANGLES, 8, 36);
requestAnimationFrame(render);
}
render();
}
</script>
</body>
</html>在上面的代码中，我们首先获取了WebGL上下文，然后定义了顶点坐标和颜色值。接着创建了顶点着色器和片元着色器，然后将它们编译为着色器程序。我们使用getAttribLocation函数获取了coordinates和color属性，在后面的代码中使用它们来绑定缓冲区数据。我们还使用gl.uniformMatrix4fv函数设置了变换矩阵，使得立方体在屏幕中旋转。最后，我们使用gl.drawArrays函数绘制了立方体。
3.webgl2
WebGL2是一种基于WebGL1的3D图形库，用于在Web上渲染复杂的3D图形效果。它可以在浏览器中直接使用，不需要安装额外的插件或软件。WebGL2的主要作用包括：
- 支持更先进的图形效果和更高的图形性能，可以渲染比WebGL1更复杂的场景。
- 提供更强大的图形处理能力，支持更多的着色器功能和更多的纹理贴图。
- 引入了更多的数学库和数据结构，使得开发者可以更容易地创建和管理3D场景。
- 支持多个画布，可以在同一页面上同时呈现多个3D场景。
- 支持更多的输入设备，如触摸屏、游戏手柄等。
下面是一个简单的 WebGL 2.0 案例，它绘制一个简单的三角形：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL 2.0 Example</title>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl2');
// define vertex shader code
const vertCode =
`#version 300 es
precision mediump float;
in vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}`;
// define fragment shader code
const fragCode =
`#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
// compile vertex shader
const vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
// compile fragment shader
const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
// create program
const program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.useProgram(program);
// create vertex buffer
const vertexData = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
// bind position attribute
const positionAttribLocation = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(positionAttribLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribLocation);
// draw
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 2);
</script>
</body>
</html>这个代码片段首先获取了一个 WebGL 2 上下文，然后定义了一个简单的三角形顶点和着色器代码。接着，编译了顶点和片段着色器，并将它们链接到程序中。
在创建顶点缓冲区、绑定其位置属性和绘制之前，我们还需要清除画布并设置背景颜色。最后一行代码使用 gl.drawArrays() 函数绘制了三角形。
可以通过将此代码复制到 HTML 文件中并在浏览器中打开该文件来运行此程序。
【选题思路】
理解Canvas和WebGL的区别对于初学者非常重要，因为这两种技术都可以用来实现图形渲染，但它们有不同的应用场景和特点。
Canvas是HTML5中新增的技术，它是一个基于像素的图形渲染引擎。Canvas使用JavaScript来绘制2D图形，包括直线、曲线、矩形、圆形等。它非常适合用于开发一些简单的交互式图像或者游戏，也可以用于绘制数据可视化图表、动画等。
WebGL则是一种基于硬件加速的图形渲染技术，可以在浏览器中实现高性能的3D图形渲染。WebGL是OpenGL ES 2.0的JavaScript实现，可以利用GPU的并行计算能力来加速图形渲染。因此，它非常适合用于开发复杂的3D场景、虚拟现实应用等。但是，WebGL需要开发者有更深入的计算机图形学和数学知识，因此对初学者来说可能会比较困难。
因此，对于初学者来说，需要根据自己的需求和技术水平来选择使用Canvas还是WebGL。如果只是开发一些简单的2D图形应用，那么Canvas是不错的选择；如果需要开发复杂的3D图形应用，那么WebGL则是更好的选择。
【创作提纲】
1、canvas（主要讲解canvas概念和基本使用）
2、webgl（主要讲解webgl概念和基本使用）
3、webgl2（主要讲解webgl2概念和基本使用）
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
