erichlof / three.js-pathtracing-renderer Goto Github PK

Hello！When i use the HDRI_Environment.html(threejs version r110),I tried to change the HDRI path like kiara_5_noon_2k.hdr ，a lot of white noise appears in the scene.The problem did not occur in the previous version。
您好！当我使用您的 HDRI_Environment.html（threejsr110版本，把其中的HDR贴图路径改成了 kiara_5_noon_2k.hdr，像往常一样渲染发现场景中出现了大量的白色噪点。这个在之前的版本没有发生。

Hey I've encountered some rendering problem with my own model:
Above bounding bound of the model part:

Inside bounding bound of the model part:

Atleast, I think this is bounding box (and thus BVH) related?

You can see for your self here: https://n2k3.github.io/BVH_GLTF_Models_Example_v2_test.html

P.S. I have to praise you for making this path tracer, love playing around with it! It was especially interesting to read how much progress you've made in the last couple of months (written in issue #9).
I plan to combine the best parts of your examples (speed optimized 'game engine' settings, glTF model loading, using the nice sky shader, etc) and also add other functionality myself to create a user friendly glTF model viewer. Other functionality I have in mind is proper glTF model loading with local drag & drop support (in my example I've added support for grouped meshes), with basic editor features.

P.P.S. Also the material colors are not correctly shown in the path tracer, at least for my model, if you download the model and use the glTF viewer you'll see that it has multiple materials that have different colors. But since I've written the part of loading my own glTF could you point me in the right direction on how to tackle this problem? Also what would be the best way to communicate for this type of communication, should I just create a new issue?

I am surprised to find this amazing project，and I am developing a similar project，whose demo is Sail.
Will you continue to develop this project? Hope you can continue to keep up the good work, and I will learn from you.

https://erichlof.github.io/THREE.js-PathTracing-Renderer/Constructive_Solid_Geometry_Viewer.html

I remember these glitches being due to uninitialized variables.

Union:

Difference:

Intersection:

Loving the progress! 😊

wonderful work！Why do you use WEBGL not OpenGL？ I think OpenGL may be faster.

First of all, awesome job :)

Do you plan to integrate Monte Carlo path tracing? I am working on a JS library for medical library and I am starting to investigate "cinematic" rendering. It aims to provide very realistic visualizations of datasets. It seems pretty advanced and I hope to be able to leverage some existing libraries such as yours.

The illumination model relies on Monte Carlo path tracing:
https://arxiv.org/pdf/1605.02029

Regular ray marching volume rendering:
https://fnndsc.github.io/ami/#vr_singlepass

With a more complex illumination setup, we could achieve very realistic rendering (performance is not an issue).

Please let me know if this question is out of scope or if you already solved a similar problem or if it sounds interesting challenge to you!

github demos work. zip file .. not so much. black image w/ 60 fps

I have tested your new version and I think there must be a little mistake in your code, because there is a chess effect on the snow and mountains since d986bd9.

In commit ed6f987 the effect isn't there.

But in d986bd9 the chess effect appears when I walk near the snow or mountains.

I miss the days of dragging index.html into firefox. Pressing F5 in a browser after editing via Notepad++ isn't that big of a deal. I realize three.js might have made the switch and THREE.js PathTracing Renderer is being 'compliant' but it's a barrier to adoption

Wow! been playing with this on and off for the last few days. I was wondering where you learned how to do all the CSG boolean operations?... I understand these work for raytracing and distance functions, but I don't understand how they work with pathtracing... would really like to read up and get a deeper understanding... thanks for all your awesome work :)

Hello!
How can I render the existing scene with different mesh (BufferGeometry + some Materials) with PathTracing-Render?

Torus Intersection seams to have some serious precision issues.

Hi Erich,

truly amazing work you did there!
I was wondering, do you think there is a way to support headless rendering or at least an elegant way of storing the renderings info files?

Tried on iOS 11, iPad 2017, but it’s all black, maybe some minor issue in shaders?

https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html

If you set the camera to be a 2D grid of rays above a surface on one side of the surface then you can generate the surface texture data and perform monte-carlo on this data. Then you can build up a surface.

For a scene which is static but the player moves around in it, then the surface texture can be generated accurately and then it doesn't need to be computed in real-time later once its computed.

Here is an example I produced here which does path tracing and renders textures using Play Canvas. Then my suggestion would be to allow this to scale out, save surface textures back up to a server for caching so they don't need to be computed again. Different client browsers can compute different surfaces.

Here is that project on PlayCanvas to play here https://playcanvas.com/editor/scene/492862/launch edit here https://playcanvas.com/project/453830/overview/surface-shader
You need to spin the mouse wheel to zoom in and rotate the view to see inside.

As far as I can see, the demos have a lot of repeated shader code.

How about doing this something like this?

<script src="three.js"></script>
<script src="three-pathtracing.js"></script>

three-pathtracing.js would have this inside:

THREE.ShaderChunk[ 'pathtracing_functions' ] = `
//-----------------------------------------------------------------------
float SphereIntersect( float rad, vec3 pos, Ray r )
//-----------------------------------------------------------------------
{
	vec3 op = pos - r.origin;
	float b = dot(op, r.direction);
	float det = b * b - dot(op,op) + rad * rad;
       	if (det < 0.0)
		return INFINITY;
        
	det = sqrt(det);	
	float t1 = b - det;
	if( t1 > 0.0 )
		return t1;
		
	float t2 = b + det;
	if( t2 > 0.0 )
		return t2;
	return INFINITY;	
}
// etc
`;

Then all the demos can include that code by adding this in the glsl:

#include <pathtracing_functions>

I run https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html.
but it gets black screen, and nothing showed.
What happened ?
My chrome supports WebGL 2.0.

this looks interesting - http://artis.imag.fr/Members/Cyril.Soler/DEA/Ombres/Papers/Arvo.Sig87.pdf

https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html

Error coming in console as below:

three.min.js:82 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders� THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:50: 'version' : #version directive must occur before anything else, except for comments and white space
�1: precision highp float;
2: precision highp int;
3: #define HIGH_PRECISION
4: #define SHADER_NAME ShaderMaterial
5: #define VERTEX_TEXTURES
6: #define GAMMA_FACTOR 2
7: #define MAX_BONES 0
8: #define BONE_TEXTURE
9: uniform mat4 modelMatrix;
10: uniform mat4 modelViewMatrix;
11: uniform mat4 projectionMatrix;
12: uniform mat4 viewMatrix;
13: uniform mat3 normalMatrix;
14: uniform vec3 cameraPosition;
15: uniform bool isOrthographic;
16: #ifdef USE_INSTANCING
17: attribute mat4 instanceMatrix;
18: #endif
19: attribute vec3 position;
20: attribute vec3 normal;
21: attribute vec2 uv;
22: #ifdef USE_TANGENT
23: attribute vec4 tangent;
24: #endif
25: #ifdef USE_COLOR
26: attribute vec3 color;
27: #endif
28: #ifdef USE_MORPHTARGETS
29: attribute vec3 morphTarget0;
30: attribute vec3 morphTarget1;
31: attribute vec3 morphTarget2;
32: attribute vec3 morphTarget3;
33: #ifdef USE_MORPHNORMALS
34: attribute vec3 morphNormal0;
35: attribute vec3 morphNormal1;
36: attribute vec3 morphNormal2;
37: attribute vec3 morphNormal3;
38: #else
39: attribute vec3 morphTarget4;
40: attribute vec3 morphTarget5;
41: attribute vec3 morphTarget6;
42: attribute vec3 morphTarget7;
43: #endif
44: #endif
45: #ifdef USE_SKINNING
46: attribute vec4 skinIndex;
47: attribute vec4 skinWeight;
48: #endif
49:
50: #version 300 es
51: precision highp float;
52: precision highp int;
53: void main()
54: {
55: gl_Position = vec4( position, 1.0 );
56: } THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:106: 'version' : #version directive must occur before anything else, except for comments and white space
ERROR: 0:111: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:114: 'texelFetch' : no matching overloaded function found
ERROR: 0:114: '=' : dimension mismatch
ERROR: 0:114: 'assign' : cannot convert from 'const mediump float' to 'out highp 4-component vector of float'
�1: precision highp float;
2: precision highp int;
3: #define HIGH_PRECISION
4: #define SHADER_NAME ShaderMaterial
5: #define GAMMA_FACTOR 2
6: uniform mat4 viewMatrix;
7: uniform vec3 cameraPosition;
8: uniform bool isOrthographic;
9: #define TONE_MAPPING
10: #ifndef saturate
11: #define saturate(a) clamp( a, 0.0, 1.0 )
12: #endif
13: uniform float toneMappingExposure;
14: uniform float toneMappingWhitePoint;
15: vec3 LinearToneMapping( vec3 color ) {
16: return toneMappingExposure * color;
17: }
18: vec3 ReinhardToneMapping( vec3 color ) {
19: color *= toneMappingExposure;
20: return saturate( color / ( vec3( 1.0 ) + color ) );
21: }
22: #define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
23: vec3 Uncharted2ToneMapping( vec3 color ) {
24: color *= toneMappingExposure;
25: return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
26: }
27: vec3 OptimizedCineonToneMapping( vec3 color ) {
28: color *= toneMappingExposure;
29: color = max( vec3( 0.0 ), color - 0.004 );
30: return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
31: }
32: vec3 ACESFilmicToneMapping( vec3 color ) {
33: color *= toneMappingExposure;
34: return saturate( ( color * ( 2.51 * color + 0.03 ) ) / ( color * ( 2.43 * color + 0.59 ) + 0.14 ) );
35: }
36: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); }
37:
38: vec4 LinearToLinear( in vec4 value ) {
39: return value;
40: }
41: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
42: return vec4( pow( value.rgb, vec3( gammaFactor ) ), value.a );
43: }
44: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
45: return vec4( pow( value.rgb, vec3( 1.0 / gammaFactor ) ), value.a );
46: }
47: vec4 sRGBToLinear( in vec4 value ) {
48: return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.a );
49: }
50: vec4 LinearTosRGB( in vec4 value ) {
51: return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
52: }
53: vec4 RGBEToLinear( in vec4 value ) {
54: return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
55: }
56: vec4 LinearToRGBE( in vec4 value ) {
57: float maxComponent = max( max( value.r, value.g ), value.b );
58: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
59: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
60: }
61: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
62: return vec4( value.rgb * value.a * maxRange, 1.0 );
63: }
64: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
65: float maxRGB = max( value.r, max( value.g, value.b ) );
66: float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
67: M = ceil( M * 255.0 ) / 255.0;
68: return vec4( value.rgb / ( M * maxRange ), M );
69: }
70: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
71: return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
72: }
73: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
74: float maxRGB = max( value.r, max( value.g, value.b ) );
75: float D = max( maxRange / maxRGB, 1.0 );
76: D = min( floor( D ) / 255.0, 1.0 );
77: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
78: }
79: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
80: vec4 LinearToLogLuv( in vec4 value ) {
81: vec3 Xp_Y_XYZp = cLogLuvM * value.rgb;
82: Xp_Y_XYZp = max( Xp_Y_XYZp, vec3( 1e-6, 1e-6, 1e-6 ) );
83: vec4 vResult;
84: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
85: float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
86: vResult.w = fract( Le );
87: vResult.z = ( Le - ( floor( vResult.w * 255.0 ) ) / 255.0 ) / 255.0;
88: return vResult;
89: }
90: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
91: vec4 LogLuvToLinear( in vec4 value ) {
92: float Le = value.z * 255.0 + value.w;
93: vec3 Xp_Y_XYZp;
94: Xp_Y_XYZp.y = exp2( ( Le - 127.0 ) / 2.0 );
95: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
96: Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
97: vec3 vRGB = cLogLuvInverseM * Xp_Y_XYZp.rgb;
98: return vec4( max( vRGB, 0.0 ), 1.0 );
99: }
100: vec4 mapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
101: vec4 matcapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
102: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
103: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
104: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
105:
106: #version 300 es
107: precision highp float;
108: precision highp int;
109: precision highp sampler2D;
110: uniform sampler2D tPathTracedImageTexture;
111: out vec4 out_FragColor;
112: void main()
113: {
114: out_FragColor = texelFetch(tPathTracedImageTexture, ivec2(gl_FragCoord.xy), 0);
115: }

First of all great work! I am trying to modify the glsl file to add support for metalness, roughness and refractive index. I was able to add roughness to the specular property by using mix function. How ever I don't have any clue on how to change the refractive index and metalness property for a specific material. It could be great if you could add those.

This is a very compelling project. Thank you for sharing. I have been experimenting with changing the scenes and am finding that when I remove certain objects the rendering "whites out". I am unfortunately not experienced with rendering and I am uncertain how to debug this. Any insights you might share would be appreciated. Thanks for your consideration of this!

Queria saber como poderia incluir esse recurso na unity

Hi Erich,

First of all thanks for this beautiful repository and all the work you are doing. Your shader code helped me a lot in understand the nuances of implementing a GLSL based path tracer (https://github.com/knightcrawler25/GLSL-PathTracer). I started off quite a while ago by dismantling your code trying to understand the little details. So thanks a lot for putting up your code and helping everyone who has an interest in this field.

As for my question, I read your December 28th 2018 update where you replaced direct lighting with sending more rays towards light sources. Do you have some numbers related to the performance difference you got when trying this with BVH based scenes? It's a really nice idea and wanted to try it out myself but wanted to know what kind of improvement it would give.

Thanks,
Asif

Hello!thank you very much.
Now, I will give you some suggestions about screen adaptation on mobile app.
Wechat on the iPhone doesn't seem to support canvas very well. If you use window.innerheight and window.innerwidth control canvas size, the canvas height collapses when you rotate the phone screen. I changed to :
SCREEN_WIDTH = document.body.clientWidth;
SCREEN_HEIGHT = document.body.clientHeight;
will back to normal.

Threejs also has this problem.

Hi Erich!

Wonderful work and an inspiration for what can be done using webgl! If you don't mind I'd like to pick your brain a bit regarding your BVH implementation.

For the last couple of months I've been building my own ray tracer using picogl (a small helper lib for webgl2).

I've spent some time trying to implement a working BVH acceleration structure before I found your work. I've tried porting your BVH implementation to my project but when doing so I'm running into a weird bug that I've spent the last 4 weeks trying to solve, to no avail. I'm hoping maybe you have at some point run into something similar and maybe can point me in the right direction.

I started out rewriting your code to be engine-agnostic (basically using gl-matrix vectors and a few other small changes) but during the bug hunt I've regressed to copying your implementation as much as-is as possible in the hope that the bug will disappear; both the builder code and the actual stack implementation in the shader (SceneIntersect()). It has not :/ I've even regressed to using your threejs gltf model loader code. The issue still persists!

As far as I can tell there is a problem with the BVH construction as soon as the number of triangles exceeds the magic number 1025. Please see the attached screenshots.

The first shot is when the number of triangles is around 1000. The other one is when the no. of triangles is greater than 1025 (around 4k iirc). The black boxes are caused by a loop counter check which discards the fragment in the SceneIntersect() stack loop if the loop counter has exceeded 300 iterations. If the loop counter check is omitted an infinite loop usually crashes the browser. Models with a tri count below 1025 are rendered correctly (and really fast! thanks to your bvh code!).

This thing is driving me mad and I would be truly, truly grateful if you could point me in the right direction. I would gladly provide my project code if you'd like (though I completely understand if you do not have the time or energy to sift through my code).

Also, please excuse me for opening an issue in order to ask this question - I couldn't find any other way to contact you. Hope that is okay!

Best regards,
Jakob Stasilowicz

Hello.

I'm getting crashed everytime, never been in such trouble with any other WebGL content.

System specs:
OS: Microsoft Windows 7 Ultimate (64-bit)
CPU: Intel Core i7-6800K @ 4.2GHz
GPU: AMD Radeon HD6770 @ stock
RAM: 4x8GB DDR4 @ 2666 MHz
Browser: Chrome 59.0.3071.104 (64-bit)

Details on attached screenshot, thanks.

This is what I've been looking for. How to bake global illumination into textures?
I'm building a game engine and modified editor based on three.js and after setting up a scene in editor I want to be able to bake AO and GI into textures. http://editor.bad.city (nick is enough to enter)

HI!These tests and the results for these tests are outlined below.

the problem hapened in the latest version !(I have all your historical versions. The image above shows me using your old version --3.js R110)
The gamma of the image seems to be wrong. These are the parameters settings used in my testing:
GT630M 2GB bounces=10 HDRI_Exposure=1.8.
In addition, I don't think hard coding the sun in the HDRI image is suitable.Maybe you can convert HDRI into CDF (cumulative distribution function). The brighter the area, the larger the area. In this way, when sampling, you still use 0-1 random number to sample the corresponding points in the corresponding area, and the importance sampling is realized.

This is the best performance / quality ratio I've ever seen for a path tracer! Keep up the good work!

Hy erichlof,

I have tested the .obj example up to woolly-mammoth-skeleton.obj (Triangles: 99,998), if I used the 100,000 Triangles example stanford-buddha.obj I get the error, that the call stack size is exceeded (BVH_Recursive_Acc_Structure.js - BVH_Build_Recursive).

I have used a test from 2ality.com - Call Stack Size
The snippet:

var computeMaxCallStackSize = (function() {
  return function() {
    var size = 0;
    function cs() {
      try {
        size++;
        return cs();
      } catch(e) {
        return size + 1;
      }
    }
    return cs();
  };
}());

And get following number of stack depth:

• Safari (12.0 13606.2.11): 36254
• Vivaldi (2.0.1309.37) 64bit: 27946
• Firefox (62.0.3): 26196 64bit: 25960
• Chrome (69.0.3497.100) 64bit: 13951
• Opera (56.0.3051.36) 64bit: 13951
• Edge (17.17134) 64bit: 11289

Your project is fantastic, quite a achievement! I saw another project which is similar to yours, they talk about denoising here in this issue:

hoverinc/ray-tracing-renderer#2

I thought you might have experience in denoising techniques and want to add to the discussion. It would be cool to also see denoising ending up in your project.

I'm not sure if this was done for a purpose of it's just not working but it's very distracting while navigating. It's in all demos.

There are some ways to make the monte-carlo result look nicer in a shorter amount of time, one I see is here. https://benedikt-bitterli.me/nfor/
I saw another on Shadertoy but I can't find it just now, will look later and try to find it, it was a different method.
It would be nice for an image which is not moving to have it smooth faster.

Also it occurred to me that a trained neural network would likely give a good solution for smoothing monte-carlo.

I tried the BVH_Debugging.html, and found the strange rendering result (teapot model) as follow:

Is there any bug in the intersection algorithm?

There seems to be a bug in the sampler because the noise of the caustics in the view in a reflection doesn't seem to clear up gradually after ~1500 samples.

Really impressed by the results of the renderer. Is it within your scope to in the future support bitmap textures as part of the materials? Things like specular, diffuse, bump?

the following gives a uniform sampling on the aperture:

randomAperturePos = (cos(randomAngle)*cameraRight + sin(randomAngle)*cameraUp)*sqrt(randomRadius)

currently in the code the sqaure root is missing!

Every demo has the same set of errors:

browser: Firefox Dev Edition 88

glxinfo:

OpenGL vendor string: Intel
OpenGL renderer string: Mesa Intel(R) UHD Graphics 620 (KBL GT2)
OpenGL core profile version string: 4.6 (Core Profile) Mesa 21.0.1
OpenGL core profile shading language version string: 4.60
OpenGL core profile context flags: (none)
OpenGL core profile profile mask: core profile
OpenGL core profile extensions:
OpenGL version string: 4.6 (Compatibility Profile) Mesa 21.0.1
OpenGL shading language version string: 4.60
OpenGL context flags: (none)
OpenGL profile mask: compatibility profile
OpenGL extensions:
OpenGL ES profile version string: OpenGL ES 3.2 Mesa 21.0.1
OpenGL ES profile shading language version string: OpenGL ES GLSL ES 3.20
OpenGL ES profile extensions:

Hello,I'm sorry to disturb you again. I'm really interested in your ray tracing project. Here's my problem: when I change your roughness or metal in HDRI environment.html , It doesn't seem to work .
您好，很抱歉再次打扰到您，我对你的光线追踪项目实在是太感兴趣了。当发现你的HDRI_Environment.html中粗糙度、金属似乎不起作用.

Happy Lantern Festival!
A model may consist of multiple parts,I suggest that you traverse all model IDs and add.

for (let i = 0; i <meshList.length;i++){ geoList.push(meshList[i].geometry); } modelMesh = new THREE.Mesh(); modelMesh.geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geoList);

元宵节快乐！
一个模型可能由多个部分组成，我建议您遍历所有模型id后再加入。

Hello, under what license is this amazing project released under ? I would like to really study it and learn more about path tracing from it. Thank-you.

HI! @erichlof As shown in the figure, three. Floattype can make the background clearer.

I wish I had the knowledge and time to do that, but if anyone can, that would be crazy awesome to have this top-notch feature in this repository

Demo address:
https://fishorbear.github.io/PathTracing-Renderer/dist/index.html

You can switch shader codes by clicking on the control button in the upper left corner, "Path" or "Mis".

https://github.com/FishOrBear/PathTracing-Renderer

I transplanted path tracking for integrated MIS.
And I tried to refactor your project with typescript+webpack.

I think you may not need to wait for threejs to support webgl2.

Hello,

First of all, I would like to thank you for all your efforts! Your project seems to be the only one alive project dedicated to Three.js photorealistc rendering.

As for my question, is it possible to render multiple OBJ models with your PTR? My friend and I are working on a Three.js based room planner as our university project. We have a bunch of textured furniture models with different material determined via corresponding MTL files. Is this feature supprted by PTR? As I can see from your demos, at the moment PTR works with simple shapes only.

Hi! Great project!!! Is there way to use canvas as texture?

geometry showcase, where the red cylinder and ground intersect

Hello brother, I have seen your case. I am also studying this ray tracing (path tracing) function recently. The problem I'm facing now is that the mobile device (apple 6sp) or ASUS laptop (the graphics card is AMD radeon hd45) will show a black screen after it is turned on, as shown in the figure below. Would you like to know if this ray tracing can be used for mobile terminals now? Or when it is used for mobile terminal, do you want the shadow of the object to be softer? Is there any other way to realize the ray in nature besides ray tracing!

First off, excuse my language, but this is badass.

I was wondering, what license is this code under? maybe I missed something, but I was just wondering. Does it even have a license?