Step-by-step guide through the abstract and complex universe of Fragment Shaders.

Overview

The Book of Shaders

by Patricio Gonzalez Vivo and Jen Lowe

This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

Contents

About the Authors

Patricio Gonzalez Vivo (1982, Buenos Aires, Argentina) is a New York based artist and developer. He explores interstitial spaces between organic and synthetic, analog and digital, individual and collective. In his work he uses code as an expressive language with the intention of developing a better together.

Patricio studied and practiced psychotherapy and expressive art therapy. He holds an MFA in Design & Technology from Parsons The New School, where he now teaches. Currently he works as a Graphic Engineer at Mapzen making openSource mapping tools.

Jen Lowe is an independent data scientist and data communicator at Datatelling where she brings together people + numbers + words. She teaches in SVA's Design for Social Innovation program, cofounded the School for Poetic Computation, taught Math for Artists at NYU ITP, researched at the Spatial Information Design Lab at Columbia University, and contributed ideas at the White House Office of Science and Technology Policy. She's spoken at SXSW and Eyeo. Her work has been covered by The New York Times and Fast Company. Her research, writing, and speaking explore the promises and implications of data and technology in society. She has a B.S. in Applied Math and a Master's in Information Science. Often oppositional, she's always on the side of love.

Acknowledgements

Thanks Scott Murray for the inspiration and advice.

Thanks Kenichi Yoneda (Kynd), Nicolas Barradeau, Karim Naaji for contributing with support, good ideas and code.

Thanks Kenichi Yoneda (Kynd) and Sawako for the Japanese translation (日本語訳)

Thanks Tong Li and Yi Zhang for the Chinese translation (中文版)

Thanks Jae Hyun Yoo and June Kim for the Korean translation (한국어)

Thanks Nahuel Coppero (Necsoft) for the Spanish translation (español)

Thanks Raphaela Protásio and Lucas Mendonça for the Portuguese translation (portugues)

Thanks Nicolas Barradeau and Karim Naaji for the French translation (français)

Thanks Andrea Rovescalli for the Italian translation (italiano)

Thanks Michael Tischer for the German translation (deutsch)

Thanks Sergey Karchevsky for the Russian translation (russian)

Thanks Andy Stanton for fixing and improving the pdf/epub export pipeline

Thanks to everyone who has believed in this project and contributed with fixes or donations.

Get new chapters

Sign up for the news letter or follow it on Twitter

Enter your email address

LICENSE

Copyright (c) Patricio Gonzalez Vivo, 2015 - http://patriciogonzalezvivo.com/ All rights reserved.

Comments
  • Can't make PDF on MacOS El Capitan 10.11.6

    Can't make PDF on MacOS El Capitan 10.11.6

    Hi,

    I've been struggling with the process of making a PDF out of the repo. I followed every steps described on the appendix 'How to print this book' and still can't make it work. Any help appreciated. Thanks

    Occurring right after the making of the shader images:

    Generating ./book.pdf from: ./00/tmp.md ./01/tmp.md ./02/tmp.md ./03/tmp.md ./04/tmp.md ./05/tmp.md ./06/tmp.md ./07/tmp.md ./08/tmp.md ./09/tmp.md ./10/tmp.md ./11/tmp.md ./12/tmp.md ./13/tmp.md ./14/tmp.md ./15/tmp.md ./16/tmp.md ./17/tmp.md ./18/tmp.md ./appendix/tmp.md ./examples/tmp.md ./glossary/tmp.md Using the following flags: -N --smart --no-tex-ligatures --toc --standalone --preserve-tabs -V documentclass=scrbook -V papersize=a4 -V links-as-note -S --latex-engine=xelatex Traceback (most recent call last): File "src/parseBook.py", line 107, in <module> returnCode = subprocess.call(texPandocCommand) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 522, in call return Popen(*popenargs, **kwargs).wait() File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 710, in __init__ errread, errwrite) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 1335, in _execute_child raise child_exception OSError: [Errno 2] No such file or directory make: *** [all] Error 1

    opened by benhdkn 8
  • safari web content

    safari web content

    Hello - Every time I pull up GLSL Editor, Safari Web Content crashes. This is a recent predicament. Whenever I attempted opening in Chrome, it opened up but the editor started flashing blue.

    opened by niteswim 8
  • Create a TravisCI configuration to check PDF building of the book

    Create a TravisCI configuration to check PDF building of the book

    I worked a bit on this last night and now I am facing a dilemma and I would like your opinion @patriciogonzalezvivo:

    This configuration is quite simple, I just have to build glfw and glfwViewer by hand because these two programs are not available in the standard Ubuntu Trusty repositories, which is the distribution used by default by Travis CI.

    And I have to add texlive-latex-recommended texlive-latex-extra texlive-fonts-recommended to the dependencies to avoid the following two problems:

    Successful building of ./book.tex
    pandoc: Error producing PDF from TeX source.
    ! Font T1/cmr/m/n/10=ecrm1000 at 10.0pt not loadable: Metric (TFM) file or inst
    alled font not found.
    <to be read again> 
                       relax 
    l.100 \fontencoding\encodingdefault\selectfont
    Error in building of ./book.pdf
    
    Successful building of ./book.tex
    pandoc: Error producing PDF from TeX source.
    ! LaTeX Error: File `etoolbox.sty' not found.
    Type X to quit or <RETURN> to proceed,
    or enter new name. (Default extension: sty)
    Enter file name: 
    ! Emergency stop.
    <read *> 
    l.8 \RequirePackage
    Error in building of ./book.pdf
    

    So maybe it might be a good idea to add them to the Raspberry Pi section of the Appendix because I'm pretty sure these packages are needed and are not delivered by default with Raspbian ...

    And now after fixing these issues, I'm stuck with the following error:

    Successful building of ./book.tex
    pandoc: Error producing PDF from TeX source.
    ! Unable to load picture or PDF file './04/glslEditor-01.gif'.
    <to be read again> 
                       }
    l.722 \includegraphics{./04/glslEditor-01.gif}
    Error in building of ./book.pdf
    

    Yes, it is somewhat obvious that the GIF image format can not be used by the XeTeX PDF output engine.

    It is therefore necessary to choose between:

    • convert all the .gif to .png in the parseBook.py script with something like iconv,
    • or use a Latex package like movie9 to include animations in the PDF (I'm not sure my Kindle reader can handle this).

    What do you think I should do?

    Thank you,

    opened by yvan-sraka 6
  • "More" link on examples page is broken

    Hi, Thanks for the book of shaders, it is fantastic :)

    I found a missing link -

    To reproduce go to the page below and click "more"

    http://patriciogonzalezvivo.com/2015/thebookofshaders/examples/

    opened by stuaxo 6
  • [WIP] Update Appendix 2 with a FAQ following issues #12 & #13

    [WIP] Update Appendix 2 with a FAQ following issues #12 & #13

    Hello,

    Because I wrote "by @cansik and @MartinRGB", I need your opinion on what I copied from issues #12 and #13!

    I also think we need to remove some content because some problems are now automatically corrected by the /src/parseBook.py script or can be easily corrected by it. But we need to keep the explanations on what this script does and what dependencies need to be installed depending on the version of MacOSX.

    opened by yvan-sraka 5
  • PDF build fails with xelatex missing on OSX

    PDF build fails with xelatex missing on OSX

    Creating this PDF is really not for beginners. I started with my last post #12 . Now let's try to really build a pdf out of the .text file.

    The simple way

    Waiiiiit, maybe you just want that pdf, doesn't matter if you built it your own! So please choose the simple way and download it from here:

    The Book Of Shaders PDF

    The pain way

    Install xelatex

    The parseBook.py always told me:

    Successful building of ./book.tex
    pandoc: xelatex not found. xelatex is needed for pdf output.
    Error in building of ./book.pdf
    

    I couldn't find xelatex on brew so I asked google and google said, port it (it's a monster package):

    sudo port install texlive-xetex
    

    Fix latex imports

    After installing it, let's try the building again:

    Successful building of ./book.tex
    pandoc: Could not find image `matrixes.png', skipping...
    pandoc: Could not find image `warmerdam.jpg', skipping...
    pandoc: Could not find image `tartan.jpg', skipping...
    pandoc: Could not find image `ryoji-ikeda.jpg', skipping...
    ! LaTeX Error: File `lmodern.sty' not found.
    
    Type X to quit or <RETURN> to proceed,
    or enter new name. (Default extension: sty)
    
    Enter file name: 
    ! Emergency stop.
    <read *> 
    
    l.3 \usepackage
    
    pandoc: Error producing PDF from TeX source
    Error in building of ./book.pdf
    

    Thank you University of Nebraska-Lincoln because they were hosting the lmodern.sty. Now building again:

    ! LaTeX Error: File `etoolbox.sty' not found.
    

    Fix it with ctan.org/.../etoolbox and run it again...

    Fix Font support

    ! Font EU1/lmr/m/n/10=[lmroman10-regular]:mapping=tex-text at 10.0pt not loadable: Metric (TFM) file or installed font not found.
    

    Ok..come on! -.-

    sudo port install texlive-fonts-recommended
    

    Fix bad parsing in .tmp files

    Wuhu, the font is now installed...but:

    pandoc: Could not find image `matrixes.png', skipping...
    pandoc: Could not find image `warmerdam.jpg', skipping...
    pandoc: Could not find image `tartan.jpg', skipping...
    pandoc: Could not find image `ryoji-ikeda.jpg', skipping...
    ! Unable to load picture or PDF file 'matrixes.png'.
    <to be read again> 
                       }
    l.2654 .../Matrix}{\includegraphics{matrixes.png}}
    

    So maybe we have to care about the skipped files. Looks like there is something wrong..(or it's me not able to read md..) (maybe again a parsing error) (I'll fix this later...):

    [![Wikipedia entry for Matrix (mathematics) ](matrixes.png)](./08/https://en.wikipedia.org/wiki/Matrix)
    

    Change it to in the relevant .tmp file in the chapter folders:

    [![Wikipedia entry for Matrix (mathematics) ](./08/matrixes.png)](https://en.wikipedia.org/wiki/Matrix)
    

    Do this for every file which is skipped at the beginning! Now build it again...

    Tadaaaaaaaaa! We've built the book of shaders! It's not perfect, some images overlay the text, but it's finally done.

    Maybe we should write a book about building the book of shaders...

    opened by cansik 5
  • Unable to load picture or PDF file 'matrixes.png'

    Unable to load picture or PDF file 'matrixes.png'

    Hello there,

    I am trying to compile the book into a pdf but I am getting the following error:

    Successful building of ./book.tex pandoc: Could not find image `matrixes.png', skipping... ! Unable to load picture or PDF file 'matrixes.png'. } l.2658 .../Matrix}{\includegraphics{matrixes.png}}

    pandoc: Error producing PDF from TeX source Error in building of ./book.pdf

    Any advice on how to solve it, would be truly appreciated. Thank you.

    Paulo

    opened by pauloguerraf 5
  • OSX: book export is broken

    OSX: book export is broken

    On osx, when I follow the tutorial to generate book (pdf...), It failed :

    `$ make

    rm -rf */tmp.md
    rm -rf */tmp*.png
    rm -rf book.*
    python2.7 src/parseBook.py  -f tex -f pdf -f epub
    glslViewer ./02/hello_world.frag --s 0.5 --headless -o ./02/tmp-hello_world.png
    Error watching for file 0.5
    Error watching for file ./02/tmp-hello_world.png
    

    Also python 2.7 is dead on homebrew :(

    System info : MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) 10.15.7

    opened by xeonarno 4
  • Add support for building book in epub format

    Add support for building book in epub format

    Add epub metadata & placeholder cover image Refactor parseBook.py and extend Makefile to enable support for more formats Update appendix 2 Add book.epub to .gitignore

    Fixes #229

    opened by andystanton 4
  • A patch for the Japanese translation

    A patch for the Japanese translation

    Hello,

    This is a small patch for the Japanese translation in chapter 11. I changed some mathematical expressions in Japanese.

    ... with a quintic interpolation curve ( f(x) = 6x^5-15x^4+10x^3 )

    The "4次エルミート曲線" is not a correct translation of "quintic interpolation curve". I think that "5次式の曲線" would be better.

    Thanks.

    opened by Keyaki-v 4
  • changing the code from examples

    changing the code from examples

    If you are reading this book in a browser the previous block of code is interactive. That means you can click and change any part of the code you want to explore. Changes will be updated immediately thanks to the GPU architecture that compiles and replaces shaders on the fly. Give it a try by changing the values on line 6.

    I can see the code using devtools, but I guess that's not the idea :) What am I missing?

    opened by moleike 4
  • imagemagick needed to convert gif to png in compiling to pdf

    imagemagick needed to convert gif to png in compiling to pdf

    1. Run make clean pdf on MacOS Monterey
    2. At a point gifs cannot be converted to pdfs
    convert ./04/glslEditor-01.gif ./04/glslEditor-01.png
    /bin/sh: convert: command not found
    convert ./04/glslViewer.gif ./04/glslViewer.png
    /bin/sh: convert: command not found
    convert ./04/glslEditor-00.gif ./04/glslEditor-00.png
    /bin/sh: convert: command not found
    convert ./04/glslGallery.gif ./04/glslGallery.png
    /bin/sh: convert: command not found
    

    This suggests it cannot find convert command as stated. Dig a little digging and found that it is actually found in some tool called imagemagick. Can this caveat be included in the tutorial in some way for people who might no little about the process? Given that this is not a minor point in the grand scheme of things I would understand if this is not deemed to be a priority

    opened by jethro-djan 0
  • "make clean pdf" fails on on newer MacOS versions

    In the makefile, we have, for example, the following:

    python2.7 src/parseBook.py -f pdf
    

    Because newer MacOS versions don't ship with python2.7 anymore, the make process fails. Since this is used by different platforms, is there a way this could be more differentiated? I don't know much about makefiles so I can't help. I had to manually change it to

    python3 src/parseBook.py -f pdf
    

    Some people might not be able to this

    opened by jethro-djan 0
  • Fix docker compose error

    Fix docker compose error

    I was getting this error when running docker-compose up:

    (root) Additional property web is not allowed
    

    The changes in docker-compose.yml fixed it for me.

    opened by yudi-azvd 0
  • Create a github action to build and release the book

    Create a github action to build and release the book

    HI @patriciogonzalezvivo,

    Thanks for your great work. In order for your users to get EPUB / PDF and TEX versions of your book without the need to clone the repo, I created a github action that do it for them.

    When you'll push a tag version (e.g. v1.0.0, for example), the three book formats will be built and pushed to release. You can see the consequence on my forked repo.

    The release artifacts are there https://github.com/sroucheray/thebookofshaders/releases The action that built it is here https://github.com/sroucheray/thebookofshaders/actions/runs/2840310688

    Hope you'll find it useful.

    Cheers,

    Stephane

    opened by sroucheray 0
  • needed a null check in parsedown.php

    needed a null check in parsedown.php

    Love the project, all the best:

    $line was null, which hurt my php.
    So, my fix: line num #144 in Parsedown.php: foreach ($parts as $part) { $lineLength=0; if ($line) { $lineLength = mb_strlen($line, 'utf-8'); } $shortage = 4 - $lineLength % 4;

    $line .= str_repeat(' ', $shortage);
    $line .= $part;
    

    }

    opened by unmodify 0
Owner
Patricio Gonzalez Vivo
Patricio Gonzalez Vivo
A step by step example of creating your own React Native TurboModule.

Discovering Turbo Modules Note: This example was made in RN 0.63. Some things have changed since then, but the good news is that now the setup should

Bartłomiej Klocek 96 Dec 5, 2022
Code of this universe. Fork from private repository.

Universe Code of this universe. Forked from a private repository. Hello User. This is a fork of Universe project. Unfortunately free access to latest

Samsonov Dima 8 May 27, 2022
The main repository for the Darkflame Universe Server Emulator project.

Darkflame Universe Introduction Darkflame Universe (DLU) is a server emulator for LEGO® Universe. Development started in 2013 and has gone through mul

null 492 Jan 7, 2023
The mainly point on this project is show how level of my comprehend for fragment SHADER.

PS The mainly point on this project is show how level of my comprehend for fragment SHADER. This project has some issue I can't solve else. cause I st

null 2 Nov 26, 2021
PlenOctree Volume Rendering (supports CUDA & fragment shader backends)

PlenOctree Volume Rendering This is a real-time PlenOctree volume renderer written in C++ using OpenGL, constituting part of the code release for: Ple

Alex Yu 530 Jan 4, 2023
This is a helper library to abstract away interfacing with floppy disk drives in a cross-platform and open source library.

Adafruit Floppy This is a helper library to abstract away interfacing with floppy disk drives in a cross-platform and open source library. Adafruit Fl

Adafruit Industries 142 Dec 19, 2022
A Graphical Engine written in C++ for abstract OpenGL

Lukeda Graphical Engine (LGE) It's a simple graphical library, written in C++ with OpenGL(GLEW) and GLFW Start as a fork from my other project named "

Lucas Morais 2 Jul 13, 2022
Tightly coupled GNSS-Visual-Inertial system for locally smooth and globally consistent state estimation in complex environment.

GVINS GVINS: Tightly Coupled GNSS-Visual-Inertial Fusion for Smooth and Consistent State Estimation. paper link Authors: Shaozu CAO, Xiuyuan LU and Sh

HKUST Aerial Robotics Group 587 Dec 30, 2022
Blade - A simple, fast, clean, and dynamic language that allows you to develop complex applications quickly.

The Blade Programming Language Quick links: BUILDING | CONTRIBUTING | DOCS | LICENSE | tl;dr Blade is a simple, fast, clean and dynamic language that

Blade Programming Language 121 Dec 31, 2022
🔥 A number of Flutter projects that cover slightly more complex topics.

Check out the YouTube videos to see the indepth process of each project! Reactive Grid https://youtu.be/OEtt_8_FU0s Fancy Full Screen Animation https:

Philip Vu 27 Dec 18, 2022
A guide and set of tools for working with TinyML powered Audio Sensors

Audio Sensor Toolkit This is a guide on how to build an Audio Sensor using Machine Learning, and helpful tools. Audio Sensor Guide Audio Tools Acceler

IQT Labs 20 Sep 21, 2022
Opencore-based Hackintosh EFI and guide for Lenovo Thinkpad X1 Carbon Gen 7

macOS on Thinkpad X1 Carbon 7th Generation OpenCore-based Hackintosh EFI and guide for Lenovo Thinkpad X1 Carbon Gen 7. This guide has been generated

Aidan Chandra 35 Dec 19, 2022
V4L0R4NT 0V3RL4Y 3XT3RN4L 35P CH34T -- Guide written in Indonesian Language~

V4L0VL4Y V4L0R4NT 0V3RL4Y 3XT3RN4L 35P CH34T K4L4U M4U N908R0L M45UK 4J4! H3H3 C4R4 C0MP1L3 DR1V3R 1N5T4L W5L K4L4U 94K PUNY4 L1NUX 9UN4K4N L1NUX Y4N9

Basilius Bias Astho Christyono 27 Oct 25, 2022
A comprehensive guide to 50 years of evolution of strict C programming, a tribute to Dennis Ritchie's language

42 School Cheat Sheet by agavrel ?? Intended for 42 alumni, current students and candidates Truth can only be found in one place: the code – Robert C.

Antonin GAVREL 1.1k Jan 3, 2023
Macos-arm64-emulation - A guide for emulating macOS arm64e on an x86-based host.

macos-arm64-emulation Use the following guide to download and configure all of the necessary tools and files for emulating the macOS arm64e kernel. Th

Cylance 233 Jan 7, 2023
Guide to Cross Compiling on a Raspberry Pi

Guide to Cross Compilation for a Raspberry Pi > Start Setup XCS and RPi Setup RPi Network and SSH Setup RPi Peripherals Setup Cross-compile environmen

Hessel van der Molen 54 Oct 4, 2022
A guide that teach you build a custom version of Chrome / Electron on macOS / Windows / Linux that supports hardware / software HEVC decoding.

enable-chromium-hevc-hardware-decoding A guide that teach you build a custom version of Chrome / Electron on macOS / Windows / Linux that supports har

Sta Zhu 778 Jan 1, 2023
A FREE Windows C development course where we will learn the Win32API and reverse engineer each step utilizing IDA Free in both an x86 and x64 environment.

FREE Reverse Engineering Self-Study Course HERE Hacking Windows The book and code repo for the FREE Hacking Windows book by Kevin Thomas. FREE Book Do

Kevin Thomas 1.1k Dec 27, 2022