[core] Explore how we can integrate shaders and three-elements

[hmans]

trafficstars

This is mostly a reminder for me to explore what kind of fancy, declarative glue we can provide for adding custom shaders to three-elements projects.

[CodyJasonBennett]

The two main workflows that come to mind are using <script> tags to write and reference shaders, or in JSX, point to a string (or compiled GLSL if they want to get fancy).

The main issue here is allowing the vanilla user to reference these shaders from the DOM.

Vanilla

<script id="vertexShader" type="x-shader/x-vertex">
  // vertex shader
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  // fragment shader
</script>

<three-shader-material
  uniforms="{ ... }"
  vertexShader="#vertexShader"
  fragmentShader="#fragmentShader"
></three-shader-material>

JSX

const vertexShader = '// vertex shader'
const fragmentShader = '// fragment shader'

<three-shader-material
  uniforms={{ ... }}
  vertexShader={vertexShader}
  fragmentShader={fragmentShader}
/>