The raytracing algorithm plays key role in generating photorealistic graphics for ads, movie productions, architectural visualisations and etc. This presentation will show how we can build a raytracer starting from a 100 lines of code and turning it to a feature complete system. We will show how the development process can help the developer to learn new technology. Several raytracers are demoed. The demos are written in node.js and typescrypt and work in a webbrowser.

1. Христо ЛесевRaytracing - новият helloworld
Raytracing – новият helloworld
Христо Лесев
DiaDraw.com

2. Христо ЛесевRaytracing - новият helloworld
$ whoami
Живее и диша компютърна графика.
DiaDraw
We help developers build cross-platform applications.
Христо Лесев
Съосновател на

3. Христо ЛесевRaytracing - новият helloworld
Raytracing 101

4. Христо ЛесевRaytracing - новият helloworld
Нужда от реалистични изображения

5. Христо ЛесевRaytracing - новият helloworld
Филми, архитектура, реклами и още...

6. Христо ЛесевRaytracing - новият helloworld
Снимка или CG?

7. Христо ЛесевRaytracing - новият helloworld
Успяхте ли да ги разпознаете?
Photo Photo
Photo
CG
CG
CG

8. Христо ЛесевRaytracing - новият helloworld
Нужда и от нереалистични изображения

9. Христо ЛесевRaytracing - новият helloworld
Кой и как генерира изображения?

10. Христо ЛесевRaytracing - новият helloworld
Рендерът превръща описанието на геометрията на сцената и
нейните свойства в изображение

11. Христо ЛесевRaytracing - новият helloworld
Как се случва в природата?

12. Христо ЛесевRaytracing - новият helloworld
Изстрелваме лъчи през изображението

13. Христо ЛесевRaytracing - новият helloworld
Лъчите определят, какво вижда всеки пиксел

14. Христо ЛесевRaytracing - новият helloworld
Намиране на пресечните точки на лъч с обекти от сцената
• Избираме най-близката пресечна точка до началото на лъча
1
2
3

15. Христо ЛесевRaytracing - новият helloworld
Избор на нова посока за продължаване на пътя
• Посоката на новия лъч се определя от материала на обекта

16. Христо ЛесевRaytracing - новият helloworld
Достигане до светлинен източник
• Стремим се да достигнем до обект, зареден със светлинна енергия

17. Христо ЛесевRaytracing - новият helloworld
“Бомбардираме” сцената с лъчи
• Нужни са милиарди лъчи, за генериране на красива картинка

18. Христо ЛесевRaytracing - новият helloworld
Ще споделя една история

19. Христо ЛесевRaytracing - новият helloworld
Далечната 92-ра

20. Христо ЛесевRaytracing - новият helloworld
Далечната 92-ра

21. Христо ЛесевRaytracing - новият helloworld
Начинаещ програмист или
искам да науча нова технология:
От къде да започна?

22. Христо ЛесевRaytracing - новият helloworld
Намираме подходящ пример и започваме да кодираме

23. Христо ЛесевRaytracing - новият helloworld
Класиката в tutorials жанра:
Програма за поддръжка на книжна библиотека

24. Христо ЛесевRaytracing - новият helloworld
Тайната на програмиста

25. Христо ЛесевRaytracing - новият helloworld
Изисквания: или от какво се вълнува библиотекарят
• Да записва и изтрива книга
• Да търси книги по заглавие, автор, ISBN….
• Нямам никаква представа от какво друго ???
• Може би от годишната сбирка на библиотекарите?

26. Христо ЛесевRaytracing - новият helloworld
Изисквания: от какво се вълнува програмистът
• Как да се докосна до повече аспекти от избраните технологии?
• Как да си построя архитектурата? Какви ще са модулите?
• Как ще предавам данни между отделните модули?
• Трябва ли да ползвам DB ?
• Какъв ще е интерфейсът – web, native, console?
• Може ли да е разпределено, многонишково, и т.н. ?
• И други...

27. Христо ЛесевRaytracing - новият helloworld
или
Какво е по-лесно да си направим?

28. Христо ЛесевRaytracing - новият helloworld
От базовите изисквания...
1. Двигател с витло – придвижва самолета напред
2. “Крила” – подемна сила и управление
3. Колесник – за да има второ излитане
1
2
3

29. Христо ЛесевRaytracing - новият helloworld
... до комплексната система

30. Христо ЛесевRaytracing - новият helloworld
Raytracer – самолетът в програмирането
100 реда C++ ChaosGroup V-Ray

31. Христо ЛесевRaytracing - новият helloworld
Raytracing в 99 реда C++ код
• smallpt – Kevin Beason
• Сцена изградена изцяло от сфери
• Глобално осветяване !!!
• Три вида материали
– Дифузен
– Отражателен
– Прозрачен

32. Христо ЛесевRaytracing - новият helloworld
Raytracing в 99 реда C++ код
Тримерен вектор и цвятVec
Ray
Sphere
MAIN
intersect
radiance
Лъч
Геометричен обект, пресичане с лъч
Управление на сцена
Пресмятане на глобалното осветяване

33. Христо ЛесевRaytracing - новият helloworld
Първото нещо, което трябва да си припомним

34. Христо ЛесевRaytracing - новият helloworld
Безкрайните часове математика в университета
• Вектори
• Матрици
• Цветова алгебра – цветови пространства
• Геометрия
• Статистика
• Числени методи
• Дискретна математика

35. Христо ЛесевRaytracing - новият helloworld
“Клиентски” изисквания към raytracer-a
1. Да поддържа голям набор от обекти и материали
2. Да бъде бърз

36. Христо ЛесевRaytracing - новият helloworld
1. Голям набор от обекти и
материали

37. Христо ЛесевRaytracing - новият helloworld
Голям набор от обекти и материали
• Прилична софтуерна архитектура
• Изграждане на йерархия
• Понятие за сцена
• Парсър на сцена
• Разделяне на алгоритъма от данните
• Плъгини
Geometry
Sphere Triangle Mesh
Material
BRDF

38. Христо ЛесевRaytracing - новият helloworld
2. Скорост

39. Христо ЛесевRaytracing - новият helloworld
Ускорителни структури
• Геометрични бази от данни
• Търсене в пространството, заявки:
– Intersect
– Range search
• Идват във всякакви разновидности:
– Kd-tree, BVH, Octree, BSP, Grid, …....

40. Христо ЛесевRaytracing - новият helloworld
Още скорост...

41. Христо ЛесевRaytracing - новият helloworld
Паралелно трасиране с “нишки”
• Raytracing– синоним за
паралелен алгоритъм
• Всяка “нишка” работи с данните
на сцената, но пресмята
резултати от различни лъчи

42. Христо ЛесевRaytracing - новият helloworld
Още повече скорост...

43. Христо ЛесевRaytracing - новият helloworld
Пресмятане на части от картинката на други машини
• Мрежова комуникация
• Предаване на сцената и ресурси
• Връщане на част от изображението
• Сглобяване на цялото изображение

44. Христо ЛесевRaytracing - новият helloworld
Practice what you preach

45. Христо ЛесевRaytracing - новият helloworld
Пример 1

46. Христо ЛесевRaytracing - новият helloworld
Пример 1: Node.js + C++
smallpt.cpp
Web Sockets
Web browser
Async callback

47. Христо ЛесевRaytracing - новият helloworld
Пример 2

48. Христо ЛесевRaytracing - новият helloworld
Пример 2: js raytracing, изцяло в браузър
worker
Web browser
worker worker
raytracer
scene
raytracer
scene
raytracer
scene

49. Христо ЛесевRaytracing - новият helloworld
Пример 3
http://diadraw-rt.herokuapp.com

50. Христо ЛесевRaytracing - новият helloworld
Пример 3: разпределен raytracing
Web browser
Monitor
Web browser
Render node
w w w w w
Web browser
Render node
w w w w w
Web browser
Render node
w w w w w
WebSockets
WebSo ckets

51. Христо ЛесевRaytracing - новият helloworld
Demos’ Repo
https://github.com/hlesev?tab=repositories