webgl是专为html页面实时3d渲染设计的gpu加速接口，本质是opengl es的javascript绑定，支持完整渲染管线与深度测试等3d功能；其3d能力独立于html/css的2d布局模型，依赖canvas作为绘制表面并通过着色器处理z坐标实现真三维光栅化。
WebGL 是浏览器里的 3D 渲染引擎
能。WebGL 不是“能能不能”的问题，而是专为在 HTML 页面中做实时 3D 渲染而设计的接口。它本质上是 OpenGL ES 2.0（后来是 ES 3.0）的 JavaScript 绑定，直接调用 GPU 执行顶点着色器和片元着色器，渲染管线完整，支持深度测试、模板缓冲、帧缓冲对象（FBO）、纹理采样、光照计算等全部基础 3D 功能。
常见误解来自「HTML 是 2D」这个说法——确实，<div>、<code><canvas></canvas> 默认坐标系是二维的，但 <canvas></canvas> 元素本身只是 WebGL 的**绘制表面**，不是渲染逻辑的限制者。你往 canvas.getContext('webgl') 里传一个带 z 坐标的顶点数组，GPU 就真会按 3D 方式光栅化。
HTML 本身不渲染，Canvas + WebGL 才构成 3D 渲染链
HTML 是结构描述语言，不负责图形绘制；真正承载 WebGL 的是 <canvas></canvas> 元素。关键点在于：
-
<canvas width="600" height="400"></canvas>定义的是像素画布尺寸，不是逻辑坐标范围；gl.viewport()才决定实际渲染区域 - WebGL 上下文（
WebGLRenderingContext）完全脱离 DOM 布局模型，gl.clearColor()、gl.drawArrays()等调用不触发重排重绘 - 你可以把
<canvas></canvas>放在<div> 里用 CSS 3D 变换旋转，但这和 WebGL 内部的 3D 渲染无关——那是两个独立的 3D 层：CSS 变换作用于 <a style="color:#f60; text-decoration:underline;" title="canva" href="https://www.php.cn/zt/110101.html" target="_blank">canva</a>s 元素整体，WebGL 在 canvas 内部绘制 3D 场景<h3>为什么有人觉得“HTML 只能 2D”</h3> <p>这种印象通常来自以下真实但易混淆的场景：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1236" title="Lexica"><img src="https://img.php.cn/upload/ai_manual/001/431/639/68b79dfcedec8508.png" alt="Lexica" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1236" title="Lexica">Lexica</a> <p>一个搜索 AI 生成图片的网站，可以上传图片或prompts搜索图片。</p> </div> <a href="/ai/1236" title="Lexica" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>用 <code>canvas.getContext('2d')时，所有绘图 API（fillRect、drawImage）确实是纯 2D 的，没有 z 轴概念 - CSS 的
transform: translateZ()或perspective只影响元素盒模型的视觉层叠与透视变形，并不生成真正的 3D 几何体或深度缓冲 - 初学者常误把 Three.js 的
Mesh当成 HTML 元素——其实它只是 WebGL 渲染指令的封装，最终仍落在一个<canvas></canvas>上 - 部分低端设备或旧浏览器禁用 WebGL，回退到 2D canvas 模拟（如某些老版
three.js的CanvasRenderer），加剧了“HTML=2D”的错觉
一个最小可验证的 WebGL 3D 渲染片段
下面代码创建一个旋转的彩色立方体，仅依赖原生 WebGL，无任何库：
const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) throw new Error('WebGL not supported');
<p>// 顶点着色器（含 z 坐标）
const vs = <code>attribute vec3 aPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); }</code>;
const fs = <code>precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); }</code>;</p><p>const program = gl.createProgram();
gl.attachShader(program, gl.createShader(gl.VERTEX_SHADER, vs));
gl.attachShader(program, gl.createShader(gl.FRAGMENT_SHADER, fs));
gl.linkProgram(program);
gl.useProgram(program);</p><p>const positions = new Float32Array([
// 立方体 8 个顶点（x, y, z）
-1,-1,-1, 1,-1,-1, 1,1,-1, -1,1,-1,
-1,-1, 1, 1,-1, 1, 1,1, 1, -1,1, 1
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);</p><p>const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);</p><p>function render() {
gl.clearColor(0.1, 0.1, 0.2, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 8);
requestAnimationFrame(render);
}
render();注意其中 vec4(aPosition, 1.0) 明确携带 z 分量，gl.DEPTH_BUFFER_BIT 启用深度测试——这就是标准 3D 渲染流程。只要浏览器支持 WebGL，这段代码就在屏幕上跑出真正的三维空间。
容易被忽略的是：WebGL 的 3D 是“裸金属级”的，没有默认相机、灯光或材质系统；所有矩阵变换（uModelViewMatrix、uProjectionMatrix）都得自己算或用数学库补全。这也是为什么多数项目直接上 Three.js ——它不是替代 WebGL，而是把那些必须写的几十行矩阵逻辑封装掉了。
