Building photorealistic 3D experiences on the Web is a challenge. Making it with React is even harder but once you got there it pays off in many ways. This talk is about Evolution Gaming approach of working with 3D graphics on the Web using ReactJS with the goal to build the most sophisticated and expensive WebGL application ever created.

1. Advanced 3D graphics + React
Using the best from UI and 3D worlds

2. @PixelsCommander
denis.radin@gmail.com

3. Holy grail of efficient
computer graphics
I've been chasing for years

4. 1991 - ZX Spectrum
48kb, 256x192px, only 2 of 8 colors for 8x8px cell

6. 1995 - C++ general
programming

7. 1998 - Delphi + DirectX

8. 2004 - C#.Net, GDI+

10. 2006 Flash, later Stage3D

12. 2010 - HTML5 canvas
Authoring one of the first game engines FlashJS

13. 2013 - Performant UIs with
WebGL

14. 2017 - 3d games with
WebGL and React

16. The most advanced WebGL
3d app to the date?

17. 3D layer, UI layer
Under each other

18. BabylonJS vs ThreeJS

19. Why BabylonJS for 3D?

20. Three.js: compromised API
to keep old users happy

21. Babylon.js: TypeScript out
of the box, designed for
bigger applications

22. Why ReactJS?
Best ecosystem and community, best tooling, easy
to maintain components library

23. Why Redux?
Simple and kinda official state management

24. Why Redux?
It fits to fire actions not just receive / send data

25. How 3d layer and UI layer
play together?

27. Mesh - node of 3d world
position, rotation, materials

29. ReduxMesh - building block
connected to the state
position, rotation, materials, componentDidMount,
componentWillReceiveProps

30. Lifecycle methods React.Component vs ReduxMesh
componentDidMount
componentWillReceiveProps
componentWillUnmount
render
componentDidMount
componentWillReceiveProps
componentWillUnmount
initialRender

31. No this.render(), not
declarative
To avoid complication and have control over how we
apply changes

32. Challenges when do 3D?
Tooling, reusing of global gamedev advancements

33. 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?

34. HTMLMesh for mixed mode
Sticking React Components to 3D world positions

36. HTMLMesh
Coordinates recalculated on every RAF then
transform / translate / scale

37. 2# Performance regressions
New feature merged can introduce FPS drop which
is invisible for devs and QAs

38. Continuous FPS
benchmarking
After every merge we get performance metrics and
build graphs

39. 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

40. 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

42. 3# Too good hardware
Yes, as developers we have hardware which is far
from average user setup

43. Low-end testing
Emulate dropped frames and low FPS

45. Evolution Gaming testing pipeline

46. Chrome extension for low-
end testing
Emulates dropped frames and low FPS

47. 4# Designer -> Developer
interaction
Yes, as developers we have hardware which is far
from average user setup

49. How mature game engines
approach this?
Having powerful WYSIWYG, user friendly IDEs
allowing designers to be a part of development team

50. Unity?
Amazing gaming platform

52. Can we solve tooling
problem for BabylonJS?
Potentially yes

53. 5# Assets reusing
Once we had to do a lightning...

56. Unity store is awesome

57. 2000$ vs 5$
Reusing from Unreal / Unity stores makes you
efficient

58. Unity leverages all gamedev
knowledge accumulated by
mature industry

59. The only thing Unity sucks
in is building UIs
As it was with all game engines before HTML era

60. So how to use best UI
framework with Unity?

61. First of all export Unity
project to WebGL

62. npm i reactunity

64. Unity Redux middleware
All redux events to be propagated into Unity app

65. Unity dispatch
To dispatch events from Unity

66. The problem with Unity?

67. Clear project built is 20mb
=(

68. Waiting for Unity Tiny

69. But do we need it if
BabylonJS progress that
well?

70. @PixelsCommander
denis.radin@gmail.com