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

获取绘图上下文

1、WebGLRenderingContext

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

1. WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML <canvas> 元素内绘图

2. 要获得这个接口的对象，可以通过在 <canvas> 元素上调用 getContext 方法，调用时传入 webgl 参数

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

1. WebGL2RenderingContext 接口在底层使用了 OpenGL ES 3.0 为 HTML 的 <canvas> 元素提供了绘图上下文

2. 要获取该接口的对象需要调用一个 <canvas> 标签对象的 getContext 函数，将 webgl2 作为参数传递

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

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