WebGL 基础期末试题（含详细答案）

WebGL基础期末试题（含详细答案）适用范围：前端图形开发、WebGL零基础入门课程考试时长：90分钟满分：100分说明：试题侧重基础原理、核心流程、实操易错点，无偏题怪题，答案贴合实际开发场景，通俗易懂。一、单项选择题（共10题，每题3分，共30分）1.下列关于WebGL的核心定位，说法正确的是（）A.一款专门制作3D建模的桌面软件B.基于OpenGLES的网页2D/3D图形渲染APIC.JavaScript3D图形框架D.只能渲染3D图形，不支持2D绘制2.WebGL渲染的核心载体是（）A.div标签B.canvas标签C.svg标签D.video标签3.WebGL程序中，着色器的两种基础类型是（）A.顶点着色器、片段着色器B.几何着色器、纹理着色器C.像素着色器、矩阵着色器D.坐标着色器、颜色着色器4.顶点着色器的主要作用是（）A.计算图形最终像素颜色B.变换顶点坐标，确定图形顶点位置C.加载纹理图片资源D.处理画布清除颜色5.WebGL标准化设备坐标系（NDC）的坐标范围是（）A.0~1B.-1~1C.0~100D.-100~1006.下列变量中，属于顶点着色器逐顶点接收数据的变量是（）A.uniformB.attributeC.varyingD.const7.用于从顶点着色器向片段着色器传递数据的变量修饰符是（）A.attributeB.uniformC.varyingD.static8.WebGL中缓冲区对象（Buffer）的核心作用是（）A.存储JS传递的顶点、颜色等图形数据B.缓存网页DOM节点数据C.缓存浏览器静态资源D.存储着色器代码文本9.想要清除画布指定颜色，需要调用的核心方法是（）A.gl.clearColor()B.gl.clear()C.gl.drawArrays()D.gl.enable()10.WebGL绘制三角形的基础模式是（）A.gl.POINTSB.gl.LINESC.gl.TRIANGLESD.gl.LINE_LOOP二、填空题（共5题，每题4分，共20分）1.WebGL渲染管线的核心流程：数据准备→__________→着色器编译链接→__________→像素渲染。2.uniform修饰的变量特点是：__________，在一次绘制过程中所有顶点、像素共享同一个值。3.片段着色器的核心输出变量是__________，用于定义单个像素的最终颜色。4.WebGL中实现图形平移、旋转、缩放，最常用的技术是__________运算。5.开启WebGL透明混合效果，需要调用gl.enable()开启__________功能。三、简答题（共3题，每题10分，共30分）1.简述WebGL中attribute、uniform、varying三种变量的区别和使用场景。2.简单说明WebGL绘制一个基础三角形的完整代码执行流程。3.为什么WebGL必须使用着色器，不能直接通过JS绘制图形？四、实操分析题（共1题，20分）阅读以下WebGL核心代码片段，回答问题：javascript

//省略获取canvas、初始化gl上下文代码

constvertexShader=`

attributevec2a_Position;

voidmain(){

gl_Position=vec4(a_Position,0.0,1.0);

}

`;

constfragmentShader=`

precisionmediumpfloat;

voidmain(){

gl_FragColor=vec4(1.0,0.0,0.0,1.0);

}

`;

//省略着色器编译、程序链接代码

constpoints=newFloat32Array([

0.0,0.5,

-0.5,-0.5,

0.5,-0.5

]);

constbuffer=gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW);

consta_Position=gl.getAttribLocation(program,'a_Position');

gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);

gl.enableVertexAttribArray(a_Position);

gl.clearColor(0,0,0,1);

gl.clear(gl.COLOR_BUFFER_BIT);

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

问题：（1）该代码最终渲染出的图形是什么？颜色、位置分别是什么？（6分）（2）代码中Float32Array的作用是什么？为什么不能用普通数组？（7分）（3）gl.STATIC_DRAW参数的含义是什么？适合什么场景使用？（7分）参考答案及详细解析一、单项选择题答案及解析1.答案：B解析：WebGL是浏览器内置的图形渲染API，基于OpenGLES标准，同时支持2D、3D硬件加速渲染。它不是建模软件、不是第三方框架，因此ACD错误。2.答案：B解析：WebGL所有渲染内容都绘制在canvas画布上，其他标签均不支持WebGL上下文创建。3.答案：A解析：WebGL基础渲染只依赖顶点着色器（处理顶点位置）和片段着色器（处理像素颜色）两种核心着色器，无其他基础着色器类型。4.答案：B解析：顶点着色器核心工作是接收顶点坐标数据，经过矩阵变换后，赋值给gl_Position确定每个顶点的最终位置。像素颜色由片段着色器处理。5.答案：B解析：WebGL所有顶点坐标最终都会转换为NDC标准化坐标，X、Y、Z轴范围均为-1~1，超出范围的图形会被画布裁剪。6.答案：B解析：attribute变量用于逐顶点接收JS传递的顶点坐标、顶点颜色等差异化数据。uniform是全局共享数据，varying是传值变量。7.答案：C解析：varying变量专门用于从顶点着色器向片段着色器传递数据，会自动在顶点之间进行插值计算，实现渐变效果。8.答案：A解析：缓冲区是GPU显存中的存储空间，专门用于存储图形顶点、纹理坐标、颜色等渲染数据，提升渲染效率。9.答案：B解析：gl.clearColor()是设置清除颜色（仅配置，不生效），gl.clear()是执行清除操作，真正清空画布。10.答案：C解析：gl.TRIANGLES是最基础的三角形绘制模式，每3个顶点绘制一个独立三角形；POINTS是点，LINES是线段。二、填空题答案及解析1.答案：缓冲区数据绑定、图形绘制解析：标准WebGL渲染管线：准备顶点数据→创建绑定缓冲区→编译链接着色器→提交数据→执行绘制渲染。2.答案：全局统一、只读（绘制期间不变）解析：uniform数据由JS单次传递，绘制过程中所有顶点和片段共用，不会逐顶点变化，常用于全局颜色、变换矩阵、纹理数据。3.答案：gl_FragColor解析：片段着色器必须给gl_FragColor赋值，该变量存储当前像素的RGBA颜色值，是像素渲染的核心输出。4.答案：矩阵解析：WebGL没有自带变换方法，所有平移、旋转、缩放效果，均通过矩阵乘法运算修改顶点坐标实现。5.答案：gl.BLEND解析：开启gl.BLEND后，可通过混合函数实现透明、叠加效果，默认关闭，透明图形会无法正常显示。三、简答题详细答案1.三种变量区别和使用场景（1）attribute：逐顶点变量，数据每个顶点可以不一样，只能用于顶点着色器。主要用来传递顶点坐标、顶点颜色、纹理坐标等顶点独有数据。（2）uniform：全局统一变量，一次绘制中所有顶点、所有像素共用同一个值，顶点着色器和片段着色器都可使用。主要用来传递变换矩阵、全局光照、整体颜色、纹理贴图等全局数据。（3）varying：插值传值变量，用于顶点着色器向片段着色器传递数据。顶点间的数据会自动插值平滑过渡，主要用来实现颜色渐变、纹理渐变等效果。2.WebGL绘制三角形完整执行流程第一步：获取页面canvas画布，初始化WebGL绘图上下文（gl对象）；第二步：编写顶点着色器和片段着色器源码，创建着色器对象、编译、校验编译结果；第三步：创建WebGL程序对象，绑定两个着色器，链接程序并校验链接结果；第四步：定义三角形顶点坐标数据，创建GPU缓冲区，绑定缓冲区并将JS数据写入显存；第五步：获取着色器中attribute变量地址，配置数据读取规则，开启顶点数据读取功能；第六步：设置画布清除颜色，清空画布原有内容；第七步：调用绘制方法，GPU执行着色器程序，完成三角形渲染。3.WebGL必须使用着色器的原因（1）WebGL基于GPU并行渲染架构，GPU的渲染工作完全依赖着色器程序驱动，没有着色器就无法执行渲染逻辑；（2）JS运行在CPU，单线程串行执行，而着色器运行在GPU，多线程并行处理顶点和像素，能实现硬件加速，大幅提升图形渲染效率；（3）WebGL放弃了传统图形API的固定渲染管线，采用可编程渲染管线，所有图形形状、颜色、特效都需要通过自定义着色器代码实现，无法直接通过JS指令绘制。四、实操分析题详细答案（1）渲染结果图形：正三角形；颜色：纯红色（RGB：1,0,0，不透明）；位置：居中显示在画布中心，顶点分别在画布上中、左下、右下位置。（2）Float32Array的作用及优势作用：专门用于存储WebGL顶点浮点型数据的类型化数组，可以精准存储32位浮点数。不能用普通数组的原因：普通JS数组是动态类型、存储精度不固定、存