-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
83 lines (66 loc) · 5.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filament中文网</title>
<link rel="stylesheet" href="./jscss/style.css">
<script src="./jscss/scale.fix.js"></script>
</head>
<body><div class="wrapper">
<header>
<h1><a href="https://jerkwin.github.io/filamentcn/">Filament中文网</a></h1>
<p>收集/整理/翻译 Filament 资料/文档/教程</p>
<p class="view"><a href="#缘起">缘起</a><small> 为什么</small>
<a href="#概述">概述</a><small> 一句话介绍</small></p>
<p class="view"><a href="#文档">文档</a><small> 构建, 材质</small>
<a href="#说明">说明</a><small> API, PPT</small></p>
<p class="view"><a href="#教程">教程</a><small> 三角, 球, 模型</small>
<a href="#示例">示例</a><small> 贴图, 材质, 动态</small></p>
<p><img src="./jscss/二维码.png" alt=""></p>
</header>
<section>
<h2 id="缘起">缘起</h2>
<p>一直以来, 我都对计算机图形学很感兴趣, 但无奈与平时工作相距甚远, 外兼视力不佳, 所以只能关注一下, 没有深入研究.</p>
<p>前几年研究PBR的时候偶然发现了<a href="http://www.curious-creature.com/2017/08/14/physically-based-rendering-demo/">Romain Guy的PRB渲染demo</a>, 当时就有些惊异于其效果, 遂将其下载仔细研究, 以期能改进一下做成一个自用的WegGL库. 就这样, 断断续续地, 开始了我的WenGL学习之旅. 从最开始的不明所以, 逐渐知晓了着色器, 材质, 颜色, 光照, 进而是天空盒, IBL, 色调映射, 等等, 等等. 越学越觉得渲染领域涉及面太广, 个人很难完全精通掌握, 只能将自己限定在一个小的范围内, 对其他范围做些单纯的了解.</p>
<p>当我终于将Guy的demo改造好, 准备发布的时候, 上网一查, 才赫然发现谷歌以已经开源了<a href="https://github.com/google/filament">Filament</a>, 其最初来源就是Guy的demo. 这样我的改造就意义不大了, 所以只能换成先学习这个引擎了.</p>
<p>因此我就创建了<a href="https://jerkwin.github.io/filamentcn/">filamentcn项目</a>, 用以放置 收集/整理/翻译 的Filament 资料/文档/教程, 作为学习的参考和记录.</p>
<p>目前我已经翻译完成了Filament最重要的两篇材质文档, 外加三篇教程</p>
<p>其中的两篇材质文档是我目前看过的 <strong>最好的</strong> PBR资料, 对PBR渲染从原理到实现细节都有详细说明. 根据这些说明, 再加上一些图形学的知识, 完全可以实现自己的PBR.</p>
<p>我毕竟只是业余学习过计算机图形学, 很多名词的翻译不一定符合业内习惯. 如果你发现有不符合习惯的地方, 请指出修正. 如果你发现有错误和不合理的地方, 更要指出. 谢谢.</p>
<p>此外, 我还建立了一个QQ群, 用以方便大家交流.</p>
<h2 id="概述">Filament概述</h2></p>
<p><a href="https://github.com/google/filament">Filament</a>是一个用C++编写的基于物理的实时渲染器. 它优先考虑移动平台, 但也可用于多个平台.</p>
<p><iframe src="https://google.github.io/filament/webgl/demo_suzanne.html"></iframe></p>
<p>我们尽量保持Filament体积小, 加载快, 并专注渲染的特性. 例如, Filament不会在运行时编译材质. 相反, 我们提供了一个命令行工具<a href="https://github.com/google/filament/tree/master/tools/matc"><code>matc</code></a>, 用于离线编译材质.</p>
<h2 id="文档">Filament文档</h2>
<ul class="incremental">
<li><a href="">下载构建</a></li>
<li><a href="Filament.md.html">材质设计</a> <!--a href="https://google.github.io/filament/Filament.md.html">(原始文档)</a--></li>
<li><a href="Materials.md.html">材质概览</a> <!--a href="https://google.github.io/filament/Materials.md.html">(原始文档)</a--></li>
<li><a href="Material_Properties.pdf">材质参考页</a>
</li>
</ul>
<h2 id="说明">Filament说明</h2>
<ul class="incremental">
<li><a href="https://google.github.io/filament/webgl/reference.html">JavaScript API参考</a></li>
<li><a href="https://prideout.net/slides/filawasm">WebGL Meetup讲演 (2018)</a></li>
</li>
</ul>
<h2 id="教程">Filament教程</h2>
<ul class="incremental">
<li><a href="T1_triangle.md.html">三角形</a> <a href="./tutorial/triangle.html">查看效果</a></li>
<li><a href="T2_redball.md.html">红色球</a> <a href="./tutorial/redball.html">查看效果</a></li>
<li><a href="T3_suzanne.md.html">Blender猴头</a> <a href="./tutorial/suzanne.html">查看效果</a></li>
</ul>
<h2 id="示例">Filament示例</h2>
<ul class="incremental">
<li><a href="https://google.github.io/filament/webgl/parquet.html">贴图材质球</a></li>
<li><a href="https://google.github.io/filament/webgl/suzanne.html">Blender猴头</a></li>
<li><a href="https://google.github.io/filament/webgl/helmet.html">头盔</a></li>
<li><a href="https://prideout.net/knotess/">基本纽结</a></li>
</ul>
</section>
<footer>
<p>本<a href="https://github.com/Jerkwin/filamentcn"> GitHub项目 </a>由<a href="https://github.com/Jerkwin"> Jerkwin </a>维护</p>
</footer>
</div></body>