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 参数

constcanvas=document.createElement("canvas");constgl=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 作为参数传递

constcanvas=document.createElement("canvas");constgl=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

functiongetMaxTextureSize(){constcanvas=document.createElement("canvas");constgl=canvas.getContext("webgl");returngl.getParameter(gl.MAX_TEXTURE_SIZE);}constmaxSize=getMaxTextureSize();console.log(`最大支持纹理尺寸:${maxSize}px`);

# 输出结果 最大支持纹理尺寸: 8192px