JavaScript WebGL - WebGL 引入（获取绘图上下文、获取最大支持纹理尺寸）

我命由我123452025-12-24 9:17

获取绘图上下文

1、WebGLRenderingContext

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext

WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML <canvas> 元素内绘图
要获得这个接口的对象，可以通过在 <canvas> 元素上调用 getContext 方法，调用时传入 webgl 参数

js 复制代码

const canvas = document.createElement("canvas");

const gl = canvas.getContext("webgl");

console.log(gl);

复制代码

# 输出结果

WebGLRenderingContext {canvas: canvas, drawingBufferWidth: 300, drawingBufferHeight: 150, drawingBufferColorSpace: 'srgb', unpackColorSpace: 'srgb', ...}

2、WebGL2RenderingContext

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL2RenderingContext

WebGL2RenderingContext 接口在底层使用了 OpenGL ES 3.0 为 HTML 的 <canvas> 元素提供了绘图上下文
要获取该接口的对象需要调用一个 <canvas> 标签对象的 getContext 函数，将 webgl2 作为参数传递

js 复制代码

const canvas = document.createElement("canvas");

const gl = canvas.getContext("webgl2");

console.log(gl);

复制代码

# 输出结果

WebGL2RenderingContext {canvas: canvas, drawingBufferWidth: 300, drawingBufferHeight: 150, drawingBufferColorSpace: 'srgb', unpackColorSpace: 'srgb', ...}

获取最大支持纹理尺寸

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/getParameter

js 复制代码

function getMaxTextureSize() {
    const canvas = document.createElement("canvas");

    const gl = canvas.getContext("webgl");
    
    return gl.getParameter(gl.MAX_TEXTURE_SIZE);
}

const maxSize = getMaxTextureSize();

console.log(`最大支持纹理尺寸: ${maxSize}px`);

复制代码

# 输出结果

最大支持纹理尺寸: 8192px