首页/ 学科题库/ webgl/ WebGL 概述与环境准备专题测试
webgl 模拟试卷

WebGL 概述与环境准备专题测试

18 题 40 分钟 难度:★
  • WebGL 技术定位与能力边界: WebGL 在浏览器图形体系中的定位,以及与 Canvas 2D、WebGPU 的能力差异
  • WebGL 与 OpenGL ES 的对应关系: WebGL 1.0/2.0 与 OpenGL ES 2.0/3.0 的版本对应与能力裁剪
  • 浏览器与设备支持判断: 通过 getContext 返回值与调试扩展判断当前设备是否支持 WebGL
  • 开发环境与调试工具搭建: 配置本地静态服务器、浏览器开发者工具与 WebGL 调试扩展
  • Canvas 上下文创建与尺寸适配: 创建 webgl 上下文并处理设备像素比与画布尺寸自适应
  • WebGL 典型应用场景: 三维展示、数据可视化、在线游戏与数字孪生中的 WebGL 落地形态

试卷习题(18 题)

参考答案在文末
判断题
1
判断题

调用 canvas.getContext('webgl') 返回 null 时,说明当前环境不支持 WebGL,程序应当走降级分支。

A

对

B

错

2
判断题

纯二维图表、简单动画与文本排版使用 Canvas 2D、SVG 或 CSS 实现,通常比使用 WebGL 更轻量。

A

对

B

错

3
判断题

canvas 元素的 width、height 属性决定渲染缓冲的像素数量,与 CSS 设置的显示尺寸相互独立。

A

对

B

错

4
判断题

WebGL 1.0 对应的图形规范是 OpenGL ES 2.0。

A

对

B

错

5
判断题

WebGL 是浏览器内置的图形接口,无需安装任何第三方插件即可使用。

A

对

B

错

6
判断题

开发 WebGL 页面时应通过本地 HTTP 静态服务器访问,直接用 file:// 打开可能导致纹理上传失败。

A

对

B

错

单选题
7
单选题

WebGL 2.0 对应以下哪一套图形规范?

A

OpenGL ES 1.1

B

OpenGL ES 2.0

C

OpenGL ES 3.0

D

OpenGL 4.6

8
单选题

需要获取当前设备真实的显卡厂商与型号来排查兼容问题时,应该怎么做?

A

读取 navigator.userAgent 字符串

B

启用 WEBGL_debug_renderer_info 扩展,再读取 UNMASKED_VENDOR_WEBGL 与 UNMASKED_RENDERER_WEBGL

C

读取 gl.getParameter(gl.VERSION)

D

读取 window.devicePixelRatio

9
单选题

页面出现黑屏且控制台没有任何报错时,最有效的排查手段是什么?

A

反复修改着色器代码试错

B

使用 Spector.js 一类抓帧工具查看一帧的完整 WebGL 调用链

C

升级显卡驱动后重试

D

在渲染循环中每帧调用 gl.getError 检查

10
单选题

在设备像素比为 2 的手机上,为避免 WebGL 画面模糊,正确的处理方式是什么?

A

只设置 CSS 宽度和高度即可

B

把 canvas 的 width 与 height 设为 CSS 尺寸乘以 2,并同步调用 gl.viewport

C

把 CSS 宽高设为画布属性尺寸的两倍

D

开启 antialias 即可自动解决

11
单选题

WebGL 在浏览器图形体系中的核心定位是什么?

A

三维场景管理引擎,自带相机与光照

B

浏览器内置的 GPU 绘图接口,负责把图形画到画布上

C

CSS 动画与过渡的底层实现规范

D

图片压缩与编解码工具库

12
单选题

以下哪一类场景最适合选用 WebGL 实现?

A

按钮的悬浮渐变动画

B

大量文本的排版与换行

C

十万级数据点的三维可视化

D

静态产品图片的展示

多选题
13
多选题

关于 WebGL 的支持检测与上下文管理,以下说法正确的是?

A

应按 webgl2、webgl、experimental-webgl 的顺序依次尝试获取上下文

B

浏览器对同一页面同时存在的 WebGL 上下文数量有上限

C

上下文丢失可通过 webglcontextlost 与 webglcontextrestored 事件处理

D

只要浏览器支持 WebGL,所有可选扩展就一定存在

14
多选题

相比 WebGL 1.0,WebGL 2.0 原生支持以下哪些能力?

A

多重渲染目标(MRT)

B

统一缓冲(UBO)

C

纹理数组与三维纹理

D

几何着色器

15
多选题

搭建 WebGL 开发与调试环境时,以下做法正确的是?

A

用 npx serve 或 python -m http.server 启动本地静态服务器

B

跨域图片设置 crossOrigin 并让服务端返回 CORS 响应头

C

把调试扩展与详细错误日志保留到生产环境

D

至少在移动端真机上验证渲染结果

16
多选题

关于 WebGL 与 Canvas 2D 的差异,以下说法正确的是?

A

Canvas 2D 由 CPU 逐像素绘制,WebGL 通过 GPU 并行渲染

B

WebGL 可以渲染三维图形,Canvas 2D 只提供二维绘图命令

C

WebGL 必须安装浏览器插件后才能运行

D

两者可以叠加在同一个页面上分别绘制不同内容

17
多选题

关于画布尺寸、视口与清屏,以下说法正确的是?

A

画布尺寸变化后必须重新调用 gl.viewport

B

gl.viewport 的参数单位是渲染缓冲像素,而不是 CSS 像素

C

设备像素比越高画面越清晰,因此应始终使用原始 DPR 不做限制

D

逐帧渲染动画时通常需要先调用 gl.clear 清屏

18
多选题

以下哪些属于 WebGL 的典型应用场景?

A

产品三维展示与配置

B

数字孪生大屏

C

在线三维游戏

D

纯文本编辑器的排版渲染

参考答案
1.正确 2.正确 3.正确 4.正确 5.正确 6.正确 7.C 8.B 9.B 10.B 11.B 12.C 13.A;B;C 14.A;B;C 15.A;B;D 16.A;B;D 17.A;B;D 18.A;B;C
想在手机上在线作答这套卷子?
使用微信 卷王开发者小程序/App,首页顶部扫一扫识别二维码,即可限时作答并自动判分。
了解产品 App
下一套 → 坐标变换与矩阵基础专题测试