在线天堂www网,麻豆精品一区二区综合av,国产剧情av麻豆香蕉精品

JavaScript WebGL圖形編程

狼影

發(fā)布： 2025-10-16 20:03:03

原創(chuàng)

184人瀏覽過

WebGL是基于OpenGL ES的JavaScript API，可在網(wǎng)頁canvas中渲染2D/3D圖形，利用GPU加速，無需插件。它通過頂點和片元著色器（用GLSL編寫）控制渲染流程，核心步驟包括獲取上下文、編譯著色器、鏈接程序、傳入頂點數(shù)據(jù)并繪制。示例中繪制紅色三角形需設(shè)置頂點位置、顏色，并調(diào)用drawArrays。attribute傳遞頂點數(shù)據(jù)，uniform傳全局參數(shù)，varying用于著色器間通信。盡管Three.js等庫簡化開發(fā)，掌握原生WebGL有助于性能優(yōu)化與調(diào)試。

javascript webgl圖形編程

WebGL 讓你能在網(wǎng)頁上直接繪制高性能的 2D 和 3D 圖形，而 JavaScript 是驅(qū)動它的核心語言。它不依賴插件，直接利用 GPU 加速，適合做可視化、游戲、動畫等圖形密集型應(yīng)用。

WebGL 是什么？

WebGL（Web Graphics Library） 是一套基于 OpenGL ES 的 JavaScript API，可以在 canvas 元素中渲染交互式 3D 和 2D 圖形。目前主流瀏覽器都支持 WebGL 1.0 和 WebGL 2.0。

它通過著色器（Shader）控制圖形渲染流程，使用 GLSL（OpenGL Shading Language）編寫頂點和片元著色器代碼。

基本使用步驟

要在頁面中使用 WebGL，需要幾個關(guān)鍵步驟：

立即進入“豆包AI人工智官網(wǎng)入口”；

立即學(xué)習(xí)“豆包AI人工智能在線問答入口”；

獲取 canvas 元素并創(chuàng)建 WebGL 上下文
編寫頂點著色器和片元著色器代碼
編譯著色器并鏈接成程序（program）
準(zhǔn)備頂點數(shù)據(jù)并傳入 GPU
指定著色器如何讀取數(shù)據(jù)
調(diào)用 draw 方法渲染

示例：繪制一個紅色三角形

<pre class="brush:php;toolbar:false;">
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
  alert('WebGL not supported');
}

// 頂點著色器源碼
const vsSource = `
  attribute vec4 aVertexPosition;
  void main() {
    gl_Position = aVertexPosition;
  }
`;

// 片元著色器源碼
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 紅色
  }
`;

// 編譯著色器函數(shù)
function compileShader(gl, source, type) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

// 初始化 shader 程序
const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error('Program link error:', gl.getProgramInfoLog(shaderProgram));
}

gl.useProgram(shaderProgram);

// 創(chuàng)建頂點數(shù)據(jù)緩沖區(qū)
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 三個頂點（x, y）
const positions = [
  0.0,  0.5,
 -0.5, -0.5,
  0.5, -0.5
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 獲取著色器中 attribute 變量的位置
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');

// 啟用 attribute 并配置讀取方式
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 清除畫布并繪制
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BIT);

gl.drawArrays(gl.TRIANGLES, 0, 3);

登錄后復(fù)制