• Interactive Poisson Blending on GPU
    Interactive Poisson Blending on GPU
  • 404 Not Found In Two Triangles
    404 Not Found In Two Triangles
  • Simplest and Fastest GLSL Edge Detection using Fwidth
    Simplest and Fastest GLSL Edge Detection using Fwidth

Category: Tutorial

PostProcessing: Brightness, Contrast, Hue, Saturation, and Vibrance

Real-time image manipulation is always fascinating. With the power of the modern GPU, it is possible to achieve the postprocessing effects all in a single shader. Remember that in GLSL, matrix are column major. Brightness is a float between [-1, 1], directly adding to the RGB Contrast is a float between [0, 1, ∞], directly…


Unified Gnomonic and Stereographic Projections

Gnomonic projection, or rectilinear projection, together with stereographic projection, are two most commonly used projection in rendering 360 degree videos, or other VR applications. Recently, I found the inverse converting function from screen coordinates to the two projections can be unified within a single function. It’s not really surprising since both projection uses spherical lens,…


Equirectangular Projection, Gnomonic Projection, and Cubemaps

Gnomonic Projection Background According to MathWorld, the gnomonic projection is a nonconformal map projection obtained by projecting points (or ) on the surface of sphere from a sphere’s center O to point P in a plane that is tangent to a point S (Coxeter 1969, p. 93). In a gnomonic projection, great circles are mapped…


SIGGRAPH Asia 2014 Course Materials from iq/rgba

iñigo quilez kindly provides his SIGGRAPH Asia 2014 Course Materials of ShaderToy with me via email. Thank you iq! Thinking implicit: 2D, non polygonal shapes Coordinates and color gradients (That link is depracated, so I personally recommend this link instead) Shapping Texture Mapping Animation Reactivity More Media Yet More Media Thinking implicit: 3D Raymarching Modeling (primitives and…


Tutorial and Resources for Three.js

Three.js is one of a number of free WebGL libraries. First released in April 2010, it has become pretty popular, and includes a huge number of demos. I wanted to know more about its origins, so interviewed its creator, Ricardo Cabello, aka mr.doob, who lives in Spain. Interestingly, I am also largely motivated by Demoscenes when I was…


Tutorial of Ray Casting, Ray Tracing, Path Tracing and Ray Marching

Introduction As GPU power is becoming significantly better than CPU, ray casting / tracing, path tracing, and ray marching is widely used in 4k intros, demoscenes, and movies to create interactive 3D graphical scenes. Thanks to all the references listed in the end, I learnt so much about and I would like to share with the knowledge…


Quick Tutorial on Refereces Management using Mendeley / Endnote / Word / ShareLaTeX

Managing a large library of references for researchers can be hard work. I usually use Mendeley + ShareLaTeX for writing papers. Both tools are free and easy to collaborate with co-authors. Mendeley + ShareLaTeX First, please install Mendeley from its official website. Here is an official YouTube video introducing Mendeley: There is also a quick…


[Tutorial] Introduction and Installation of WebVR

Today I tried a new technology called WebVR. According to WebVR.info: WebVR is an experimental Javascript API that provides access to Virtual Reality devices, such as the Oculus Rift or Google Cardboard, in your browser. It tries to provide a uniform interface for all sorts of VR headsets such as Oculus Rift DK2, Google Cardboard…