https://github.com/fdesjardins/webgl
Examples, tutorials, mini-projects, ...
https://github.com/fdesjardins/webgl
babel glsl gpgpu gpujs physics react simulation threejs tutorials webgl webgl2 webpack
Last synced: 10 months ago
JSON representation
Examples, tutorials, mini-projects, ...
- Host: GitHub
- URL: https://github.com/fdesjardins/webgl
- Owner: fdesjardins
- License: mit
- Created: 2017-07-16T06:04:50.000Z (over 8 years ago)
- Default Branch: v2
- Last Pushed: 2024-12-17T02:15:51.000Z (about 1 year ago)
- Last Synced: 2025-04-02T00:51:40.340Z (10 months ago)
- Topics: babel, glsl, gpgpu, gpujs, physics, react, simulation, threejs, tutorials, webgl, webgl2, webpack
- Language: JavaScript
- Homepage: https://fdesjardins.github.io/webgl/
- Size: 60.3 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# WebGL Experiments
A playground for WebGL stuff
## Getting Started
```console
npm install
npm start
```
## Adding a Page
1. Create a new directory in [src/pages/](src/pages/)
2. Create an `index.js` in that directory with the following format:
```js
export const meta = {
title: 'My Experiment',
tags: 'threejs,gpgpu',
}
export const init = ({ canvas, container }) => {
// WebGL code goes here
return () => {
// Cleanup code goes here
}
}
```
See [src/pages/hello-three](src/pages/hello-three) for a very basic example.
You can also supply an `options` export to customize the page. For example, you can create a shadertoy-like environment where you only need to supply the shader code:
```js
import fs from './fs.glsl'
import vs from './vs.glsl'
import texture from './rusty-metal-512x512.jpg'
...
export const options = {
display: 'fullscreen',
type: 'shadertoy',
shadertoy: {
vs, // optional; default is passthrough shader
fs,
iChannel0: texture // optional
},
}
```
## Credits
Many thanks to `iq` and `mrdoob`.
## License
MIT © [Forrest Desjardins](https://github.com/fdesjardins)