
Security News
OpenGrep Restores Fingerprinting in JSON and SARIF Outputs
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
@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.
0.0.3
FAQs
A React functional component to display a simple WebGL shader.
The npm package @signal-noise/react-shader-canvas receives a total of 1 weekly downloads. As such, @signal-noise/react-shader-canvas popularity was classified as not popular.
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
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.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.