React + WebGL
A Little About Me
Question 1:
Who here uses React?
Question 2:
Who here uses WebGL?
Question 3:
Who here as used them together in any capacity?
React gets the frontend people going
More than these
kids love spongbob
More than N64....
We're all fangirlin'
For good reason,
react gives us:
- Composability
- ...
Ya, actually, that's all we need. Just one bullet point
Easier to Understand
Hunting for Code... is bad
Why is composability so powerful? (pong example)
Wait... I understand this?!
Our <Court> component
This all leads to a
"scene graph"
Fancy shmancy hot-reloading (sphere example)
HOLY FUCK! YES!
Where are you now?
TWGL.js (manual work)
React + Three
React + Pixi
React Three Renderer?
Performance?
- We don't know, it seems better given the better control over when/how renders occur
- Really slow while the console is open
- Some overhead due to how react renders/initializes components
Debbie Downers?
- Sometimes hard to debug since so much is going on when react calls a render method
- I can foresee having issues isolating the root cause of performance issues
Getting Set-up
- npm install -g yo
- npm install -g generator-redux
- mkdir my-react-webgl-thing
- cd my-react-webgl-thing
- yo redux
- npm install --save react-three
- copy paste some code from one of my repos