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.

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

55 views

Published on

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

Published in: Education
  • Be the first to comment

  • 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

×