
Security News
Python Adopts Standard Lock File Format for Reproducible Installs
Python has adopted a standardized lock file format to improve reproducibility, security, and tool interoperability across the packaging ecosystem.
@signal-noise/react-shader-canvas
Advanced tools
A React functional component to display a simple WebGL shader.
A react component to display and control a WebGL shader.
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 to pass into the shader.
This project is essentially a wrapper around glslCanvas that allows it to be used within your React projects. Please check out their documentation to see whats happening under the hood.
Install this package with npm
.
npm i @signal-noise/react-shader-canvas
Here is the most minimal example...
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.
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
/>
);
};
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.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.
The rendered output matches the devices pixel density automatically.
A vec2 uniform u_mouse
is passed into the shader.
FAQs
A React functional component to display a simple WebGL shader.
We found that @signal-noise/react-shader-canvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python has adopted a standardized lock file format to improve reproducibility, security, and tool interoperability across the packaging ecosystem.
Security News
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.