In the world of shaders programming, the equivalent of a "Hello, World!" application is typically a simple solid color display.
Let's fill the canvas with solid red color:
import { Color, Player, Shader } from "@react-shader/fiber";
const HelloWorld = () => {
return (
// You can specify size of your canvas
<Player width={300} height={300}>
<Shader>
{/* Child of Shader component (color) will be assigned to the result */}
<Color hex={"#ff055c"} />
</Shader>
</Player>
);
};
export default HelloWorld;
In the example above, we used the following components:
- The Player is a component that creates a canvas and draws a WebGL shader on it.
- The Shader component is the main container for your shader. It should contain a color or any component that represents a color, such as Vec4 or a custom component that returns a color.
- Color is a wrapper around the native Vec4 component that adds syntax sugar to represent colors in hex format. It can also accept the props
r
,g
,b
,a
to set colors by providing RGBA values.