https://github.com/lbirkert/svelte-ogl
typed port of OGL to svelte components.
https://github.com/lbirkert/svelte-ogl
frontend ogl svelte sveltejs sveltekit typed typescript webgl
Last synced: 2 months ago
JSON representation
typed port of OGL to svelte components.
- Host: GitHub
- URL: https://github.com/lbirkert/svelte-ogl
- Owner: lbirkert
- License: mit
- Created: 2022-11-02T14:27:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-26T11:37:15.000Z (over 1 year ago)
- Last Synced: 2024-04-16T14:20:26.618Z (about 1 year ago)
- Topics: frontend, ogl, svelte, sveltejs, sveltekit, typed, typescript, webgl
- Language: Svelte
- Homepage: https://lbirkert.com/svelte-ogl/
- Size: 69.3 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-ogl
A port of [OGL](https://github.com/oframe/ogl/) to Svelte. Fully typed.
```
npm i -D svelte-ogl
```
## Example
```html
import { Canvas, Camera, Mesh, Scene } from "svelte-ogl";
import { Program, Plane } from "ogl";
const uniforms = {
time: { value: 0 },
};
uniforms.time.value = e.detail.time / 1000}
>
new Program(gl, {
vertex: /* glsl */ `
attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 0, 1);
}
`,
fragment: /* glsl */ `
precision highp float;
uniform float time;
void main() {
gl_FragColor = vec4(vUv * sin(time), 1, 1);
}
`,
uniforms
})}
geometry={(gl) =>
new Plane(gl, {
width: 2,
height: 2
})}
/>
```
## Report Bug
Please refer to the [issues](https://github.com/KotwOSS/svelte-ogl/issues) page!
## Feature Request
Please refer to the [issues](https://github.com/KotwOSS/svelte-ogl/issues) page!