JavaScript中的WebGL基础入门_javascript 3D图形-js教程-PHP中文网

JavaScript中的WebGL基础入门_javascript 3D图形

夜晨

发布： 2025-11-01 08:15:02

原创

184人浏览过

首先获取WebGL上下文，然后编写并编译顶点和片段着色器，接着创建缓冲区传入顶点数据，最后调用drawArrays绘制三角形，完成基本渲染流程。

javascript中的webgl基础入门_javascript 3d图形

WebGL（Web Graphics Library）是一种在浏览器中渲染3D图形的技术，无需插件即可直接使用JavaScript操作GPU。它基于OpenGL ES 2.0，允许你在HTML5的<canvas>元素上绘制复杂的3D场景。对于刚接触JavaScript 3D图形开发的人来说，理解WebGL的基础结构和工作流程是关键。

创建WebGL上下文

要开始使用WebGL，第一步是获取一个WebGL渲染上下文。这通常通过<canvas>元素完成。

示例代码：

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
  alert('你的浏览器不支持WebGL');
}

登录后复制

确保页面中有一个<canvas id="myCanvas"></canvas>元素。调用getContext('webgl')会返回一个WebGLRenderingContext对象，它是所有绘图操作的核心接口。

立即学习“Java免费学习笔记（深入）”；

编写着色器程序

WebGL使用着色器（Shader）来控制图形渲染。最基本的两个着色器是顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。

顶点着色器处理每个顶点的位置，片段着色器决定像素的颜色。

// 顶点着色器源码
const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

// 片段着色器源码
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
  }
`;

登录后复制

接下来需要将这些源码编译成着色器对象，并链接成一个程序：

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('Shader编译失败:', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('Program链接失败:', gl.getProgramInfoLog(program));
    return null;
  }
  return program;
}

// 使用方式
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

登录后复制

绘制一个简单三角形

有了着色器程序后，就可以向GPU传递顶点数据并进行绘制。

小门道AI

小门道AI是一个提供AI服务的网站

117

查看详情

定义三个顶点，组成一个三角形：

const positions = [
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

登录后复制

然后将缓冲区数据连接到顶点着色器中的属性变量：

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

登录后复制

最后执行绘制命令：

gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制三角形

登录后复制

理解坐标系与视口

WebGL的默认坐标系是左下为(-1,-1)，右上为(1,1)的归一化设备坐标（NDC）。所有在该范围外的顶点都不会显示。

视口设置决定了canvas上的渲染区域：

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

登录后复制

通常在初始化时设置一次即可，但如果canvas尺寸变化，需要重新设置以保持正确比例。

基本上就这些。虽然原生WebGL API较为底层、代码冗长，但正是这种接近硬件的操作让你能精确控制图形渲染过程。掌握这些基础后，可以进一步学习模型变换、纹理映射、光照计算等内容，或使用Three.js等高级库提升开发效率。

以上就是JavaScript中的WebGL基础入门_javascript 3D图形的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript 回调函数：理解回调地狱与解决方案 JavaScript代码质量检测与静态分析工具使用JavaScript实现一个简单的编译器_js高级应用使用JavaScript实现一个简单的评分组件_javascript UI组件使用JavaScript正则表达式验证DFA字符串