企业官网建设流程全解析

• 图形学

导读

本文基于 webgl-fundamentals 仓库韩文版教程体系中的《질문 및 답변（Q&A）》索引文档（webgl/lessons/ko/webgl-qna.md，与英文版 webgl/lessons/webgl-qna.md 一一对应）编写而成。该索引汇聚了 78 篇围绕 WebGL 实际开发痛点的问答文章，覆盖图像处理、绘制性能、GLSL 着色器、WebGL2 新特性等主题。读完本文，你将掌握该问答库的整体知识地图，了解每篇问答所解决的具体问题与核心方案，并能依据索引链接快速定位到可运行的示例代码，将问答中的思路直接落地到自己的 WebGL 项目中。

索引文档概述：Q&A 板块的定位与组织结构

webgl-qna.md是一份纯粹的主题索引（index）文档，它不包含长篇教程正文，而是以“问与答”链接列表的形式，将仓库中分散在各处的 WebGL 实战问答统一编排起来。韩文版与英文版在标题、描述、条目数量与顺序上完全一致：

• Title：질문 및 답변（韩文）/Questions and Answers（英文）
• Description：무작위 질문 및 답변（韩文）/Random Questions and Answers（英文）
• TOC：질문 및 답변/Questions and Answers

索引整体由若干个以---分隔的分组构成，每组包含 3～6 个链接条目，最后单独开辟WebGL2小节。这种分组并非严格按主题领域切分（因此文档自述为“random questions”），但通读全部条目后，仍可归纳出几大类高频问题：图像与滤镜效果、绘制调用与性能优化、GLSL 着色器技巧、WebGL 与 WebGL2 的差异与兼容、以及 readPixels/纹理数据读取等 API 细节。

索引中绝大多数条目链接到仓库内的问答文章（.html链接，对应webgl/lessons/下的同名.md源文件），仅有一条为外部链接——How to draw thick lines in WebGL，用于补充说明“绘制粗线”这一 WebGL 经典难题的通用解法。在整理本文时，除该外部条目外，其余全部链接均已核对为仓库内真实存在的文件。

Q&A 文章的统一结构：问题、解答与可运行示例

索引指向的每一篇问答文章都遵循高度一致的写作模板，这使得整库具有极强的可读性与可检索性。以 webgl/lessons/webgl-qna-pure-webgl-dashed-line.md 为例，其结构为：

1. Question（问题）：完整引用来自 Stack Overflow 的真实提问，保留用户原始代码与描述，例如“如何在纯 WebGL 中绘制虚线、如何在顶点着色器中计算LengthSoFar”；
2. Answer（解答）：由 webgl-fundamentals 作者给出深入解答，包含原理说明与可复用的代码片段；
3. 可运行示例：以{{{example url="../webgl-qna-pure-webgl-dashed-line-example-1.html"}}}形式嵌入配套演示页面，读者可直接在浏览器中验证；
4. 版权声明：每篇文末标注问题与引用内容的来源（Stack Overflow 链接及 CC BY-SA 许可信息）。

这种“问题→解答→示例”的结构，是整套 Q&A 库的核心阅读方式：遇到实际问题时，先在索引中按关键词找到对应条目，再通过示例 HTML（位于 webgl/ 目录，命名规则为webgl-qna-<主题>-example-N.html）查看完整实现。

核心问答详解（一）：图像与视觉效果类

索引中图像处理与视觉特效相关的问答数量最多，涵盖从复古像素风到现代滤镜的各类需求：

Droste 效果与渲染到纹理

WebGL Droste 효과（WebGL Droste 效果） 探讨如何在立方体表面实现经典的 Droste 递归嵌套效果。提问者最初的做法是：每帧用 Canvas 2D 上下文对 WebGL canvas 截图，再将该截图作为纹理贴回立方体，结果性能只有 30 FPS。作者的解答指出正确做法是渲染到纹理（render to texture），其关键代码为：

const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0 /* level */);

渲染到纹理时绑定该帧缓冲：

gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.viewport(0, 0, textureWidth, textureHeight);

渲染回 canvas 时解除绑定：

gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

解答特别强调：不能在同一时刻对同一纹理既读又写，因此 Droste 效果需要两张纹理交替使用（例如“绘制图像到纹理 A → 将上一帧（纹理 B）绘制到纹理 A → 用纹理 A 绘制立方体到纹理 B → 将纹理 B 绘制到 canvas”），并提供了配套示例 webgl-qna-webgl-droste-effect-example-1.html。此外，作者指出 WebGL 的双缓冲（front/back buffer）不能直接被当作纹理使用，但可以用gl.copyTexImage2D/gl.copyTexSubImage2D将 canvas 内容拷贝进纹理，只是这种方案灵活性较差且通常更慢。相关底层原理可进一步参考 webgl-render-to-texture.md。

图像扭曲、涂抹与像素化

• 图像扭曲（image warping）：webgl-qna-create-image-warping-effect-in-webgl讨论在 WebGL 中实现扭曲变形效果；
• smudge/liquify 涂抹液化：Creating a smudge/liquify effect 与 How to make a smudge brush tool 分别从“效果实现”与“工具制作”两个角度展开，是纹理读写与后处理结合的代表案例；
• 像素化（pixelize）：How to get pixelize effect in webgl? 讲解如何在片段着色器中降低有效分辨率来模拟像素风；
• 调色板图形：Emulating palette based graphics in WebGL 讨论用纹理查找表模拟经典 8-bit 调色板配色。

纹理采样的精度问题

How to use textures as data 是纹理数据读取的经典问答，核心给出了 WebGL1 中按像素坐标寻址纹素的标准公式：

vec2 pixelCoord = vec2(x, y); vec2 textureDimension = vec2(textureWidth, textureHeight); vec2 texcoord = (pixelCoord + 0.5) / textureDimensions; vec4 pixelValue = texture2D(someSamplerUniform, texcoord);

因为纹理坐标定义在“像素边缘”上（对 2×1 纹理，像素 A 的中心在 0.25, 0.5，像素 B 的中心在 0.75, 0.5），如果不加0.5偏移，采样点会落在像素之间，导致取到错误的纹素。作者同时建议数据纹理应设置gl.NEAREST过滤，并指出数据纹理受限于 GPU 缓存局部性——频繁跳变采样会显著拖慢性能。相关完整示例见 webgl-pulling-vertices.md 与 webgl-data-textures.md。

核心问答详解（二）：绘制、性能与优化类

索引中另一大类问题是围绕绘制调用与性能展开的：

绕过 gl_PointSize 限制绘制超大点

Working around gl_PointSize limitations webGL 讨论了一个数据可视化中的典型场景：渲染 6.8 万个节点时，gl_PointSize在提问者的显卡上被限制为最大 63 像素，缩放时点不会继续变大。作者的解决方案是自建点系统：用两个缓冲区——一个是按点数重复的 2D 单位四边形（unit quad）数组，另一个是将每个点位置重复 4 次的中心点数组——然后在顶点着色器中把单位四边形按所需尺寸展开：

attribute vec2 a_unitQuad; attribute vec4 a_position; uniform mat4 u_view; uniform mat4 u_viewProjection; void main() { float fake_gl_pointsize = 150; // 取视图空间中的 x/y 轴（单位向量，垂直于视线方向） vec3 x_axis = u_view[0].xyz; vec3 y_axis = u_view[1].xyz; // 乘以期望的尺寸 x_axis *= fake_gl_pointsize; y_axis *= fake_gl_pointsize; // 用单位四边形在原点周围构造四边形 vec3 local_point = vec3(x_axis * a_unitQuad.x + y_axis * a_unitQuad.y); // 加上四边形实际所在的位置 local_point += a_position; gl_Position = u_viewProjection * local_point; }

关键在于理解“视图空间”与“屏幕空间”的区别：屏幕空间展开与gl_Point行为一致，但若希望点在 3D 场景中随距离自然缩放，则应采用视图空间展开。

绘制缓冲淡出与残影效果

How to fade the drawing buffer 解决的是“如何让绘制缓冲随时间逐渐淡出”的问题。作者给出两种方案：如果需要保留部分元素（如飞船、小行星）不淡出，则需重绘全部内容并手动降低待淡出元素的 alpha；如果只需整体淡出，则可用后处理式双帧缓冲，交替混合两张纹理：

gl_FragColor = mix(textureColor, fadeColor, mixAmount);

帧间交替逻辑为：fadeFb1混合到fadeFb2→ 在新内容上绘制 → 将fadeFb2呈现到 canvas，下一帧交换两个缓冲的角色。作者特别提醒绘制时不要执行 clear，否则无法保留上一帧结果。配套示例见 webgl-qna-how-to-fade-the-drawing-buffer-example-1.html，其实现使用了 twgl 简化代码；帧缓冲设置的详细教程可参考 webgl-image-processing-continued.md。

其他性能相关问答

• FPS 记录与 GPU 负载测量：Recording FPS in WebGL、Is it possible to measure rendering time in webgl using gl.finish()? 与 A simple way to show the load on the GPU's vertex and fragment processing? 从指标侧入手；
• 粒子系统：Efficient particle system in javascript? (WebGL) 与 How to process particle positions 覆盖 CPU 与 GPU 两种粒子实现路径；
• 批量绘制：How to combine more text drawing into fewer draw calls、Drawing Many different models in a single draw call、Sorting and optimizing instanced rendering 与 Optimize drawing lots of large images 是合并绘制调用、降低状态切换成本的典型实践；
• 大量图元绘制：The fastest way to draw many circles、How to render large scale images like 32000x32000、Why does WebGL take more memory than Canvas 2D 与 How to figure out how much GPU work to do without crashing WebGL 涉及显存占用与 GPU 工作量评估；
• 渲染节奏：Rendering slowly over time 与 How to load images in the background with no jank 关注避免卡顿、渐进式渲染。

核心问答详解（三）：GLSL 着色器与绘制技巧类

索引中大量条目直接围绕着色器编程展开，是 GLSL 学习者的“踩坑合集”：

• 绘制技巧：How to Achieve Moving Line with Trail Effects、Pure WebGL Dashed Line、How to draw correctly textured trapezoid polygons、Don't blend a polygon that crosses itself、How to detect clipped triangles in the framgment shader 与 How to create a torus（环形曲面几何生成）；
• 颜色与混合：How to blend colors across 2 triangles、How to control the color between vertices、How to use texture, and color also in WebGL? 与 GLSL shader to support coloring and texturing；
• 纹理应用：How to bind an array of textures to a WebGL shader uniform?、How to prevent texture bleeding with a texture atlas、Tex image TEXTURE_2D level 0 is incurring lazy initialization 与 WebGL 2D tilemaps（2D 瓦片地图，作者建议在片段着色器中逐像素查瓦片并配合gl.NEAREST采样来根治图集出血问题）；
• 精度与类型：When to choose highp, mediump, lowp in shaders、Setting the values of a struct array from JS to GLSL 与 Can I mute the warning about vertex attrib 0 being disabled?；
• 高级着色技巧：How to make fisheye skybox shader、Show a night view vs a day view on a 3D Earth sphere、Drawing 2D image with depth map to achieve pseudo-3D effect 与 Apply a displacement map and specular map；
• 蒙版与通道：How to use a 2d sprite's transparency as a mask、How to tell if an image has an alpha channel 与 Passing in per sprite alpha values when batching。

核心问答详解（四）：API 细节、交互与 WebGL2 专区

readPixels 与数据读取

索引中与像素读取相关的问答集中在 How to read a single component with readPixels 与 I get invalid type error when calling readPixels，前者讲解如何从缓冲区读取单一分量，后者分析readPixels调用中类型参数不匹配导致INVALID_TYPE的常见原因，是数据回读与 GPGPU 场景的高频踩坑点。

交互与相机

• 鼠标坐标：How to get the 3d coordinates of a mouse click 讲解屏幕坐标到 3D 世界坐标的反投影；
• 缩放与相机：How to implement zoom from mouse in 2D WebGL、Zooming to and stopping at object in a scene in WebGL 与 How can I move the perspective vanishing point from the center of the canvas?；
• FPS 相机：FPS-like camera movement with basic matrix transformations 用基础矩阵变换实现第一人称视角移动，可与 webgl-3d-camera.md 结合阅读；
• 其他交互：Get the size of a point for collision checking、How can I compute for 500 points which of 1000 line segments is nearest to each point?、How to determine the average brightness in a scene? 与 How to make WebGL canvas transparent。

WebGL2 专区

索引末尾单独开辟的WebGL2小节集中收录了 WebGL2 专属能力相关问答：

• Accessing textures by pixel coordinate in WebGL2：核心讲解texelFetch按像素坐标读取纹素，给出示例vec4 color = texelFetch(someUniformSampler, ivec2(pixelX, pixelY), intMipLevel);，并演示了用 R8/RGBA8 数据纹理一次处理多组数组（配套示例 example-1、example-2、example-3）；
• How can I get all the uniforms and uniformBlocks：介绍如何枚举着色器的所有 uniform 与 uniform block；
• How can I create a 16bit historgram of 16bit data：讨论在 WebGL2 中利用浮点纹理与texelFetch构建 16 位数据直方图的方案；
• How to process particle positions：讲解将粒子位置存储在纹理中、在 GPU 侧完成更新的做法。

此外，How to support both WebGL and WebGL2 虽然是 WebGL1 兼容性话题，但它给出了双版本支持的实用策略：使用twgl.addExtensionsToContext(gl)将 WebGL1 扩展 API 统一到 WebGL2 风格的命名（如gl.drawArraysInstanced(...)替代ext.drawArraysInstancedANGLE(...)），并指出 WebGL2 在纹理格式上存在差异（如浮点纹理在 WebGL2 中需使用gl.RGBA32F）。作者最终的结论是“优先二选一”：能在 WebGL1 完成的需求不必强上 WebGL2，反之真正需要 WebGL2 特性的场景往往无法轻易回退。

问答库的配套资源与阅读路线

整套 Q&A 库并非孤立存在，它与仓库其他教程模块互相补充：

配套的 101 个可运行示例 HTML 全部位于 webgl/ 根目录，命名规则为webgl-qna-<主题>-example-<编号>.html（例如 webgl-qna-pure-webgl-dashed-line-example-1.html、webgl-qna-how-to-create-a-torus-example-1.html、webgl-qna-webgl-2d-tilemaps-example-1.html）。建议的阅读路线是：先通读本文梳理的知识地图，按需进入对应问答文章阅读“问题 + 解答”，再打开配套示例直接观察运行效果，最后回到基础教程补齐原理。对于韩文读者，webgl/lessons/ko/webgl-qna.md 提供了同等的韩文索引；其余语言版本可参考各语言目录（如 webgl/lessons/ja/、webgl/lessons/ru/）中的对应索引文件。

结语：把问答索引当作 WebGL 开发的“故障手册”

正如索引文档所自称的“Random Questions and Answers”，这份问答库的价值不在于系统化的教程编排，而在于以真实开发者的真实问题为入口，覆盖 WebGL 生态中那些最容易卡住人的细节——从gl_PointSize的硬件上限、纹理坐标的 0.5 像素偏移，到帧缓冲双缓冲的淡出技巧、WebGL1/WebGL2 的 API 差异。配合仓库中可直接运行的示例与基础教程，这份索引足以成为日常 WebGL 开发中随手可查的“故障手册”：遇到问题，先在 webgl-qna.md 中定位主题，再深入对应问答与示例，最后回到基础章节补全原理，即可高效地将问答经验转化为自己的代码。

• 图形学