|
|
|
|
<canvas id="custom" class="canvas" data-fragment-url="examples/moon.frag" data-textures="examples/images/moon-texture.jpg" width="350px" height="350px"></canvas>
|
|
|
|
|
|
|
|
|
|
# The Book of Shaders
|
|
|
|
|
*by [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)*
|
|
|
|
|
|
|
|
|
|
This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
|
|
|
|
|
|
|
|
|
|
这是一本关于 Fragment Shaders(片段着色器)的入门指南,它将一步一步地带你领略其中的纷繁与抽象。
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=B5FSVSHGEATCG" style="float: right;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt=""></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
## 关于翻译
|
|
|
|
|
这本书是 Patricio 的 Book of Shaders 的中文翻译。我们希望借此将 Shader 这个有趣有益的工具介绍给更多国人。能力所限,不免有误,如有翻译不当,也请多多指出。
|
|
|
|
|
|
|
|
|
|
感谢 Patricio 对我们的翻译的信任和支持。
|
|
|
|
|
|
|
|
|
|
## 目录
|
|
|
|
|
|
|
|
|
|
* [关于这本书](00/)
|
|
|
|
|
|
|
|
|
|
* 开始
|
|
|
|
|
* [什么是着色器(shader)?](01/)
|
|
|
|
|
* [“Hello world!”](02/)
|
|
|
|
|
* [Uniforms值](03/)
|
|
|
|
|
* [运行你的shader](04/)
|
|
|
|
|
|
|
|
|
|
* 用算法绘画
|
|
|
|
|
* [造型函数](05/)
|
|
|
|
|
* [颜色](06/)
|
|
|
|
|
* [形状](07/)
|
|
|
|
|
* [矩阵](08/)
|
|
|
|
|
* [图案](09/)
|
|
|
|
|
|
|
|
|
|
* 生成设计
|
|
|
|
|
* [Random函数](10/)
|
|
|
|
|
* [noise函数](11/)
|
|
|
|
|
* 布朗运动
|
|
|
|
|
* 分形
|
|
|
|
|
|
|
|
|
|
* 图像处理:
|
|
|
|
|
* 纹理
|
|
|
|
|
* 图像操作
|
|
|
|
|
* 内核卷积
|
|
|
|
|
* 过滤器
|
|
|
|
|
* 其他效果
|
|
|
|
|
|
|
|
|
|
* 模拟
|
|
|
|
|
* 乒乓
|
|
|
|
|
* Conway生命游戏
|
|
|
|
|
* 涟漪
|
|
|
|
|
* 水彩
|
|
|
|
|
* 反应扩散
|
|
|
|
|
|
|
|
|
|
* 3D 图形
|
|
|
|
|
* 灯光
|
|
|
|
|
* 法线贴图
|
|
|
|
|
* 凹凸贴图
|
|
|
|
|
* 光线跟踪
|
|
|
|
|
* 环境贴图 (spherical and cube)
|
|
|
|
|
* 折射和反射
|
|
|
|
|
|
|
|
|
|
* [附录:](appendix/) Other ways to use this book
|
|
|
|
|
* [如何离线阅读此书?](appendix/)
|
|
|
|
|
* [如何在RaspberryPi上运行示例?](appendix/)
|
|
|
|
|
* [如何打印这本书](appendix/)
|
|
|
|
|
|
|
|
|
|
* [示例墙](examples/)
|
|
|
|
|
|
|
|
|
|
* [词汇表](glossary/)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 关于作者
|
|
|
|
|
|
|
|
|
|
[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, 布宜诺斯艾利斯, 阿根廷) 是一个驻地纽约的艺术家、开发者。他致力于探索有机和人造、模拟信号和数字信号、个体和整体之间的空间。他用代码这种富有表达力的语言来创造更美好的事物。
|
|
|
|
|
|
|
|
|
|
Patricio 研习和实践精神疗法(psychotherapy)和表达性艺术治疗(expressive art therapy)。他毕业于 Parsons 的设计与科技专业,且目前执教于此。目前他作为 Mapzen 的图形开发工程师制作一些开源的 mapping tool。
|
|
|
|
|
|
|
|
|
|
<div class="header"><a href="https://twitter.com/patriciogv" target="_blank">Twitter</a> - <a href="https://github.com/patriciogonzalezvivo" target="_blank">GitHub</a> - <a href="https://vimeo.com/patriciogv" target="_blank">Vimeo</a> - <a href="https://www.flickr.com/photos/106950246@N06/" target="_blank"> Flickr</a></div>
|
|
|
|
|
|
|
|
|
|
## 关于译者
|
|
|
|
|
|
|
|
|
|
* [Artrustee](https://github.com/Artrustee)
|
|
|
|
|
* [tornote](http://tornote.com/)
|
|
|
|
|
|
|
|
|
|
## 致谢
|
|
|
|
|
|
|
|
|
|
感谢我的妻子 [Jen Lowe](http://www.datatelling.com/), 感谢她无条件的支持、帮助以及编辑此书。
|
|
|
|
|
|
|
|
|
|
感谢 [Scott Murray](http://alignedleft.com/) 给予的启发和建议。
|
|
|
|
|
|
|
|
|
|
感谢 [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) 的 [日语翻译 (日本語訳)](?lan=jp)
|
|
|
|
|
|
|
|
|
|
感谢 [Karim Naaji](http://karim.naaji.fr/) 在代码和想法上的支持和贡献。
|
|
|
|
|
|
|
|
|
|
感谢所有相信这个项目志友们[contributed with fixes](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) 以及大家的捐赠.
|
|
|
|
|
|
|
|
|
|
## 获取新的章节
|
|
|
|
|
|
|
|
|
|
注册以获得最新章节, 或 [在 Twitter 上关注:](https://twitter.com/bookofshaders)
|
|
|
|
|
|
|
|
|
|
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://tinyletter.com/thebookofshaders" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/thebookofshaders', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"><a href="https://tinyletter.com/thebookofshaders"><p><label for="tlemail">请输入你的Email地址</label></p></a><p><input type="text" style="width:140px" name="email" id="tlemail" /></p><input type="hidden" value="1" name="embed"/><input type="submit" value="订阅" /><p><a href="https://tinyletter.com" target="_blank"></a></p></form>
|