EIUNAB-3645

catalog-info.yaml

@@ -0,0 +1,12 @@
+apiVersion: backstage.io/v1beta1
+kind: Component
+metadata:
+  name: react-shader-canvas
+  namespace: economist-impact
+  annotations:
+    github.com/project-slug: signal-noise/react-shader-canvas
+    backstage.io/techdocs-ref: dir:.
+spec:
+  type: website
+  lifecycle: production
+  owner: group:economist-impact/signal-noise

docs/index.md

@@ -0,0 +1,104 @@
+# react-shader-canvas
+
+[![NPM version][npm-image]][npm-url]
+[![Actions Status][ci-image]][ci-url]
+[![PR Welcome][npm-downloads-image]][npm-downloads-url]
+
+A react component to display and control a WebGL shader.
+
+## Introduction
+
+Sometimes you want a simple way of displaying a WebGL Shader within your React project without a large 3D library like three.js, Alfrid or Babylon.js. This component does exactly that! You can very easily specify the size, shaders and optional [uniforms](https://jameshfisher.com/2017/10/03/webgl-fragment-shader-uniform/) to pass into the shader.
+
+This project is essentially a wrapper around [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas/) that allows it to be used within your React projects. Please check out their documentation to see whats happening under the hood.
+
+## Installation
+
+Install this package with `npm`.
+
+```bash
+npm i @signal-noise/react-shader-canvas
+```
+
+## Usage
+
+Here is the most minimal example...
+
+```JSX
+import React from 'react';
+import ShaderCanvas from "@signal-noise/react-shader-canvas";
+
+const shader = `
+  precision mediump float;
+  void main() {
+    gl_FragColor = vec4(1, 0, 0, 1);
+  }
+`;
+
+const RedView = () => (
+  <ShaderCanvas width={320} height={240} fragShader={shader} />
+);
+
+```
+
+You can optionally pass in a vertex shader, uniforms and a supersample value.
+
+```JSX
+import React from 'react';
+import ShaderCanvas from "@signal-noise/react-shader-canvas";
+
+// Using the webpack loader "shader-loader"
+import fragShader from "./noise.frag";
+import vertShader from "./noise.vert";
+
+const FunkyView = () => {
+
+  // Uniforms to pass into the shader
+  const uniforms = {
+    u_color_bg: [11, 12, 33],
+    u_color_noise: [205, 255, 0],
+    u_noise_amount: 0.5
+  };
+
+  return (
+    <ShaderCanvas
+      width={640}
+      height={480}
+      fragShader={fragShader}
+      vertShader={vertShader}
+      uniforms={uniforms}
+      superSample={2} // Render twice the display resolution
+    />
+  );
+};
+```
+
+## API
+
+- `width` : Required - Number - The width in pixels.
+- `height` : Required - Number - The height in pixels.
+- `fragShader` : Required - String - The fragment shader to use.
+- `vertShader` : Optional - String - The vertex shader to use.
+- `uniforms` : Optional - Object - An object containing vec2, vec3 and float key value pairs.
+- `superSample` : Optional - Number - A value to supersample by, creating a smoother image.
+
+## Notes
+
+### Super Sampling
+
+You have the option of super sampling as a method to antialias the final output. A value of `2` is generally a good idea. This quadruples the processing requirements.
+
+### Retina
+
+The rendered output matches the devices pixel density automatically.
+
+### Mouse
+
+A vec2 uniform `u_mouse` is passed into the shader.
+
+[npm-image]: https://img.shields.io/npm/v/@signal-noise/react-shader-canvas.svg?style=flat-square&logo=react
+[npm-url]: https://npmjs.org/package/@signal-noise/react-shader-canvas
+[npm-downloads-image]: https://img.shields.io/npm/dm/@signal-noise/react-shader-canvas.svg
+[npm-downloads-url]: https://npmcharts.com/compare/@signal-noise/react-shader-canvas?minimal=true
+[ci-image]: https://github.com/signal-noise/react-shader-canvas/workflows/node-ci/badge.svg
+[ci-url]: https://github.com/signal-noise/react-shader-canvas/actions

mkdocs.yml

@@ -0,0 +1,5 @@
+docs_dir: docs
+nav:
+  - Main: index.md
+plugins:
+  - techdocs-core