Skip to content

Latest commit

 

History

History
56 lines (36 loc) · 2.06 KB

README.md

File metadata and controls

56 lines (36 loc) · 2.06 KB
Raw

react-webgl-fluid

http://x8bitrain.github.io/react-webgl-fluid

A React implementation of Pavel Dobryakov's WebGL Fluid Simulation as a component, not only is it a fun simulation to play with but when tweaked the settings to be less resource intensive and lower resolution, the simulation can be a cool UI element you could add to something like a navbar or page background like this: https://btr.pm/projects/

How it works

Not a rewrite of the original script but just a basic, easy to use React component that adds a <script> tag containing a modified version of the original when the component mounts, the script then hooks into a <canvas> component generated by React, then it renders the Fluid sim.

You can edit the simulation settings on line 28 of fluid-init.js https://github.com/x8BitRain/react-webgl-fluid/blob/master/assets/js/fluid-init.js#L4

Main changes

The modifications to the original Fluid WebGL script are as follows:

  • Removed code that initializes the control panel for changing the sim settings.
  • Absolute paths to .png resources.
  • Name of the canvas element the scripts hooks into from document.getElementsByTagName('canvas')[0]; to document.getElementsByClassName('fluid-canvas')[0];
  • Altered sim configuration to be lower res and density, also background is white now.
  • Inline style as a states so you can change the dimensions of the canvas on the fly with React.

react-boilerplate

Build using a simple React boilerplate from Lewagon configured with:

  • React, ReactDOM
  • Webpack 4
  • Babel with es2015 and react presets
  • .js or .jsx
  • main application.scss stylesheet is imported in index.js as a module to enjoy hot reloading

Scripts

To start the local Webpack Dev Server (usually on port 8080):

yarn start

To lint all JavaScript files in the src folder:

yarn lint

To build static HTML and JS files for production or whatever rly)))

webpack -p