WebGL：基础练习 / 简单学习 / demo / canvas3D

一、前置内容

canvas：理解canvas / 基础使用 / 实用demo-CSDN博客

WebGL：开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗_webgl培训-CSDN博客

二、在线运行HTML

用来运行WebGL代码，粘贴--运行（有时候不太好用，莫名报错）

在线运行Html5

三、获取画布、获取上下文环境对象

//获取画布元素
var canvas = document.getElementById('canvas')
//获取到元素的上下文环境对象
var webgl = canvas.getContext('webgl')

三、WebGL练习

demo来至AI

3.1、绘制正方形

在这个 Demo 中，我们首先获取了 WebGL 上下文，然后定义了一个顶点着色器和一个片元着色器。接着，我们创建了着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。

然后，我们创建了一个顶点缓冲区，并将顶点坐标存储在这个缓冲区中。我们启用了顶点属性，并将顶点缓冲区对象绑定到这个属性上。

接下来，我们设置了视口大小，并清空了画布。最后，我们使用 gl.drawArrays() 方法绘制了一个正方形。

需要注意的是，绘制图形时，我们使用的是 gl.TRIANGLE_FAN，它表示绘制一个三角形扇形，也就是一个由五个三角形组成的正方形。这样可以减少绘制的顶点数量，提高性能。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>WebGL 基础 Demo</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="canvas" width="500" height="500"></canvas><script>// 获取 WebGL 上下文const canvas = document.getElementById('canvas');const gl = canvas.getContext('webgl');// 定义顶点着色器代码const vertexShaderCode = `attribute vec3 a_position;void main() {gl_Position = vec4(a_position, 1.0);}`;// 定义片元着色器代码const fragmentShaderCode = `precision mediump float;void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`;// 创建顶点着色器对象const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderCode);gl.compileShader(vertexShader);// 创建片元着色器对象const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderCode);gl.compileShader(fragmentShader);// 创建着色器程序对象const shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);// 获取着色器变量位置const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');// 创建顶点数据const vertices = [-0.5, -0.5, 0.0,0.5, -0.5, 0.0,0.5,  0.5, 0.0,-0.5,  0.5, 0.0];// 创建顶点缓冲区对象const vertexBuffer = gl.createBuffer();// 绑定缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将数据写入缓冲区对象gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);// 启用顶点属性gl.enableVertexAttribArray(positionLocation);// 将缓冲区对象绑定到顶点属性上gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);// 设置视口gl.viewport(0, 0, canvas.width, canvas.height);// 清空画布gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);// 使用着色器gl.useProgram(shaderProgram);// 绘制图形gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);</script>
</body>
</html>

3.2、清屏

这个 Demo 创建了一个空的 WebGL 上下文并在 canvas 上进行了清屏操作。可以通过更改 clearColor() 的参数来修改屏幕上的颜色。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>WebGL Demo</title><style>html, body {margin: 0;padding: 0;height: 100%;overflow: hidden;}canvas {width: 100%;height: 100%;}</style></head><body><canvas id="canvas"></canvas><script>const canvas = document.getElementById('canvas');const gl = canvas.getContext('webgl');gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);</script></body>
</html>

3.3、WebGL 三角形渲染

它包括以下步骤：
获取 canvas 元素和 WebGL 上下文对象。
定义顶点着色器和片段着色器。
创建顶点着色器和片段着色器对象。
创建着色器程序对象。
定义三角形顶点坐标并写入缓冲区。
获取顶点着色器中 aPosition 的地址并启用。
清除画布并绘制三角形。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>WebGL Demo</title>
</head>
<body><canvas id="glCanvas" width="640" height="480"></canvas><script>function init() {// 获取 canvas 元素var canvas = document.getElementById("glCanvas");// 获取 WebGL 上下文var gl = canvas.getContext("webgl");// 定义顶点着色器var vertexShaderSource = `attribute vec3 aPosition;void main() {gl_Position = vec4(aPosition, 1.0);}`;// 定义片段着色器var fragmentShaderSource = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`;// 创建顶点着色器var vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.compileShader(vertexShader);// 创建片段着色器var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(fragmentShader);// 创建着色器程序var program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);// 定义三角形顶点坐标var vertices = [0.0, 0.5, 0.0,-0.5, -0.5, 0.0,0.5, -0.5, 0.0];// 创建缓冲区并写入数据var vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);// 获取顶点着色器中 aPosition 的地址var aPosition = gl.getAttribLocation(program, "aPosition");gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(aPosition);// 清除画布并绘制三角形gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);}init();</script>
</body>
</html>

3.4、WebGL 绘制了一个红色的三角形

WebGL 绘制了一个红色的三角形，该三角形的顶点坐标分别为 (0.0, 0.5)、(-0.5, -0.5) 和 (0.5, -0.5)。在绘制过程中，我们首先编译和链接了顶点着色器和片元着色器，并创建了一个着色器程序。然后我们创建了一个顶点缓冲，并将顶点数据绑定到该缓冲上。接下来我们通过顶点属性将顶点数据传递给顶点着色器，在片元着色器中设置了颜色，并通过调用 gl.drawArrays(gl.TRIANGLES, 0, 3) 绘制了该三角形。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>WebGL Demo</title><style>canvas {border: 1px solid black;}</style></head><body><canvas id="my-canvas" width="500" height="500"></canvas><script>const canvas = document.getElementById('my-canvas');const gl = canvas.getContext('webgl');// 定义顶点着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, `attribute vec4 a_position;void main() {gl_Position = a_position;}`);gl.compileShader(vertexShader);// 定义片元着色器const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, `precision mediump float;uniform vec4 u_color;void main() {gl_FragColor = u_color;}`);gl.compileShader(fragmentShader);// 创建着色器程序const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);// 定义顶点数据const vertices = [0.0,  0.5,-0.5, -0.5,0.5,  -0.5,];// 创建顶点缓冲const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);// 绑定顶点属性const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');gl.enableVertexAttribArray(positionAttributeLocation);gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 设置颜色const colorUniformLocation = gl.getUniformLocation(program, 'u_color');gl.uniform4f(colorUniformLocation, 1.0, 0.0, 0.0, 1.0);// 清空画布gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);// 绘制三角形gl.drawArrays(gl.TRIANGLES, 0, 3);</script></body>
</html>

3.5、WebGL 绘制颜色渐变矩形

在这个 Demo 中，我们首先创建了一个 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。接着，我们创建了一个着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。

然后，我们创建了一个顶点缓冲区，并将顶点坐标存储在这个缓冲区中。我们还设置了视图和投影矩阵，并使用着色器程序。接下来，我们启用了顶点属性，并将顶点缓冲区绑定到这个属性上。最后，我们使用 gl.drawArrays() 方法绘制了一个矩形。

在片元着色器中，我们使用了 mix() 函数来计算每个像素的颜色，从而实现了颜色渐变效果。我们还定义了两个 uniform 变量 u_colorA 和 u_colorB，用于控制矩形的颜色。

在这个 Demo 中，我们只是绘制了一个简单的颜色渐变矩形，但你可以根据需要对其进行修改和扩展。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>WebGL Demo</title><script type="text/javascript">window.onload = function() {const canvas = document.getElementById("canvas");const gl = canvas.getContext("webgl");// 顶点着色器代码const vertexShaderSource = `attribute vec2 a_position;void main() {gl_Position = vec4(a_position, 0.0, 1.0);}`;// 片元着色器代码const fragmentShaderSource = `precision mediump float;uniform vec4 u_colorA;uniform vec4 u_colorB;void main() {gl_FragColor = mix(u_colorA, u_colorB, gl_FragCoord.y / 500.0);}`;// 创建顶点着色器对象const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.compileShader(vertexShader);// 创建片元着色器对象const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(fragmentShader);// 创建着色器程序对象const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);// 获取顶点着色器中的变量位置const positionLocation = gl.getAttribLocation(program, "a_position");// 创建顶点缓冲区const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);const positions = [0, 0,0, 500,500, 0,500, 500,];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// 设置视图和投影矩阵gl.viewport(0, 0, canvas.width, canvas.height);gl.clearColor(0, 0, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);// 使用着色器程序gl.useProgram(program);// 启用顶点属性gl.enableVertexAttribArray(positionLocation);// 将顶点缓冲区绑定到顶点属性gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);// 设置 uniform 变量const colorALocation = gl.getUniformLocation(program, 'u_colorA');const colorBLocation = gl.getUniformLocation(program, 'u_colorB');gl.uniform4f(colorALocation, 1, 0, 0, 1);gl.uniform4f(colorBLocation, 0, 0, 1, 1);// 绘制矩形gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);};</script><style>canvas {border: 1px solid black;}</style></head><body><canvas id="canvas" width="500" height="500"></canvas></body>
</html>

3.6、绘制一个彩色三角形

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>WebGL Demo</title><style>body {margin: 0;padding: 0;}#glcanvas {width: 100vw;height: 100vh;display: block;}</style></head><body><canvas id="glcanvas"></canvas><script>const canvas = document.querySelector("#glcanvas");const gl = canvas.getContext("webgl");const vertexShaderSource = `attribute vec3 aPosition;attribute vec3 aColor;varying vec3 vColor;void main() {gl_Position = vec4(aPosition, 1.0);vColor = aColor;}`;const fragmentShaderSource = `precision mediump float;varying vec3 vColor;void main() {gl_FragColor = vec4(vColor, 1.0);}`;const shaderProgram = createShaderProgram(gl, vertexShaderSource, fragmentShaderSource);const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aPosition");const colorAttributeLocation = gl.getAttribLocation(shaderProgram, "aColor");const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);const positions = [-0.5, 0.5, 0.0, 0.5, 0.5, 0.0, 0.0, -0.5, 0.0];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);const colorBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);const colors = [1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);function createShaderProgram(gl, vertexShaderSource, fragmentShaderSource) {const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.compileShader(vertexShader);if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {console.log("Error compiling vertex shader:", gl.getShaderInfoLog(vertexShader));return null;}const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(fragmentShader);if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {console.log("Error compiling fragment shader:", gl.getShaderInfoLog(fragmentShader));return null;}const shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {console.log("Error linking shader program:", gl.getProgramInfoLog(shaderProgram));return null;}return shaderProgram;}function render() {gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.useProgram(shaderProgram);gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.enableVertexAttribArray(positionAttributeLocation);gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);gl.enableVertexAttribArray(colorAttributeLocation);gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);gl.drawArrays(gl.TRIANGLES, 0, 3);}requestAnimationFrame(render);</script></body>
</html>

3.7、旋转的立方体

本例的代码中，我们使用 THREE.js 库创建了一个场景，相机和渲染器。我们还创建了一个立方体，并将其添加到场景中。最后，我们创建了一个动画函数，使立方体绕 X 和 Y 轴旋转，并在每个帧中更新渲染器。

运行上面的代码，您将在浏览器中看到一个绿色的立方体，它在不断旋转。

<!DOCTYPE html>
<html>
<head><title>WebGL Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><style>body { margin: 0; }canvas { width: 100%; height: 100%; display: block; }</style>
</head>
<body><script>// 初始化场景var scene = new THREE.Scene();// 初始化相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 初始化渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建立方体var geometry = new THREE.BoxGeometry();var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });var cube = new THREE.Mesh(geometry, material);scene.add(cube);// 创建动画function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();</script>
</body>
</html>

3.8、彩色三角形

获取 WebGL 上下文；
编写顶点着色器和片元着色器代码；
初始化着色器程序和获取 attribute 变量和 uniform 变量的位置；
准备顶点数据和颜色数据，并创建对应的缓冲区；
设置绘制参数，包括启用 attribute 位置、绑定缓冲区和设置指针；
设置投影矩阵和模型视图矩阵，并绘制三角形。
<!DOCTYPE html>
<html>
<head><title>WebGL Demo</title><script src="https://cdn.bootcdn.net/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
<body><canvas id="canvas" width="800" height="600"></canvas><script>const canvas = document.getElementById('canvas');const gl = canvas.getContext('webgl');if (!gl) {alert('WebGL not supported.');}// 顶点着色器代码const vsSource = `attribute vec4 aVertexPosition;attribute vec4 aVertexColor;uniform mat4 uModelViewMatrix;uniform mat4 uProjectionMatrix;varying lowp vec4 vColor;void main() {gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;vColor = aVertexColor;}`;// 片元着色器代码const fsSource = `varying lowp vec4 vColor;void main() {gl_FragColor = vColor;}`;// 初始化着色器程序const shaderProgram = initShaderProgram(gl, vsSource, fsSource);// 获取 attribute 变量和 uniform 变量的位置const programInfo = {program: shaderProgram,attribLocations: {vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),},uniformLocations: {projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),},};// 设置顶点数据const positions = [0, 0.5, 0,-0.5, -0.5, 0,0.5, -0.5, 0,];const colors = [1, 0, 0, 1,0, 1, 0, 1,0, 0, 1, 1,];// 创建顶点缓冲区const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);const colorBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);// 设置绘制参数gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, gl.FLOAT, false, 0, 0);gl.useProgram(programInfo.program);// 设置投影矩阵和模型视图矩阵const projectionMatrix = mat4.create();mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);const modelViewMatrix = mat4.create();mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -3.0]);// 绘制gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);gl.drawArrays(gl.TRIANGLES, 0, 3);// 初始化着色器程序函数function initShaderProgram(gl, vsSource, fsSource) {const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);const shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));return null;}return shaderProgram;}// 加载着色器函数function loadShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}</script>
</body>
</html>

3.9、绘制圆形

获取 canvas 元素和绘图上下文
定义 顶点着色器 和 片元着色器，顶点着色器用于处理顶点数据，片元着色器用于处理每个像素的颜色值
创建 顶点着色器 和 片元着色器，并编译
创建 程序对象，并将 顶点着色器 和 片元着色器 附加到程序对象上
链接程序对象，并使用
定义圆形顶点数据（分割成 n 个三角形）
创建缓冲对象并绑定到目标上
向缓冲对象写入数据
获取 属性变量 位置
设置 属性变量，并启用
获取 uniform 变量位置
设置背景颜色
清空画布
绘制圆形
这个 demo 绘制了一个红色的圆形。
<!DOCTYPE html>
<html>
<head><title>WebGL Demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script src="https://cdn.bootcdn.net/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script><script type="text/javascript">window.onload = function () {// 获取 canvas 元素var canvas = document.getElementById('myCanvas');// 获取绘图上下文var gl = canvas.getContext('webgl');// 定义顶点着色器var vertexShaderSource = `attribute vec4 a_Position;void main() {gl_Position = a_Position;}`;// 定义片元着色器var fragmentShaderSource = `precision mediump float;uniform vec4 u_FragColor;void main() {gl_FragColor = u_FragColor;}`;// 创建顶点着色器var vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.compileShader(vertexShader);// 创建片元着色器var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(fragmentShader);// 创建程序对象var program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);// 定义圆形顶点数据var circleVertices = [];var r = 0.5; // 半径var centerX = 0; // 圆心 X 坐标var centerY = 0; // 圆心 Y 坐标var n = 360; // 分割成 n 个三角形，每个三角形有三个顶点var angle = 0;for (var i = 0; i < n; i++) {circleVertices.push(centerX, centerY, 0);circleVertices.push(centerX + r * Math.cos(angle), centerY + r * Math.sin(angle), 0);angle += 2 * Math.PI / n;circleVertices.push(centerX + r * Math.cos(angle), centerY + r * Math.sin(angle), 0);}// 创建缓冲对象并绑定到目标var buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);// 向缓冲对象写入数据var vertices = new Float32Array(circleVertices);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 获取属性变量位置var a_Position = gl.getAttribLocation(program, 'a_Position');gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);// 获取 uniform 变量位置var u_FragColor = gl.getUniformLocation(program, 'u_FragColor');// 设置背景颜色gl.clearColor(0.9, 0.9, 0.9, 1.0);// 清空画布gl.clear(gl.COLOR_BUFFER_BIT);// 绘制圆形gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0); // 设置颜色（红色）gl.drawArrays(gl.TRIANGLES, 0, circleVertices.length / 3);};</script>
</head>
<body><canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

四、过程记录

记录一、WebGL是基于canvas吗

WebGL是基于HTML5中的canvas元素的。WebGL使用OpenGL ES 2.0规范来编写3D图形。WebGL的API允许JavaScript在canvas元素上绘制各种类型的3D图像，并使用GPU加速。所以，可以说WebGL是基于canvas，但它使用了更高级的图形处理技术来实现复杂的3D图像。

记录二、理解 canvas3D

canvas3D是HTML5的一个新特性，它提供了对3D图形的支持，使得在网页上实现3D效果成为可能。canvas3D是基于WebGL实现的，WebGL是一种基于OpenGL ES 2.0的图形库，它可以在网页中实现高性能的3D图形渲染。

使用canvas3D，您可以创建和操作3D对象、应用材质和贴图、添加光照和阴影等等。它提供了一组丰富的API，可以用于绘制和操作3D图形，包括对物体的旋转、缩放、平移等操作。

虽然canvas3D目前还处于实验阶段，但它已经得到了许多浏览器的支持，未来可能会成为HTML5标准的一部分。如果您对3D图形编程感兴趣，可以尝试使用canvas3D来实现您的项目。

----文心一言

五、欢迎交流指正

六、参考链接

什么是WebGL? | 码上动力

【精选】【WebGL】简单入门教程_webgl教程-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/131557.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大数据毕业设计选题推荐-无线网络大数据平台-Hadoop-Spark-Hive

大数据毕业设计选题推荐-无线网络大数据平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
无需使用jadx-gui和mac电脑获取app备案公钥的方法

无需使用jadx-gui和mac电脑获取app备案公钥的方法

由于2023年&#xff0c;国家要求上架的app必须备案&#xff0c;因此app备案成为了很多公司迫切的需求。 备案的时候&#xff0c;需要填写app公钥&#xff0c;MD5值等参数&#xff0c;这些参数对于不熟悉加密技术的人来说&#xff0c;简直是无从下手&#xff0c;因为目前的开发…
阅读更多...
LangChain+LLM实战---实用Prompt工程讲解

LangChain+LLM实战---实用Prompt工程讲解

原文&#xff1a;Practical Prompt Engineering 注&#xff1a;本文中&#xff0c;提示和prompt几乎是等效的。 这是一篇非常全面介绍Prompt的文章&#xff0c;包括prompt作用于大模型的一些内在机制&#xff0c;和prompt可以如何对大模型进行“微调”。讲清楚了我们常常听到的…
阅读更多...
flink状态不能跨算子

flink状态不能跨算子

背景 在flink中进行状态的维护和管理应该是我们经常做的事情&#xff0c;但是有些同学认为名称一样的状态在不同算子之间的状态是同一个&#xff0c;事实是这样吗&#xff1f; flink状态在保存点中的存放示意图 事实上&#xff0c;每个状态都归属于对应的算子&#xff0c;也…
阅读更多...
thinkphp漏洞复现

thinkphp漏洞复现

thinkphp漏洞复现 ThinkPHP 2.x 任意代码执行漏洞Thinkphp5 5.0.22/5.1.29 远程代码执行ThinkPHP5 5.0.23 远程代码执行ThinkPHP5 SQL Injection Vulnerability && Sensitive Information Disclosure VulnerabilityThinkPHP Lang Local File Inclusion ThinkPHP 2.x 任…
阅读更多...
xlua源码分析（二）lua Call C#的无wrap实现

xlua源码分析（二）lua Call C#的无wrap实现

xlua源码分析&#xff08;二&#xff09;lua Call C#的无wrap实现 上一节我们主要分析了xlua中C# Call lua的实现思路&#xff0c;本节我们将根据Examples 03_UIEvent&#xff0c;分析lua Call C#的底层实现。例子场景里有一个简单的UI面板&#xff0c;面板中包含一个input fie…
阅读更多...
rabbitmq的confirm模式获取correlationData为null解决办法

rabbitmq的confirm模式获取correlationData为null解决办法

回调函数confirm中的correlationDatanull // 实现confirm回调,发送到和没发送到exchange,都触发 Override public void confirm(CorrelationData correlationData, boolean ack, String cause) {// 参数说明:// correlationData: 相关数据,可以在发送消息时,进行设置该参数// …
阅读更多...
Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

一、效果 UI跟随鼠标移动， 动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动 二、屏幕坐标、Canvas自适应、锚点、中心点 在说原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。 1.屏幕坐标…
阅读更多...
家庭私人影院 - Windows搭建Emby媒体库服务器并远程访问 「无公网IP」

家庭私人影院 - Windows搭建Emby媒体库服务器并远程访问 「无公网IP」

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…
阅读更多...
webgoat-（A1）injection

webgoat-（A1）injection

SQL Injection (intro) SQL 命令主要分为三类&#xff1a; 数据操作语言 &#xff08;DML&#xff09;DML 语句可用于请求记录 &#xff08;SELECT&#xff09;、添加记录 &#xff08;INSERT&#xff09;、删除记录 &#xff08;DELETE&#xff09; 和修改现有记录 &#xff…
阅读更多...
MySQL - 库的操作

MySQL - 库的操作

目录 1.库的操作1.1创建数据库1.2创建数据库案例 2.字符集和校验规则3.操纵数据库4.备份和恢复5.查看连接情况 1.库的操作 1.1创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specifica…
阅读更多...
[架构之路-254/创业之路-85]：目标系统 - 横向管理 - 源头：信息系统战略规划的常用方法论，为软件工程的实施指明方向！！！

[架构之路-254/创业之路-85]：目标系统 - 横向管理 - 源头：信息系统战略规划的常用方法论，为软件工程的实施指明方向！！！

目录 总论&#xff1a; 一、数据处理阶段的方法论 1.1 企业信息系统规划法BSP 1.1.1 概述 1.1.2 原则 1.2 关键成功因素法CSF 1.2.1 概述 1.2.2 常见的企业成功的关键因素 1.3 战略集合转化法SST&#xff1a;把战略目标转化成信息的集合 二、管理信息系统阶段的方法论…
阅读更多...
十年JAVA搬砖路——Linux搭建Ldap服务器。

十年JAVA搬砖路——Linux搭建Ldap服务器。

1.安装命令 yum -y install openldap compat-openldap openldap-clients openldap-servers openldap-servers-sql openldap-devel2.启动ldap systemctl start slapd systemctl enable slapd3.修改密码 slappasswd Aa123456获得返回的密码加密密码串&#xff1a; {SSHA}DkSw0…
阅读更多...
二维码智慧门牌管理系统升级：一键报警让你的生活更安全！

二维码智慧门牌管理系统升级：一键报警让你的生活更安全！

文章目录 前言一、升级解决方案的特点二、实施步骤 前言 随着科技的不断进步&#xff0c;我们的生活正在逐渐变得更加智能化。可以想象一下&#xff0c;如果你家的门牌也能拥有这种智能升级&#xff0c;将会带来怎样的改变&#xff1f;今天&#xff0c;让我们一起探讨这令人兴…
阅读更多...
MySQL基础『数据库基础』

MySQL基础『数据库基础』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.数据库概念1.1.什么是数据库1.2.数据库存储介质1.3.常见数据库 2.数…
阅读更多...
用于3D Visual Grounding的多模态场景图

用于3D Visual Grounding的多模态场景图

文章目录 引言方法1. Language Scene Graph Module Paper&#xff1a;《Free-form Description Guided 3D Visual Graph Network for Object Grounding in Point Cloud》【ICCV’2021】 Code&#xff1a;https://github.com/PNXD/FFL-3DOG 引言 3DVG任务有以下三个挑战&#x…
阅读更多...
hadoop配置文件自检查(解决常见报错问题,超级详细！)

hadoop配置文件自检查(解决常见报错问题,超级详细！)

本篇文章主要的内容就是检查配置文件&#xff0c;还有一些常见的报错问题解决方法&#xff0c;希望能够帮助到大家。 一、以下是大家可能会遇到的常见问题&#xff1a; 1.是否遗漏了前置准备的相关操作配置&#xff1f; 2.是否遗的将文件夹(Hadoop安装文件夹&#xff0c;/dat…
阅读更多...
高性能网络编程 - 关于单台服务器并发TCP连接数理论值的讨论

高性能网络编程 - 关于单台服务器并发TCP连接数理论值的讨论

文章目录 概述操作系统的限制因素文件句柄限制1. 进程限制2. 全局限制 端口号范围限制 概述 单台服务器可以支持的并发TCP连接数取决于多个因素&#xff0c;包括硬件性能、操作系统限制、网络带宽和应用程序设计。以下是一些影响并发TCP连接数的因素&#xff1a; 服务器硬件性…
阅读更多...
文本生成评估指标简单介绍BLEU+ROUGE+Perplexity+Meteor 代码实现

文本生成评估指标简单介绍BLEU+ROUGE+Perplexity+Meteor 代码实现

以下指标主要针对两种&#xff1a;机器翻译和文本生成&#xff08;文章生成&#xff09;&#xff0c;这里的文本生成并非是总结摘要那类文本生成&#xff0c;仅仅是针对生成句子/词的评价。 首先介绍BLEU&#xff0c;ROUGE, 以及BLEU的改进版本METEOR&#xff1b;后半部分介绍P…
阅读更多...
Go 多版本管理

Go 多版本管理

在日常开发工作过程中&#xff0c;很多时候我们都需要在自己的机器上安装多个go版本&#xff0c;像是go1.16引入的embed&#xff0c;go1.18引入了泛型&#xff1b;又或是自己本地使用的是最新版&#xff0c;但公司的项目中使用的go1.14、go1.13甚至是更早的版本。 那么有没有既…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023