diff --git a/catalog-info.yaml b/catalog-info.yaml new file mode 100644 index 0000000..648058c --- /dev/null +++ b/catalog-info.yaml @@ -0,0 +1,20 @@ +apiVersion: backstage.io/v1beta1 +kind: Component +metadata: + name: react-shader-canvas + namespace: economist-impact + annotations: + github.com/project-slug: signal-noise/react-shader-canvas + # the circleCI project, mirrors github repo in this case: + circleci.com/project-slug: github/signal-noise/react-shader-canvas + # GUID - see https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/manage-your-dashboard/ + newrelic.com/dashboard-guid: MzY1MjgxOXxWSVp8REFTSEJPQVJEfGRhOjE3MDkwOA + newrelic.com/dashboard-guid: MzY1MjgxOXxWSVp8REFTSEJPQVJEfGRhOjE5NTIyNw + description: covid-relative-risk for SignalNoise Economist Impact Project + opsgenie: + domain: https://economist.app.opsgenie.com/teams/dashboard/49177ca8-5e59-4364-af23-c22cc60c026f/main + backstage.io/techdocs-ref: dir:. +spec: + type: website + lifecycle: production + owner: group:economist-impact/signal-noise diff --git a/docs/index.md b/docs/index.md new file mode 100755 index 0000000..6993a25 --- /dev/null +++ b/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 = () => ( + +); + +``` + +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 ( + + ); +}; +``` + +## 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 diff --git a/mkdocs.yml b/mkdocs.yml new file mode 100644 index 0000000..a569f5f --- /dev/null +++ b/mkdocs.yml @@ -0,0 +1,5 @@ +docs_dir: docs +nav: + - Main: index.md +plugins: + - techdocs-core