svelte-ogl

A port of OGL to Svelte. Fully typed.

npm i -D svelte-ogl

Example

<script lang="ts">
	import { Canvas, Camera, Mesh, Scene } from "svelte-ogl";
	import { Program, Plane } from "ogl";

	const uniforms = {
		time: { value: 0 },
	};
</script>

<Canvas
	on:render={(e) => uniforms.time.value = e.detail.time / 1000}
>
	<Camera />

	<Scene>
		<Mesh
			program={(gl) => 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
			})}
		/>
	</Scene>
</Canvas>

Report Bug

Please refer to the issues page!

Feature Request

Please refer to the issues page!