search

fand / react-vfx

WebGL effects for React elements
https://amagi.dev/react-vfx
468 stars 16 forks source link

Use twgl.js instead of Three.js #30

Closed fand closed 2 years ago

fand commented 2 years ago

I tried replacing Three.js with twgl.js to see if it improves the performance. But it turned out it doesn't improve the load time so much, on the other hand it causes performance degradation as twgl doesn't handle VertexArray and uniform updates. So I gave up this branch, I'll leave this PR just for the record.

fand commented 2 years ago

Build log in this branch and main

 amagi@LAPTOP-6SK3K5JG  ~\..\..\..\react-vfx   twgl ≣  yarn build
yarn run v1.22.10
$ run-s clean build:lib build:docs
$ rimraf lib docs/build
$ tsc -d
$ cd docs && yarn build
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  304.75 KB  build\static\js\2.280b2978.chunk.js
  15.45 KB   build\static\js\main.2be44f3e.chunk.js
  1.11 KB    build\static\css\main.39ec0459.chunk.css
  786 B      build\static\js\runtime-main.2b7ae7f5.js

The project was built assuming it is hosted at /react-vfx/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

Done in 19.82s.

 amagi@LAPTOP-6SK3K5JG  ~\..\..\..\react-vfx   twgl ≣  g co main
Switched to branch 'main'
Your branch is up to date with 'origin/main'.

 amagi@LAPTOP-6SK3K5JG  ~\..\..\..\react-vfx   main ≣  yarn
yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 7.86s.

 amagi@LAPTOP-6SK3K5JG  ~\..\..\..\react-vfx   main ≣  yarn build
yarn run v1.22.10
$ run-s clean build:lib build:docs
$ rimraf lib docs/build
$ tsc -d
$ cd docs && yarn build
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  440.33 KB  build\static\js\2.95308e7e.chunk.js
  15.18 KB   build\static\js\main.d3a85bd8.chunk.js
  1.11 KB    build\static\css\main.39ec0459.chunk.css
  786 B      build\static\js\runtime-main.2b7ae7f5.js

The project was built assuming it is hosted at /react-vfx/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

Done in 38.28s.