Web component

Using <shader-pad> directly in HTML with one image texture and one inline shader.

This example features declarative shader markup using <shader-pad>. It includes one image texture, one inline fragment shader, and no surrounding app code. The component can read texture data directly from its HTML children.

Photo by Jeremy Bishop on Unsplash

Embedded texture children are declared with data-texture. Here the image is bound tou_trees, so the fragment shader can read from it immediately.

<shader-pad>
  <img src="trees.jpg" data-texture="u_trees" />
  <script type="x-shader/x-fragment">
    // sample u_trees in the shader
  </script>
</shader-pad>