A detailed essay on the process of building a post-processing stylized shader reproducing the style of legendary artist Jean Giraud a.k.a Moebius for your React Three Fiber projects. In it, I detail the process of drawing outlines with a Sobel Filter as well as custom shadow and lighting patterns to bring a unique style to your WebGL scene.

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to build a post-processing stylized shader in React Three Fiber to reproduce the unique style of artist Jean Giraud, also known as Moebius. This tutorial covers drawing hand-drawn looking outlines, custom shadow and lighting patterns, and applying the Moebius style to your WebGL scenes.

Moebius-style post-processing and other stylized shaders

Drawing outlines with shaders for our React Three Fiber scene

Stylized outlines, shadows, and lighting patterns

A Moebius-worthy WebGL scene and some final thoughts