杭州市滨江区
浙江中医药大学
程序员
学生
Python
C++
  • 未来
    持续完善中。。。
  • 2025-09-26
    创建了网站
λ
👦 牛马大学生
📝 人在不同时期想要的东西是不一样的，尽所能，敬所不能。
Github
实验

实验1

实验2

实验3

实验3.2

实验4

实验5

Christmas
学习

菜鸟教程

Web前端技术图谱

W3Cschool

WebGL基础学习

CSDN

WebGL从入门到精通

b站

three.js视频教程
工具
介绍

简介

WebGL（Web Graphics Library）是基于 OpenGL ES 2.0 的 Web 标准 API，无需插件即可在浏览器中渲染高性能 2D/3D 图形，核心是通过 JavaScript 连接 CPU 与 GPU，利用 GPU 并行计算能力实现高效图形处理。 其核心特点与逻辑可概括为三点：

  • 依赖环境：基于 HTML5元素，所有现代浏览器（Chrome、Firefox、Safari 等）均原生支持，无需额外安装组件。
  • 核心工作流：通过 “准备 Canvas 容器→定义顶点数据→编写 GLSL 着色器（顶点着色器处理顶点位置、片元着色器决定像素颜色）→配置渲染状态→执行渲染” 五步，将数据转化为屏幕像素。
  • 技术定位：对比 Canvas 2D（即时模式渲染，性能有限），WebGL 是 “保留模式” 渲染，由 GPU 负责重复渲染，更适合复杂图形与高帧率需求；实际开发中常结合 Three.js、Babylon.js 等框架简化底层 API 操作，降低开发门槛

实战项目

入门级项目（熟悉框架基础）
  • 3D 模型展示页：用 Three.js 加载 OBJ/GLB 模型（如一个椅子、一个人物），实现旋转查看、缩放、视角切换功能。
  • 数据可视化：将 CSV/JSON 数据转化为 3D 柱状图（如 “各城市季度销售额”，用柱子高度表示数值）
进阶级项目（掌握复杂特效）
  • 简易 3D 游戏：实现一个 “迷宫探索” 游戏（用 Three.js 物理引擎 Cannon.js 实现碰撞检测，键盘控制角色移动）。
  • 交互式动画：制作一个 “3D 产品展示”（如手机模型，鼠标 hover 时显示部件名称，点击切换颜色）。
高级项目（结合多技术栈）
  • 虚拟展厅：用 Three.js + React/Vue 搭建一个线上展厅（支持多场景切换、VR 模式，需结合 WebXR 技术）
  • 实时视频特效：将摄像头画面作为 WebGL 纹理，通过自定义片元着色器实现 “滤镜效果”（如灰度、卡通化、边缘检测）。
WebGL学习常见问题与解决方案
着色器报错，却找不到原因？

原因：

    GLSL 语法严格（如变量类型必须匹配、分号不能漏），且错误信息不直观（如 “第 5 行语法错误” 可能是上一行少了分号）。
解决方案： 用 Chrome DevTools 的 “WebGL 检查器” 查看错误详情（DevTools → More Tools → WebGL Inspector）。 当编写着色器时，先从最简单的代码开始（如仅返回固定颜色），逐步添加逻辑，定位错误点。

3D 物体 “看不见” 或 “显示异常”？

常见原因：

  • 相机位置错误（如相机在物体内部，或物体在相机视锥体外）。
  • 未开启深度测试（gl.enable(gl.DEPTH_TEST)），导致远的物体遮挡近的物体。
  • 顶点数据格式错误（如坐标范围超出 -1~1，WebGL 默认裁剪区是这个范围）。
解决方案：用 Three.js 的 AxesHelper（坐标轴辅助线）或 GridHelper（网格辅助线）定位物体位置，排查相机参数。

WebGL 性能差（卡顿、掉帧）？

核心优化方向

  • 减少 CPU 与 GPU 的数据传输：尽量复用缓冲区，避免频繁创建 / 删除 Buffer。
  • 减少绘制调用次数：将多个小物体合并为一个 “合并几何体”（Three.js 中用 BufferGeometryUtils.mergeGeometries）。
  • 优化纹理：压缩纹理格式（如 WebP），避免使用过大的纹理（如超过 2048x2048）。
  • 使用性能监控工具：Chrome DevTools 的 “性能” 面板录制渲染过程，查看 GPU 耗时。