Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ray Marching Explained

103 views

Published on

Brief introduction to Ray Marching aka Sphere Tracing using ShaderToy.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ray Marching Explained

  1. 1. Ray Marching Explained MΓ₯rten RΓ₯nge
  2. 2. www.shadertoy.com https://www.shadertoy.com/view/ldyGWm
  3. 3. GLSL + Basic linear algebra
  4. 4. r d p 𝑑 = 𝑝 βˆ’ π‘Ÿ
  5. 5. Show us the code
  6. 6. Lighting
  7. 7. π‘›π‘œπ‘Ÿπ‘šπ‘Žπ‘™
  8. 8. π‘›π‘œπ‘Ÿπ‘šπ‘Žπ‘™
  9. 9. 10 51520
  10. 10. 𝑛: π‘›π‘œπ‘Ÿπ‘šπ‘Žπ‘™π‘–π‘§π‘’(𝑑 𝑝 + 𝑒π‘₯ βˆ’ 𝑑 𝑝 βˆ’ 𝑒π‘₯ , 𝑑 𝑝 + 𝑒𝑦 βˆ’ 𝑑 𝑝 βˆ’ 𝑒𝑦 , 𝑑 𝑝 + 𝑒𝑧 βˆ’ 𝑑 𝑝 βˆ’ 𝑒𝑧 ) 𝑒𝑧: (0, 0, π‘’π‘π‘ π‘–π‘™π‘œπ‘›) 𝑒𝑦: (0, π‘’π‘π‘ π‘–π‘™π‘œπ‘›, 0) 𝑒π‘₯: (π‘’π‘π‘ π‘–π‘™π‘œπ‘›, 0, 0) 𝑝: π‘π‘œπ‘–π‘›π‘‘π‘‚π‘›π‘†π‘’π‘Ÿπ‘“π‘Žπ‘π‘’ 𝑑: π‘‘π‘–π‘ π‘‘π‘Žπ‘›π‘π‘’π‘‡π‘œπ‘†π‘’π‘Ÿπ‘“π‘Žπ‘π‘’
  11. 11. 𝑑𝑖𝑓𝑓𝑒𝑠𝑒 a
  12. 12. 𝑑𝑖𝑓𝑓𝑒𝑠𝑒: π‘šπ‘Žπ‘₯(π‘‘π‘œπ‘‘ π‘›π‘œπ‘Ÿπ‘šπ‘Žπ‘™, π‘™π‘–π‘”β„Žπ‘‘π·π‘–π‘Ÿπ‘’π‘π‘‘π‘–π‘œπ‘› , 0)
  13. 13. π‘ π‘π‘’π‘π‘’π‘™π‘Žπ‘Ÿ a a b
  14. 14. π‘ π‘π‘’π‘π‘’π‘™π‘Žπ‘Ÿ: π‘šπ‘Žπ‘₯ π‘‘π‘œπ‘‘ π‘Ÿπ‘’π‘“π‘™π‘’π‘π‘‘ π‘™π‘–π‘”β„Žπ‘‘π·π‘–π‘Ÿπ‘’π‘π‘‘π‘–π‘œπ‘›, π‘›π‘œπ‘Ÿπ‘šπ‘Žπ‘™ , π‘’π‘¦π‘’π·π‘–π‘Ÿπ‘’π‘π‘‘π‘–π‘œπ‘› , 0 π‘“π‘œπ‘π‘’π‘ 
  15. 15. Show us the code
  16. 16. Creating complex geometries
  17. 17. π‘’π‘›π‘–π‘œπ‘›: π‘šπ‘–π‘›(𝑑1, 𝑑2) π‘–π‘›π‘‘π‘’π‘Ÿπ‘ π‘’π‘π‘‘π‘–π‘œπ‘›: π‘šπ‘Žπ‘₯(𝑑1, 𝑑2) π‘ π‘’π‘π‘‘π‘Ÿπ‘Žπ‘π‘‘π‘–π‘œπ‘›: π‘šπ‘Žπ‘₯(𝑑1, βˆ’π‘‘2) π‘π‘œπ‘œπ‘™π‘’π‘Žπ‘› π‘œπ‘π‘’π‘Ÿπ‘Žπ‘‘π‘œπ‘Ÿπ‘ 
  18. 18. π‘ π‘π‘Žπ‘™π‘’: 𝑑(𝑝 βˆ— 𝑠)/𝑠 π‘Ÿπ‘’π‘π‘’π‘‘π‘–π‘‘π‘–π‘œπ‘›: 𝑑(π‘šπ‘œπ‘‘ 𝑝, π‘Ÿ βˆ’ 0.5π‘Ÿ) π‘‘π‘Ÿπ‘Žπ‘›π‘ π‘™π‘Žπ‘‘π‘–π‘œπ‘›: 𝑑(𝑝 βˆ’ 𝑑) π‘‘π‘œπ‘šπ‘Žπ‘–π‘› π‘œπ‘π‘’π‘Ÿπ‘Žπ‘‘π‘œπ‘Ÿπ‘ 
  19. 19. Show us the code
  20. 20. Shadows
  21. 21. π‘ π‘œπ‘“π‘‘ π‘ β„Žπ‘Žπ‘‘π‘œπ‘€π‘ 
  22. 22. π‘Žπ‘šπ‘π‘–π‘’π‘›π‘‘ π‘œπ‘π‘π‘™π‘’π‘ π‘–π‘œπ‘›
  23. 23. Show us the code
  24. 24. All together now
  25. 25. Cool shadertoy examples β€’ Graphics + Music β€’ https://www.shadertoy.com/view/4tc3zf β€’ 460 lines! β€’ https://www.shadertoy.com/view/4sjSW1 β€’ https://www.shadertoy.com/view/XlBGz3 β€’ Retro! β€’ Mandel bulb β€’ https://www.shadertoy.com/view/ltfSWn β€’ Advanced modeling β€’ https://www.shadertoy.com/view/ld3Gz2 β€’ Terrains β€’ https://www.shadertoy.com/view/MdlGW7 β€’ https://www.shadertoy.com/view/4ttSWf β€’ https://www.shadertoy.com/view/XslGRr
  26. 26. Links β€’ Raymarching explanined β€’ http://9bitscience.blogspot.com/2013/07/raymarching-distance-fields_14.html β€’ Links other useful resources as well β€’ Advanced operators β€’ http://mercury.sexy/hg_sdf/ β€’ NNUG Demos β€’ https://www.shadertoy.com/view/4t3cDl β€’ https://www.shadertoy.com/view/Xl3cDl β€’ https://www.shadertoy.com/view/Xl3cDs β€’ https://www.shadertoy.com/view/MtcyWl β€’ https://www.shadertoy.com/view/ltccD2
  27. 27. Questions?

Γ—