Computer-Graphics-Lab

A React renderer for pathtracing.

Usage

install npm package

``bash
npm install @youyouzone/react-sdf
`

use as a React component

`jsx
import Page from '@youyouzone/react-sdf';

export const App = () => {
const rawData = [
{ position: [0, 180, 0], size: [100, 0.01, 25], color: [1.0, 0.7, 0.38], emissive: [10, 10, 10] },
{ position: [0, 201, 0], size: [200, 1, 100], color: [0.7, 0.7, 0.7], },
{ position: [-200, 50, 0], size: [1, 150, 100], color: [1, 0, 0] },
{ position: [200, 50, 0], size: [1, 150, 100], color: [0, 1, 0], roughness: 0.1, metallic: 1 },
{ position: [0, 0, -100], size: [200, 200, 1], color: [0, 1, 1], },
{ position: [0, -100, 0], size: [200, 1, 100], color: [0.7, 0.7, 0.7] },
{ position: [-50, -40, 0], size: [30, 60, 30], color: [0.5, 0.3, 0.6] },
]

return style={{ width: '100%', height: '100vh' }}
>
position={[0, 50, 250]}
lookat={[0, 50, 0]}
rotation={0}
fov={50 / 180 * Math.PI}
/>
{rawData.map(({ position, size, color, emissive, roughness, metallic }, i) =>
key={i}
position={position}
size={size}
color={color}
emissive={emissive}
roughness={roughness}
metallic={metallic}
/>
)}
position={[50, -45, 0]}
radius={50}
color={[1, 1, 1]}
roughness={0}
specTrans={1}
specular={0.02}
/>

}
``

Examples

$3

https://cornell-box.netlify.app
https://disney-principled.netlify.app
https://bvh-example.netlify.app

$3

For more samples

License

This project is licensed under 

Contact

* Email:eric199002@icloud.com
* Twitter:https://twitter.com/nikoniko600
* Repo:https://github.com/Eric-Schecter/react-sdf