ShaderPass
[Back to readme](README.md)
The `` component will create a WebGL ShaderPass (using a RenderTarget object), acting as a wrapper for the curtains.js ShaderPass class.
#### Usage
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {ShaderPass} from 'react-curtains';
function BasicShaderPass() {
return (
);
}
```
#### Properties
##### Regular parameters & properties
You can pass any of the ShaderPass class parameters as a React prop to your component.
```jsx
// assuming passVs, passFs and passUniforms are defined above
```
##### uniqueKey property
When dealing with selective passes (ie: apply a shader pass to a bunch of planes, not all of them), it may be easier to add your render target and shader pass inside a loop. Just like with the `` you can pass an additional `uniqueKey` prop to your `` component and it will be created just once.
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {RenderTarget, ShaderPass} from 'react-curtains';
import BasicPlane from './components/BasicPlane'; // a basic plane component
function SelectivePlanesPass({planeElements}) {
return (
{planeElements.map((planeEl) => {
})}
);
}
```
Note that this prop is optional: if the parent `` component has its `autoDetectChildren` prop set to true (which is by default), it can inherit from its `uniqueKey` prop as well.
#### Events
You can also pass as a prop a function to execute for each corresponding ShaderPass class events. You'll have access to the corresponding `shaderPass` instance inside all of them.
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {ShaderPass} from 'react-curtains';
function BasicShaderPass() {
const onPassReady = (shaderPass) => {
console.log("shader pass is ready", shaderPass);
};
const onPassRender = (shaderPass) => {
console.log("on shader pass render!", shaderPass);
};
return (
);
}
```
#### Unmounting
Each time the `` component will unmount, the corresponding WebGL shaderpass and its associated render target element will be automatically disposed.