https://github.com/mikbry/react-webgl-app

Boilerplate to create a React & WebGL app
https://github.com/mikbry/react-webgl-app

canvas hooks-api-react react webgl

Last synced: about 3 hours ago
JSON representation

Boilerplate to create a React & WebGL app

• Host: GitHub
• URL: https://github.com/mikbry/react-webgl-app
• Owner: mikbry
• License: mit
• Created: 2020-02-10T13:43:02.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T06:53:46.000Z (almost 2 years ago)
• Last Synced: 2024-04-18T09:48:08.685Z (7 months ago)
• Topics: canvas, hooks-api-react, react, webgl
• Language: JavaScript
• Size: 1.2 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `react-webgl-app`

Boilerplate to create a minimal React & WebGL app.

![Example](public/images/example.png)

It is made using [rollup-react-app](https://github.com/mikbry/RollupReactApp). The WebGL code is an heavily modified example from [Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL).

## Why

- Create a minimal from scratch React + WebGL app.

- No Three.js

- use React's hook

It will be enhanced with more examples and an article.

## How it works ?

### 1 - WebGL needs a canvas

`GLVIew` component  renders a `` element. GLView iis using the [React Effect Hook](https://reactjs.org/docs/hooks-effect.html) to make the animation works. The code is very simple:

```javascript

const GLView = ({ width, height, scene }) => {

  const ref = useRef();

  useEffect(() => {

    const canvas = ref.current;

    const webGL = new WebGL(canvas, width, height);

    webGL.init(scene);

    return () => {

      webGL.close();

    };

  });

  return ;

};

```

### 2 - All the GL stuff 

`WebGL` is the engine where WebGL, shaders, model are intialized. 

The rendering animation is done using:

```javascript

    this.render = this.render.bind(this);

    this.requestId = requestAnimationFrame(this.render);

```

### 3 - Where the magic plays

`scene.js`

All the model, shaders, are here and also the scene rendering.

## Community

Don't hesitate to test, use, contribute, ...

Made by [Mik BRY](http://twitter.com/mikbry)