【WebGL高级】一些WebGL学习笔记和资料分享（包括WebGL+OpenGL+计算机图形学相关）

最新推荐文章于 2024-09-14 23:19:45 发布
最新推荐文章于 2024-09-14 23:19:45 发布
阅读量1.3k 收藏 11
点赞数 1
分类专栏： JavaScript学习 文章标签： JavaScript WebGL 计算机图形学 OpenGL
本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:https://www.52tech.tech
本文链接：https://blog.csdn.net/m0_37981569/article/details/84678486
版权
本文分享了作者的WebGL学习笔记，涵盖了原生WebGL、Three.js和计算机图形学的相关知识。提供了GitHub源码链接及一系列WebGL、Three.js和JavaScript的中英文学习资料，包括官方API文档、推荐书籍等。此外，还推荐了上海交通大学的计算机图形学课程资源。
摘要由CSDN通过智能技术生成

学习笔记

首先是自己的一些WebGL学习笔记分享吧，这是对于原生WEBGL的学习点滴记录，主要针对WebGL编程指南，WebGL高级编程，以及NeHeWebGL这三个教程学习。由于web3D技术看似很炫酷，但是涉及到的知识也是非常多的，包括JS基础知识，计算机图形学知识，线性代数知识等，学习曲线也是比较陡的。以下就是记录了自己在学习webgl过程中的的代码笔记和学习点滴记录，也算是个总结吧，基本上对代码中的相关位置都做出了详细记录。

 

GItHub源码分享：

https://github.com/xiugangzhang/WebGL-Learn

WEBGL开发视频+文档资料PDF（WEBGL，Three.js，JavaScript中英文学习资料）：

Three.js想学习资料全网首发（视频+文档）
1.官方的学习文档资料：https://threejs.org/docs/#api/animation/Keyfra

最低0.47元/天 解锁文章
小牛itbull
关注
专栏目录
计算机图形学笔记：从 WebGL 到 WebGPU
小谷的日常随笔集
01-27 2336
目前 WebGPU 的标准还没有完全确定下来，需要下载开发者版本的 Chrome Canary 才能开启 WebGPU。(目前正式版中 Chrome 96 / 97 其实已经支持 WebGPU了，但并不是完全支持，98 (据说）会正式支持 WebGPU）。 WebGL 与 WebGPU WebGL 的基础是 OpenGL。OpenGL 的初始版本可以追溯到 1992 年，整个 OpenGL 的设计是基于状态机模型。状态驱动的 OpenGL 难以利用今天 GPU 并行的特点。对于今天的多核计算的设备，使用.
WebGL高级开发指南随书源代码
07-06
WebGL高级编程 开发Web 3D图形_13340873 a4.311 （美）阿尤鲁著 WebGL高级编程 开发Web 3D图形_13340873 a4.311 （美）阿尤鲁著 WebGL高级编程 开发Web 3D图形_13340873 a4.311 （美）阿尤鲁著
WebGL高级编程：开发Web3D图形 PDF（中文版带书签）
weixin_34417814的博客
08-15 828
WebGL高级编程：开发Web3D图形 目录 WebGL简介11.1 WebGL基础11.2 浏览器3D图形吸引人的原因21.3 设计一个图形API31.3.1 即时模式API31.3.2 保留模式API31.4 图形硬件简介41.4.1 GPU41.4.2 帧缓存51.4.3 纹理存储器61.4.4 视频控制器61.5 WebGL图形流水线61.5.1 顶点着色器81.5.2 图元装配1...
计算机基础知识
最新发布
优秀的颜的博客
09-14 1504
计算机基础知识，学语言基础知识
webgl高级课程 前言
code for life
08-14 332
随着WebGPU的兴起以及openGL设计的壁垒势必会对WebGL的地位以及发展方向造成一定的威胁，相信一部分同学已经接触到WebGPU了，对其优点应该也耳熟能详，相比WebGL从设计理念来说先进很多，但我不知道大家是否了解，正因为WebGPU的高效性，能够更加直接、便捷、高效的调取计算机硬件，也会带来相应的缺陷，这就是安全问题。简单介绍下我们的主角WebGL，我想能看到我高级课程的朋友一定是“有备而来”，对于WebGL的诞生以及目前的发展态势也有一定了解，接下里说点不一样的看法，你可能在网上看不到内容。.
Learning WebGL
WebGL专栏
06-07 1117
Learning WebGL翻訳‎ > ‎The Lessons‎ > ‎Lesson 0:始めにオリジナル(英語)はこちらから。 もし翻訳後の文章に間違いや気になる点など有りましたら、お気軽にこのページの下のコメント欄に書き込んでください。 できる限り対応します。レッスン １>>  注）この資料は、オリジナルが投稿されてから何度もアッ
Webgl学习日志（六）——高级几何体（ConvexGeometry）
niuge8905的博客
04-12 1176
在高级几何体中的THREE.ConvexGeometry(points)是一个很有用的函数。他可以把随机的点连起来做成一个封闭的几何体。先看效果：然后看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title>
WebGL学习教程之Three.js学习笔记(第一篇)
12-04
然而，WebGL的原生API对开发者来说是相当复杂的，涉及到顶点着色器和片元着色器的编程，需要掌握一定的数学知识（如线性代数和向量几何）以及图形学原理。这不仅需要耐心，也需要相当的学习投入。 Three.js则是一个...
webgl学习笔记初学记录00
10-15
它是WebGL学习笔记的重点，特别是在初学者阶段。WebGL的核心是光栅化引擎，它能够根据程序员编写的代码在GPU上绘制点、线和三角形，进而构建复杂的3D场景。 在WebGL中，所有图形渲染都是通过GPU来执行的，这需要...
计算机图形学学习笔记.zip
11-20
总的来说，这个学习笔记提供了一个实践计算机图形学基础的好例子，特别是关于WebGL和3D对象操作的实践应用。通过学习这个案例，你可以深入理解如何在浏览器中构建交互式的3D场景，并为未来更复杂的3D图形项目打下...
WebGL 高级技术
weixin_34362790的博客
04-12 295
1.如何实现雾化     实现雾化的方式由多种，这里使用最简单的一种：线性雾化（linear fog）。在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高。线性雾化有起点和终点，起点表示开始雾化之处，终点表示完全雾化之处两点之间某一点的雾化程度与该点与视点的距离呈线性关系。比终点更远的点完全雾化了，即完全看不见了。     某一点雾化的程度可以被定义为雾化因子（fog f...
计算机图形学 基于WebGL的自顶向下方法 第7版
03-29
全部章节的 另一本webGL学习资料，内容为全部内容。自OpenGL之后的另一本计算机图形学资料，适合Web端开发三维的同学
WebGL Programming Guid (英文原版带目录)
12-16
WebGL Programming Guid (英文原版带目录)，OpenGL ES programming Guid作者又一力作
WEBGL英文原版教程
08-23
目　录 第1章　WebGL简介　1 1.1　WebGL——一个技术定义　2 1.2　3D图形学——入门　4 1.2.1　3D坐标系　4 1.2.2　网格、多边形和顶点　5 1.2.3　材质、纹理和光源　5 1.2.4　变换与矩阵　6 1.2.5　相机、透视、视口和投影　6 1.2.6　着色器　7 1.3　WebGL原生API　8 1.3.1　WebGL应用结构剖析　9 1.3.2　画布元素与绘制上下文　9 1.3.3　视口　10 1.3.4　Buffer、ArrayBuffer和类型化数组　10 1.3.5　矩阵　11 1.3.6　着色器　12 1.3.7　绘制图元　13 1.4　本章小结　14 第2章　你的第一个WebGL程序　15 2.1　Three.js——一个JavaScript 3D引擎　15 2.2　建立Three.js运行环境　17 2.3　一个简单的Three.js网页　17 2.4　一个真实的3D示例　20 2.4.1　为场景着色　23 2.4.2　添加纹理映射　24 2.4.3　旋转物体　25 2.4.4　循环重绘和requestAnimationFrame()　25 2.4.5　让页面贴近生活　26 2.5　本章小结　27 第3章　图形　28 3.1　Sim.js——一个轻量级的WebGL模拟框架　29 3.2　创建网格　30 3.3　使用材质、纹理和光源　34 3.3.1　光源的种类　35 3.3.2　使用多重纹理创建更具真实感的场景　37 3.3.3　纹理与透明　42 3.4　构建变换层级　42 3.5　创建自定义几何体　46 3.6　点和线的渲染　49 3.6.1　使用粒子系统绘制点　50 3.6.2　线的绘制　52 3.7　编写着色器　53 3.7.1　WebGL着色器基础　53 3.7.2　Three.js中的着色器　55 3.8　本章小结　60 第4章　动画　61 4.1　动画基础　61 4.1.1　帧动画　61 4.1.2　时间动画　62 4.1.3　插值与补间动画　62 4.1.4　关键帧　63 4.1.5　关节动画　64 4.1.6　蒙皮动画　64 4.1.7　目标变形动画　64 4.2　使用Tween.js库来创建补间动画　65 4.2.1　创建一个基本的补间动画　66 4.2.2　带缓动效果的补间动画　68 4.3　为带关节的模型制作关键帧动画　71 4.3.1　载入模型　71 4.3.2　为模型制作动画　73 4.4　材质和光源动画　76 4.5　纹理动画　78 4.6　蒙皮动画和变形动画　80 4.7　本章小结　80 第5章　交互　81 5.1　点击检测、拾取和投影　81 　　Three.js中的点击检测　82 5.2　处理鼠标移入和点击　85 5.3　处理拖曳　88 　　在拖曳中使用补间动画　91 5.4　使用点击点和法线信息　91 5.5　基于相机的交互　92 5.5.1　利用镜头控制制作一个模型浏览器　93 5.5.2　场景漫游　95 5.6　本章小结　96 第6章　2D与3D的整合　98 6.1　整合动态HTML和WebGL　99 6.1.1　创建DIV元素弹出层　99 6.1.2　利用2D屏幕坐标为3D物体添加注释　103 6.1.3　为3D场景添加背景图片　104 6.2　在2D页面上插入3D浮层　105 6.3　利用2D Canvas创建动态纹理　107 6.4　使用视频作为纹理　115 6.5　渲染动态3D文字　119 6.6　WebGL中的终极整合　121 6.7　本章小结　123 第7章　实战WebGL　124 7.1　如何选择运行库和框架　124 7.2　载入3D内容　126 7.2.1　COLLADA：数字资产交换格式　126 7.2.2　Three.js中的JSON模型文件格式　130 7.2.3　Three.js二进制模型文件格式　134 7.2.4　压缩3D模型　135 7.2.5　Three.js中的JSON场景文件格式　136 7.3　创建3D内容　137 7.3.1　从Blender中导出3D内容　137 7.3.2　把OBJ文件转换为Three.js JSON文件　139 7.3.3　把OBJ文件转换为Three.js二进制文件　139 7.3.4　其他软件或格式的转换　139 7.4　浏览器支持度　140 7.4.1　检测浏览器的WebGL支持　141 7.4.2　在Safari中开启WebGL支持　142 7.5　处理丢失上下文事件　143 7.6　WebGL的安全性　146 7.7　本章小结　149 第8章　你的第一个WebGL游戏　150 8.1　构建游戏的各个部分　151 8.1.1　相机、角色和控制　152 8.1.2　美术设计　159 8.1.3　模型预览器　161 8.1.4　创建粒子系统　163 8.1.5　添加声音　166 8.2　万物归一　167 8.3　本章小结　180 后记　181 附录A　WebGL在线资源　183
webGL高级编程
09-30
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定
WebGL编程指南笔记-第四章 高级变换与动画基础
Kelvin’s blog
06-24 296
WebGL编程指南笔记-第四章 高级变换与动画基础
WebGL图形学
现在学习也不晚
11-23 2904
写在本系列前面 由于我也是半道出家，首先学的前端开发，对3d开发很感兴趣，刚好又感受好时候（h5）浏览器对webgl的支持。让我们这些前端开发者能够在浏览器上面进行3d开发。现在就一直在研究webgl这一块，虽然属于半吊子水平，使用three.js能够开发出来一些相关的功能，满足项目的需求。但是，自己几斤几两还是清楚，所以，最近比较清闲，就准备再学习一本书也算是真正的入门计算机图形学的中层了。 做...
WebGL编程指南（3）高级变换与动画基础
Just for fun的专栏
04-24 432
书本源代码 https://download.csdn.net/download/qfire/10371055本章要介绍的技术，是复杂的WebGL程序的基础。3.1 平移，然后旋转    为了简化编程，大多数WebGL开发者都使用矩阵操作函数库来隐藏矩阵计算的细节，简化与矩阵有关的操作。目前已经有一些开源的矩阵库。     本书矩阵变换库：cuon-matrix.js，允许你通过与OpenGL中类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值