Svelte Gl

screenshot of Svelte Gl

Just an idea. For now.

Overview

The idea behind svelte-gl is to create a compiler that combines the features of Svelte and Three.js. The compiler would take a scene graph, written in HTMLx, as input and generate low-level WebGL code as output. The goal is to make it easier to embed 3D graphics on the web that are potentially more performant than existing solutions, all while reducing the bundle size.

Features

  • Markup-driven approach for describing 3D scenes, inspired by A-Frame.
  • Potential for better performance than existing solutions due to the use of a compiler.
  • Integration of the Svelte component API for handling local state and lifecycle hooks.
  • Interoperability with Svelte components.

Summary

The author proposes the concept of svelte-gl, a compiler that combines Svelte and Three.js to make it easier to embed 3D graphics on the web. The goal is to provide a more performant solution with a smaller bundle size. The author suggests utilizing the markup-driven approach of A-Frame and integrating the Svelte component API for handling state and lifecycle hooks. The implementation details are not fully fleshed out, but the author mentions the possibility of adding a new compiler target within Svelte or extracting the different compiler targets into separate packages. Further considerations include mixing 2D and 3D content, post-processing effects, asset loading, and event binding.