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.
Advanced 3D graphics + React
Using the best from UI and 3D worlds
@PixelsCommander
denis.radin@gmail.com
Holy grail of efficient
computer graphics
I've been chasing for years
1991 - ZX Spectrum
48kb, 256x192px, only 2 of 8 colors for 8x8px cell
1995 - C++ general
programming
1998 - Delphi + DirectX
2004 - C#.Net, GDI+
2006 Flash, later Stage3D
2010 - HTML5 canvas
Authoring one of the first game engines FlashJS
2013 - Performant UIs with
WebGL
2017 - 3d games with
WebGL and React
The most advanced WebGL
3d app to the date?
3D layer, UI layer
Under each other
BabylonJS vs ThreeJS
Why BabylonJS for 3D?
Three.js: compromised API
to keep old users happy
Babylon.js: TypeScript out
of the box, designed for
bigger applications
Why ReactJS?
Best ecosystem and community, best tooling, easy
to maintain components library
Why Redux?
Simple and kinda official state management
Why Redux?
It fits to fire actions not just receive / send data
How 3d layer and UI layer
play together?
Mesh - node of 3d world
position, rotation, materials
ReduxMesh - building block
connected to the state
position, rotation, materials, componentDidMount,
componentWillReceivePr...
Lifecycle methods React.Component vs ReduxMesh
componentDidMount
componentWillReceiveProps
componentWillUnmount
render
com...
No this.render(), not
declarative
To avoid complication and have control over how we
apply changes
Challenges when do 3D?
Tooling, reusing of global gamedev advancements
1# Any 3D engine su*ks in
building UI components
Static HTML elements you just place on top,
but what if you need a toolti...
HTMLMesh for mixed mode
Sticking React Components to 3D world positions
HTMLMesh
Coordinates recalculated on every RAF then
transform / translate / scale
2# Performance regressions
New feature merged can introduce FPS drop which
is invisible for devs and QAs
Continuous FPS
benchmarking
After every merge we get performance metrics and
build graphs
Continuous FPS benchmarking
● Works on top of functional testing
● Functional tests run with Webdriver.io
● Benchmark is i...
Reporting to Jenkins Benchmark plugin
● Works on top of functional testing
● Functional tests run with Webdriver.io
● Benc...
3# Too good hardware
Yes, as developers we have hardware which is far
from average user setup
Low-end testing
Emulate dropped frames and low FPS
Evolution Gaming testing pipeline
Chrome extension for
low-end testing
Emulates dropped frames and low FPS
4# Designer -> Developer
interaction
Yes, as developers we have hardware which is far
from average user setup
How mature game engines
approach this?
Having powerful WYSIWYG, user friendly IDEs
allowing designers to be a part of deve...
Unity?
Amazing gaming platform
Can we solve tooling
problem for BabylonJS?
Potentially yes
5# Assets reusing
Once we had to do a lightning...
Unity store is awesome
2000$ vs 5$
Reusing from Unreal / Unity stores makes you
efficient
Unity leverages all gamedev
knowledge accumulated by
mature industry
The only thing Unity sucks
in is building UIs
As it was with all game engines before HTML era
So how to use best UI
framework with Unity?
First of all export Unity
project to WebGL
npm i reactunity
Unity Redux middleware
All redux events to be propagated into Unity app
Unity dispatch
To dispatch events from Unity
The problem with Unity?
Clear project built is 20mb
=(
Waiting for Unity Tiny
But do we need it if
BabylonJS progress that
well?
@PixelsCommander
denis.radin@gmail.com
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 1 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 2 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 3 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 4 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 5 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 6 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 7 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 8 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 9 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 10 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 11 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 12 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 13 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 14 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 15 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 16 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 17 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 18 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 19 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 20 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 21 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 22 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 23 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 24 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 25 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 26 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 27 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 28 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 29 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 30 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 31 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 32 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 33 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 34 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 35 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 36 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 37 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 38 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 39 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 40 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 41 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 42 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 43 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 44 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 45 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 46 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 47 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 48 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 49 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 50 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 51 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 52 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 53 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 54 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 55 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 56 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 57 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 58 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 59 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 60 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 61 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 62 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 63 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 64 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 65 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 66 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 67 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 68 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 69 JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D Slide 70
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D

Создать фотореалистичное 3D приложение для Web не просто. Сделать это с React еще сложнее, но окупается с лихвой если вы все таки справились. Этот доклад о том как Evolution Gaming использует WebGL и ReactJS для создания самого сложного и дорогого WebGL приложения из когда либо разработанных.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D

  1. 1. Advanced 3D graphics + React Using the best from UI and 3D worlds
  2. 2. @PixelsCommander denis.radin@gmail.com
  3. 3. Holy grail of efficient computer graphics I've been chasing for years
  4. 4. 1991 - ZX Spectrum 48kb, 256x192px, only 2 of 8 colors for 8x8px cell
  5. 5. 1995 - C++ general programming
  6. 6. 1998 - Delphi + DirectX
  7. 7. 2004 - C#.Net, GDI+
  8. 8. 2006 Flash, later Stage3D
  9. 9. 2010 - HTML5 canvas Authoring one of the first game engines FlashJS
  10. 10. 2013 - Performant UIs with WebGL
  11. 11. 2017 - 3d games with WebGL and React
  12. 12. The most advanced WebGL 3d app to the date?
  13. 13. 3D layer, UI layer Under each other
  14. 14. BabylonJS vs ThreeJS
  15. 15. Why BabylonJS for 3D?
  16. 16. Three.js: compromised API to keep old users happy
  17. 17. Babylon.js: TypeScript out of the box, designed for bigger applications
  18. 18. Why ReactJS? Best ecosystem and community, best tooling, easy to maintain components library
  19. 19. Why Redux? Simple and kinda official state management
  20. 20. Why Redux? It fits to fire actions not just receive / send data
  21. 21. How 3d layer and UI layer play together?
  22. 22. Mesh - node of 3d world position, rotation, materials
  23. 23. ReduxMesh - building block connected to the state position, rotation, materials, componentDidMount, componentWillReceiveProps
  24. 24. Lifecycle methods React.Component vs ReduxMesh componentDidMount componentWillReceiveProps componentWillUnmount render componentDidMount componentWillReceiveProps componentWillUnmount initialRender
  25. 25. No this.render(), not declarative To avoid complication and have control over how we apply changes
  26. 26. Challenges when do 3D? Tooling, reusing of global gamedev advancements
  27. 27. 1# Any 3D engine su*ks in building UI components Static HTML elements you just place on top, but what if you need a tooltip for 3d object which moves?
  28. 28. HTMLMesh for mixed mode Sticking React Components to 3D world positions
  29. 29. HTMLMesh Coordinates recalculated on every RAF then transform / translate / scale
  30. 30. 2# Performance regressions New feature merged can introduce FPS drop which is invisible for devs and QAs
  31. 31. Continuous FPS benchmarking After every merge we get performance metrics and build graphs
  32. 32. Continuous FPS benchmarking ● Works on top of functional testing ● Functional tests run with Webdriver.io ● Benchmark is initiated as a custom cucumber step ● Measures time between every frame and by the end of scenario gets following metrics: Average FPS, Number of dropped frames, Dropped frames time, Longest jank
  33. 33. Reporting to Jenkins Benchmark plugin ● Works on top of functional testing ● Functional tests run with Webdriver.io ● Benchmark is initiated as a custom cucumber step ● Measures time between every frame and by the end of scenario gets following metrics: Average FPS, Number of dropped frames, Dropped frames time, Longest jank
  34. 34. 3# Too good hardware Yes, as developers we have hardware which is far from average user setup
  35. 35. Low-end testing Emulate dropped frames and low FPS
  36. 36. Evolution Gaming testing pipeline
  37. 37. Chrome extension for low-end testing Emulates dropped frames and low FPS
  38. 38. 4# Designer -> Developer interaction Yes, as developers we have hardware which is far from average user setup
  39. 39. How mature game engines approach this? Having powerful WYSIWYG, user friendly IDEs allowing designers to be a part of development team
  40. 40. Unity? Amazing gaming platform
  41. 41. Can we solve tooling problem for BabylonJS? Potentially yes
  42. 42. 5# Assets reusing Once we had to do a lightning...
  43. 43. Unity store is awesome
  44. 44. 2000$ vs 5$ Reusing from Unreal / Unity stores makes you efficient
  45. 45. Unity leverages all gamedev knowledge accumulated by mature industry
  46. 46. The only thing Unity sucks in is building UIs As it was with all game engines before HTML era
  47. 47. So how to use best UI framework with Unity?
  48. 48. First of all export Unity project to WebGL
  49. 49. npm i reactunity
  50. 50. Unity Redux middleware All redux events to be propagated into Unity app
  51. 51. Unity dispatch To dispatch events from Unity
  52. 52. The problem with Unity?
  53. 53. Clear project built is 20mb =(
  54. 54. Waiting for Unity Tiny
  55. 55. But do we need it if BabylonJS progress that well?
  56. 56. @PixelsCommander denis.radin@gmail.com

Создать фотореалистичное 3D приложение для Web не просто. Сделать это с React еще сложнее, но окупается с лихвой если вы все таки справились. Этот доклад о том как Evolution Gaming использует WebGL и ReactJS для создания самого сложного и дорогого WebGL приложения из когда либо разработанных.

Views

Total views

337

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×