是时候开始 WebGL 入门学习了!

999 阅读2分钟

前言

Web 3D 的前景确实是越来越大,特别是 WebGPU 也是在稳定前进当中,有很多同学可能苦于找不到好的学习资料,在这里给大家推荐一些学习资源

书籍推荐

WebGL编程指南

入门首选我肯定推荐的是这本书,主要讲解WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。这里的讲解和示例是值得我们反复去看的

交互式计算机图形学——基于WebGL的自顶向下方法

相比较上面的《WebGL编程指南》算法更多,内容更加详实,比较适合深入学习

image.png

在线教程

WebGL 理论基础

webglfundamentals.org/webgl/lesso… 从概念出发了解到 WebGL 的工作原理,但也因此可能一些数学计算会跳过去,如果要深究可能需要自己去找如何得出的结论,里面也可以跳转到 WebGL2 的教程

wgld.org

wgld.org/d/webgl/ 这是一个日文的教程,WebGL2 也是有的

计算机图形学与混合现实研讨会课程

games-cn.org/gamescourse… 一些图形学大佬的免费课程,有课后作业以及助手批改,每年都会重启作业的提交,包括图形学入门,建模,游戏引擎等,特别是101对于图形学入门来说很 nice,但不会教你具体关于 WebGL 或者 OpenGL 的 API,强烈推荐学习

image.png

Ray Tracing in One Weekend

raytracing.github.io/ 一周光追系列书籍,可以跟着一起制作,但是代码不是 js 可能会比较难受,以前跟着用 js 通过用 cpu 计算canvas 的像素点来实现了一个简单的光追案例(下图),虽然计算的慢,但是对于理解原理来说也是非常的不错,因为学习的一开始,真不需要用GPU

在线文档

WebGL API文档

webglfundamentals.org/docs/index.…

最后

主要还是围绕 WebGL 的学习资源来说,所以书籍只推荐了 WebGL 的学习上,后面在线教程有推荐了图形学是因为学习上一定要重视基础理论,还是有必要的,最后如果需要实战,可以学习 Babylon 和 Threejs 去做