• 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
  • Comparison: MagicLeap vs. HoloLens vs. Oculus Rift
    Comparison: MagicLeap vs. HoloLens vs. Oculus Rift

Tag: WebGL

Yet another shader for image fade-In effect

Taken iq’s background transparent code and Dr. Neyret’s advice: This shader can be used for rendering pop-up images in a 3D environment.


Foveated Rendering via Quadtree

Today, I wrote a shader for foveated rendering uisng Prof. Neyret’s QuadTree: https://www.shadertoy.com/view/Ml3SDf The basic idea is:  Calculate the depth of the QuadTree using the distance between the current coordinate to the foveat region Use the depth as the mipmap level to sample from the texture Code below:


Bilateral Filter to Look Younger on GPU

Bilateral filter can be used to smooth the texture while preserving significant edges / contrast. Below shows a live demo in ShaderToy. Press mouse for comparison. Thanks to mrharicot’s awesome bilateral filter: https://www.shadertoy.com/view/4dfGDH With performance improvement proposed by athlete. With gamma correction by iq: https://www.shadertoy.com/view/XtsSzH   Skin detection forked from carlolsson’s Skin Detection https://www.shadertoy.com/view/MlfSzn#

Interactive Poisson Blending on GPU

Recently, I implemented two fragment shaders for interactive Poisson Blending (seamless blending).  Here is my real-time demo and code on ShaderToy: Press 1 for normal mode, press 2 for mixed gradients, press space to clear the canvas. Technical Brief I followed a simplified routine of the Poisson Image Editing paper [P. Pérez, M. Gangnet, A….

Libraries, Textbooks, Courses, Tutorials for WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is a great tool for quick demos and video rendering. In the past year, I have created Social Street View, Video Fields, and VRSurus using WebGL. Additionally,…

Social Street View wins the Best Paper Award in Web3D 2016

I am thrilled to announce that Social Street View has won the Best Paper Award at Web3D 2016, which was held next to SIGGRAPH 2016 in late August! Please visit the project website for more details: http://www.socialstreetview.com I also published my slides and videos.  

Uniforms Types in Three.js

Here is a a cheat sheet for uniform types in Three.js

Here is how to cite them in GLSL:


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 and Ray Marching

Introduction As GPU power is becoming significantly better than CPU, ray casting / tracing and ray marching is widely used in 4k intros and demoscenes to create 3D (interactive) graphics. – Thanks to all the references listed in the end, I learnt so much about and I would like to share with the knowledge to my friends. This tutorial…

[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…