Skip to content

Latest commit

 

History

History
106 lines (80 loc) · 4.22 KB

README.md

File metadata and controls

106 lines (80 loc) · 4.22 KB
Raw

Alt text

REACT APP GLSL (HOVER EFFECT)

Goal

This project is a laboratory where I create hover effect using GLSL Shader and React Three Fiber.

Plan of the presentation

I explain with all the details how I build the project and my way of working.

Experience

  • Experience 1: Pixel offset (Rain Effect)
  • Experience 2: Ghost effect on top of an image
  • Experience 3: Top to bottom effect with a pixel color offset
  • Experience 4: Using a displacement texture for changing image
  • Experience 5: Adding a ripple effect using noise and displacement texture
  • Experience 6: Adding a perlin noise on the mesh
  • Experience 7: Adding a mask on top of an image
  • Experience 8: Adding a new image on the mix of the effect 7
  • Experience 9: Adding a difference color effect (Morph)
  • Experience 10: Burning transition effect between two image
  • Experience 11: Curl Noise transition effect between two image
  • Experience 12: Creating a glitch effect on image

Documentation

Code documentation

The jsdoc can be generated locally with the following command :

npm run build:docs

Organization

Organization of the global folder

Folder's Name Description of the folder
out The documentation generated by jsdoc
public Regroup the images and public files
src Regroup the source code

Organization of the src folder

Folder's Name Description of the folder
components Regroup the components used inside the pages
constants Regroup the exported constants
pages Regroup the components representing the pages
services Regroup the services of the app
styles Regroup the scss files

Development

Creating a page

For creating a new page, you need to set create a components inside the folder pages and to connect it in app by creating a Panel with the size of the page and creating the route.

Packages

  • react-app-rewired: Allow us to rewrite the config of React without ejecting the app
  • customize-cra: Allow us to rewrite the config of webpack and create module alias
  • eslint: For linting the code with EsLint
  • @babel/eslint-parser: Changing the parser for having access to eslint in babel
  • eslint-config-airbnb: For having the set of rules airbnb for eslint
  • eslint-plugin-import: For managing the alias import with eslint
  • eslint-plugin-react: For managing the react rules
  • prettier: For formating the style of the code
  • eslint-plugin-prettier: For using the prettier package with esLint
  • sass: For using the SASS css preprocessor (scss)
  • jsdoc: For managing the dev documentation of the project
  • react-router-dom: For managing the router and the path to the differents pages
  • react-helmet: For managing the meta of the differents page
  • three: Allow us to use the webgl easily
  • @react-three/fiber: For connecting three with react
  • @react-three/drei: An extension of r3f for using the shader
  • wouter: For managing the routing of the app easily

Running

For running the API, a single command is needed.

npm run start

Commands

  • npm run start: Run the linter and then the project
  • npm run build: Build the project
  • npm run test: Run the test of the project
  • npm run eject: Eject the application (sometimes necessary)
  • npm run linter:fix: Run the linter and fix the errors
  • npm run build:docs: Build the documentation from the comments in the code
  • npm run check-update: Check if the package are up to date (for now, everything is except the testing and webvital)