LIVE Coding "Happy Jumping"

106K views · 7 years ago · tutorial · expert · evergreen

Inigo Quilez live-codes the shader "Happy Jumping" from scratch, a raymarched animation of a blobby creature, in a roughly five-to-six-hour making-of video. He explains the math, shading and art decisions as he goes.

HN people call it the video to drink from the firehose: long, but worth it for watching a full raymarched scene being built step by step.

“is fantastic, yes it's five hours but worth it.”

5 comments from Hacker News

t
@trollied2021 · in “Shader School - An introduction to GLSL shaders that runs in your web browser”
This is the one that blew my mind: link 5 hour video of its creation: ▶ this video Utterly amazing.
Strongly recommendsView on HN
j
@jwatzman2022 · in “Source code for 4kb demoscene production “Elevated” released (2016)”
Indeed his videos are amazing. My recommendation though would be to start with the "beginner" video -- which is completely 2D but at least gets some ideas across. Then watch link which isn't his but introduces how you get 3D out of fragment shaders. Finally just drink from the firehose -- ▶ this video is fantastic, yes it's five hours but worth it. (Definitely come into that familiar with the idea of raymarching though... the first few minutes start off super basic but it goes to eleven real quick.)
RecommendsView on HN
t
@trollied2020 · in “Raymarching with Fennel and LÖVE”
If you have 6 hours to kill, check this shadertoy that uses ray marching: link And the video that goes through its creation step by step: ▶ this video
RecommendsView on HN
k
@kilovoltaire2019 · in “Shader Deconstruction of Happy Jumping”
Submitted the video to Hacker News.
RecommendsView on HN
D
@DonHopkins2021 · in “Raymarching Distance Fields (2008-2020 compilation)”
Inigo Quilez's procedural raymarching masterpiece, "Surfer Boy": link // Created by inigo quilez - iq/2018 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // A surfer boy in the beach, disney/pixar style. I had to be very careful // with the complexity, otherwise the browser would crash during shader // compilation. I also had to split the boy in two layers because of that, // see below (the single pass version is smaller of course but takes 3 extra // seconds to compile, and renders a bit more slowly) // // This is totally painted to camera, it won't work from others perspectives. // // Common - contains some basic stuff // Buffer A - renders the brackground - not super polished really // Buffer B - blurs the background // Buffer C - paints the boy, except the hand and the board // Image - paints the hand and the board, and does some minimal postpro // // If you have a slow PC, you can watch it here: link And Happy Jumping: link // Created by inigo quilez - iq/2019 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // // // An animation test - a happy and blobby creature jumping and // looking around. It gets off-model very often, but it looks // good enough I think. // // Making-of and related math/shader/art explanations (6 hours // long): ▶ this video // // Video capture: link // // You can buy a metal print of this shader here: link
CitesView on HN