Tutorial about three.js-pathtracing-renderer

[erichlof]

Hello @Slender1808

Yes you should be able to port my shader code to Unity, at least the more simple demos like the geometry or material switching demos. Basically all of my demos use the Three.js library's custom ShaderMaterial and this shader material is then applied to a Three.js Plane object, similar to a Quad in Unity. The Plane object consists of 2 large triangles that cover the entire viewing area and are 'glued' in place by making the screen quad a child of the Three.js world camera object. Wherever the camera goes or looks, the entire large screen quad moves exactly with it, always staying out in front and aligned.

The only rasterization that happens in the traditional 3d graphics way, is that the 2 large triangles get rasterized to the screen. The vertex shader is only a couple of lines because of this fact! Then the main component is the fragment shader, which does all the heavy path tracing calculations on a per-pixel basis. Since the 2 large triangles of the plane object are exactly stretched across the screen, when the fragment shader is run, it operates on each pixel of those 2 triangles, with normalized UVs being 0,0 in the lower left corner to 1,1 in the upper right corner, (0.5, 0.5 is the middle of the screen) which is essentially every pixel on your screen, covering the entire screen.

I don't know Unity well enough to tell you how to hook all the mouse capture and keyboard events up to the Unity demo, but for the Fragment shader, which is the heart of all the demos, I think the best tutorial is this one:
ShaderToy WebGL shader to Unity shader tutorial

Although this is technically going from 'ShaderToy' to Unity and not Three.js to Unity, the same concepts and language conversions from GLSL to HLSL apply exactly. The above video should help get you started with porting WebGL type shaders (which use GLSL) to Unity custom unlit shaders (which use their own Unity boilerplate code as well as HLSL).

Let me know if you need further assistance. Best of luck!