hoverinc / ray-tracing-renderer

[UNMAINTAINED] Real-time path tracing on the web with three.js

Ray Tracing Renderer

A Three.js renderer which utilizes path tracing to render a scene with true photorealism. The renderer supports global illumination, reflections, soft shadows, and realistic environment lighting.

Demo | User Guide | API Reference | Contributing

Usage

RayTracingRenderer is the early alpha stage of development. Features are incomplete and subject to change, and the renderer is unstable on certain hardware.

Download

• Latest ES6 Build
• Latest ES5 Build

Or if you use npm, run npm install ray-tracing-renderer

Ray Tracing Renderer relies on WebGL2, and any browser supporting WebGL2 also supports ES6. Thus, you should only use the ES5 build if the renderer inside your appliaction is optional, and your application must support older browsers.

Installation

As an HTML script

Ray Tracing Renderer requires Three.js, so make sure it is included in your html first. Then include,

<script src="RayTracingRenderer.js"></script>

You can then use the renderer in your app.

const renderer = new THREE.RayTracingRenderer();

As a module

If you installed via npm, simply import the renderer as follows.

import { RayTracingRenderer } from 'ray-tracing-renderer'

Or if you downloaded the renderer as a file,

import { RayTracingRenderer } from './RayTracingRenderer.js'

The renderer can then be used in your app.

const renderer = new RayTracingRenderer();

Introduction

Ray Tracing Renderer serves as a drop-in replacement to Three.js's WebGLRenderer. By simply swapping renderers, you can get instant photorealistic lighting.

(Click to run example)

Ray Tracing Renderer runs on WebGL2, and does so by implementing a path tracing algorithm inside a shader. It supports arbitrary Three.js scenes, with some restrictions.

Features

• Global illumination. Surfaces are illuminated with light reflected from every surface, not just manually placed light sources. This results in natural looking renders with realistic light bouncing and propagation.
• Soft Shadows. Shadows are computed automatically without the need to configure shadow properties on Three.js's light sources. The resulting shadows are soft and true-to-life without any visual artifacts.
• Reflections. Shiny and metallic surfaces reflect their surroundings, greatly attributing to realism.
• Environment lighting. A new light type has been added which dynamically illuminates a scene entirely from an HDR environment map! Manually placed light sources are a thing of the past.

Limitations

• Progressive rendering. Path tracing is a progressive method. This means that the more computation time that is spent on rendering, the better the resulting image looks. In order to render a high quality image, the camera must stay still for several seconds, as the render gradually improves. This is in stark contract to WebGLRenderer's method which is able to render a full quality image in one frame.
• Static geometry. A BVH acceleration structure is computed for the scene to speed up ray intersections. This computation can take several seconds when first initializing the renderer, and it must be recomputed whenever scene geometry moves or changes. Therefore only camera movement is supported in real-time.

For a more detailed guide on how to use the renderer, please read the User Guide .

Contributing

We want to increase test coverage and maintanability of the repo. If you would like to contribute, take a look at the following and submit Pull Requests:

• CodeClimate issues to improve maintainability, and
• Unit tests to improve our coverage

Take a look to this page with more details about submitting changes to the project.

Expectations

This repository started as a side-project and the time we invest on it is limited. It may take us a few days to get back to you but please bring your ideas forward. We'll do our best to respond promptly.

ray-tracing-renderer's Issues

Block shadows in GLTF model

Hello !
On rendering the below model in raytracing mode, I get weird black patches on the model. The same model when rendererd in realtime feels fine. What is the reason for this ?
I have attached pictures as well as link to download the coconut model :

GLTF file link : https://gofile.io/d/ezxD2y

Handle vertexColors: true in meshStandardMaterial

Hi,

When using meshStardardMaterial, the renderer does not load vertex colors when the material.vertexColors is true.
Is it a bug ? Or just a not-yet-implemented-feature ?

Material opacity

When we ray trace an object which is set to transparent but whose opacity level is set to 1, the raytracer overwrites the opacity value with its own value. In the below image the opacity of the table is set to 1. This opacity value changes as the material is ray traced.

Realtime WebGL2 render:

Raytraced version:

You can see that the floor below the table is visible. The other issue you might be seeing is the texture repetition issue raised here:
#59

Thanks!

Flickering raytracer with offsetting hdr

The renderer is flickering and the hdr background is displaced to a large amount when the renderer is built with threejs 112.

Here is the video:
screenrecord.zip

No error in console, just warnings. Hope this helps!.

New src directory layout

The current src directory tree is rather flat. We might want to give it more structure to, among other things:

• convey more clearly the role of files by grouping related ones together under a directory name that conveys that role; this helps with forming a sharper mental model of the code and with navigating the code base for the 1st time; and

• take a first step towards a future code refactor; a directory layout with more structure could help us see what a formal (Javascript) object model could look like. For example, sometimes a directory structure models a hierarchy of objects of different levels of abstraction and hints at the boundaries that must not be crossed to keep loose coupling.

The repos of mature graphics libraries and renderers like Three.js, pbrt, and Machete have a structured directory layout. HOVER's ray tracing renderer was open-sourced when it reached a certain level of maturity in terms of features and performance. A structured directory layout is not a feature, but it's yet another way to display that maturity.

What follows is a suggested directory layout for src. It is heavily influenced by the src directories of Three.js and pbrt, because we could say that one is the parent project and the other is the theoretical inspiration of the renderer (no?).

Besides the obvious file grouping based on role, the following ideas are encoded in it:

• File extensions that reveal the real contents of a file. For example, .glsl.js for shader programs assembled by Javascript, .png.js for image strings. This convention is used by Three.js.
• Consistent capitalization of file and directory names.

Three.js, pbrt, and Machete all have a src/core directory. From what I can see in them and from experience , core directories either contain a) a minimal set of files that implement a minimal version of the software (other directories may be seen as extensions, alternatives, and advanced use cases) or b) the set of core abstractions. I feel like neither applies to HOVER's renderer and so I don't include a src/core directory.

2 other things we might want to explore are: 1) avoiding the use of many utils files, which are typically miscellaneous bags of functions; we might want to take a closer look at their contents and see if the functions can be classified into separate files and directories; and 2) stick to nouns for file names, as opposed to actions like mergeMeshesToGeometry (this is highly idiosyncratic, though, and may not be a big deal).

Please let me know what you think.

New directory tree:

src
├── cameras (like three.js/src/cameras; maybe also like pbrt-v3/src/cameras) 
|   └── LensCamera.js
├── Constants.js (formerly src/constants.js)
├── lights (like three.js/src/lights; maybe also like pbrt-v3/src/lights)
|   ├── EnvironmentLight.js
|   └── SoftDirectionalLight.js
├── main.js (unchanged)
├── materials (like three.js/src/materials; maybe also like pbrt-v3/src/materials)
|   └── RayTracingMaterial.js
└── renderer (already like three.js/src/renderers)
    ├── accelerators (like pbrt-v3/src/accelerators)
    |   ├── BVHAccelerator.js (formerly src/renderer/bvhAccel.js)
    |   └── BVHUtil.js (formerly src/renderer/bvhUtil.js)
    ├── assets
    │   ├── noise.png (formerly src/renderer/texture/HDR_L_0.png)
    │   ├── noise.png.js (formerly src/renderer/texture/noise.js)
    │   └── README.md (formerly src/renderer/texture/readme.txt)
    ├── GL.js (formerly src/renderer/glUtil.js)
    ├── RenderingPipeline.js
    ├── samplers (like pbrt-v3/src/samplers)
    │   ├── StratifiedSampler.js
    │   └── StratifiedSamplerCombined.js
    ├── shaders (like three.js/src/renderers/shaders)
    │   ├── glsl
    │   │   ├── chunks (nicer than three.js/src/renderers/shaders/ShaderChunk)
    │   │   │   ├── bsdf.glsl.js (Three.js's suffix and extension convention: .glsl.js)
    │   │   │   ├── envmap.glsl.js
    │   │   │   ├── intersect.glsl.js
    │   │   │   ├── random.glsl.js
    │   │   │   ├── sample.glsl.js
    │   │   │   ├── sampleGlassMicrofacet.glsl.js
    │   │   │   ├── sampleGlassSpecular.glsl.js
    │   │   │   ├── sampleMaterial.glsl.js
    │   │   │   ├── sampleShadowCatcher.glsl.js
    │   │   │   └── textureLinear.glsl.js
    │   │   ├── fullscreenQuad.vert.js (optionally use three.js's suffix and ext convention: _vertex.glsl.js, _fragment.glsl.js)
    │   │   ├── rayTrace.frag.js
    │   │   ├── reproject.frag.js
    │   │   └── toneMap.frag.js
    │   ├── FullscreenQuadShader.js (formerly src/renderer/FullscreenQuad.js)
    │   ├── GLSL.js (formerly src/renderer/glslUtil.js)
    │   ├── RayTracingShader.js
    │   ├── ReprojectShader.js
    │   └── ToneMapShader.js
    ├── textures (i.e. GPU buffers)
    |   ├── FrameBuffer.js (formerly src/renderer/Framebuffer.js)
    |   ├── Texture.js
    |   ├── TextureAllocator.js
    |   └── RenderTargets.js
    ├── maps (i.e. texture mapping)
    |   ├── EnvironmentMap.js (formerly src/renderer/envMapCreation.js)
    |   ├── EnvironmentMapDistribution.js (formerly src/renderer/envmapDistribution.js)
    |   └── Maps.js (formerly src/renderer/uploadBuffers.js)
    └── Util.js (src/renderer/util.js)
    .
    .
    . (need to study these more closely to classify them properly)
    . mergeMeshesToGeometry.js
    . rgbeToFloat.js
    . texturesFromMaterials
    . TileRender.js

For your reference, this is the current src directory tree:

src
├── EnvironmentLight.js
├── LensCamera.js
├── RayTracingMaterial.js
├── RayTracingRenderer.js
├── SoftDirectionalLight.js
├── constants.js
├── main.js
└── renderer
    ├── Framebuffer.js
    ├── FullscreenQuad.js
    ├── RayTracingShader.js
    ├── RenderTargets.js
    ├── RenderingPipeline.js
    ├── ReprojectShader.js
    ├── StratifiedSampler.js
    ├── StratifiedSamplerCombined.js
    ├── Texture.js
    ├── TextureAllocator.js
    ├── TileRender.js
    ├── ToneMapShader.js
    ├── bvhAccel.js
    ├── bvhUtil.js
    ├── envMapCreation.js
    ├── envmapDistribution.js
    ├── glUtil.js
    ├── glsl
    │   ├── chunks
    │   │   ├── bsdf.glsl
    │   │   ├── envmap.glsl
    │   │   ├── intersect.glsl
    │   │   ├── random.glsl
    │   │   ├── sample.glsl
    │   │   ├── sampleGlassMicrofacet.glsl
    │   │   ├── sampleGlassSpecular.glsl
    │   │   ├── sampleMaterial.glsl
    │   │   ├── sampleShadowCatcher.glsl
    │   │   └── textureLinear.glsl
    │   ├── fullscreenQuad.vert
    │   ├── rayTrace.frag
    │   ├── reproject.frag
    │   └── toneMap.frag
    ├── glslUtil.js
    ├── mergeMeshesToGeometry.js
    ├── rgbeToFloat.js
    ├── texture
    │   ├── HDR_L_0.png
    │   ├── noise.js
    │   └── readme.txt
    ├── texturesFromMaterials.js
    ├── uploadBuffers.js
    └── util.js

Some Glb file will not load

Hello,

Some simple Glb files will no load, there are opened correctly by GlfViewer and Windows 3D Viewer.
Here is the error in the console :

RayTracingRenderer.js:446 Uncaught ERROR: 0:7: 'NUM_MATERIALS' : undeclared identifier
ERROR: 0:7: '' : array size must be a constant integer expression
ERROR: 0:8: 'NUM_MATERIALS' : undeclared identifier
ERROR: 0:8: '' : array size must be a constant integer expression

Here is an example of a simple wall in Glb format.
labarette.free.fr/xfer/wall.glb

the build of the build folder is not identical to an npm run build

I have normal's problem, on flat glass surfaces, when I build by doing an npm run build.
I compared the files and there is indeed code that changes. Not a lot, but there are.
Some screenshots:

With the js file, from the build directory

when i do a npm run

Improve the drop-in-replacement engine aspect

Context

This engine is intended to be used as a drop-in replacement to Three.js’s WebGLRenderer.

Problem

It tends not to work as a drop-in replacement out-of-the-box, because the renderer crashes when:

• Meshes contain a THREE.Geometry instead of a THREE.BufferGeometry.
• It uses materials for which the texture images are not loaded yet.

This might cause people who try to replace the WebGLRenderer with RayTracingRenderer to drop out early, because 'it does not work as promised' out-of-the box.
This would be a shame, because if you get it up and running, it works great.

Solution

In my engine I have provided a few simple workarounds for these issues by pre-processing the THREE.Object3D before I attach it to the scene; this is an excerpt from the code:

    public placeholderMaterial = new THREE.MeshStandardMaterial({color: 0xccffcc, emissive: 0xccffcc, emissiveIntensity: 0.5});

    materialHasUnloadedMaps(m:THREE.MeshStandardMaterial) {
        return (m.map && !m.map.image) ||
            (m.normalMap && !m.normalMap.image) ||
            (m.roughnessMap && !m.roughnessMap.image) ||
            (m.metalnessMap && ! m.metalnessMap.image);
    }

    adaptModelForRenderer(model: THREE.Object3D) {
        model.traverse(o => {
            const mesh = o as THREE.Mesh;
            const mm = mesh.material as THREE.MeshStandardMaterial;
            const mg = mesh.geometry as THREE.BufferGeometry;
            const mgg = mesh.geometry as THREE.Geometry;

            // Convert  THREE.Geometry to THREE.BufferGeometry
            if (mgg && mgg.vertices) {
                mesh.geometry = new THREE.BufferGeometry().fromGeometry(mgg)
            }

            // Convert non-MeshStandardMaterial and Materials that are still loading
            // images with the placeholderMaterial
            if (mm) {
                if (mm.type !== "MeshStandardMaterial" || this.materialHasUnloadedMaps(mm)) {
                    mesh.material = this.placeholderMaterial;
                }
            }

            // rtRenderer does not support Texture.repeat and -.offset, so update uvs instead

            // ... and lots of other adjustments, removed for brevity
        });
    }

Proposal

As I can imagine that I am not the only one experiencing these issues, and intercepting these cases is probably not rocket science, I wonder if you would be open to intercept any THREE.Geometry instances and convert these to THREE.BufferGeometry.
As for the invalid materials, I would suggest to replace invalid instances with a placeholderMaterial, which could be specified in the params upon startup.

Why there is no output in display?

I have followed all your steps by using NPM. But there is no output, blank screen. But when I try normal renderer, there is output.

`const renderer = new RayTracingRenderer();
// const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 10;
scene.add( camera );

    const amLight = new THREE.AmbientLight("#ffffff");
    scene.add( amLight );

    const material = new THREE.MeshStandardMaterial();
    material.map = new THREE.TextureLoader().load('https://m.media-amazon.com/images/I/8162wgFO8rL._AC_SS350_.jpg');
    material.shadowCatcher = true;

    const geometry = new THREE.BoxBufferGeometry();
    const mesh = new THREE.Mesh(geometry, material);
    scene.add( mesh );

    // renderer.toneMapping = THREE.Uncharted2ToneMapping; // a low contrast operator
    // renderer.toneMappingExposure = 2; // the higher the number, the brighter the scene
    // renderer.toneMappingWhitePoint = 8;

    this.renderer = renderer;
    this.camera = camera;
    this.scene = scene;

    document.body.appendChild( renderer.domElement );

    THREE.DefaultLoadingManager.onLoad = this.tick.bind(this);`

Adjusting Polygon offset factor

Is there a way to adjust the polygon offset factor of the material in this ray-tracer as geometries that are really close to each other are z-fighting. The three.js real-time version works fine , the ray tracer doesn't seem to pick up the value put in the material properties.

Edit: I have tried to reduce the range of the camera near and far plane but with no success in the ray-tracer.
I also changed the precision of the depth buffer to 16 bits by setting depth to true [ in cavas context] in your RayTracingRenderer.js file but with no success.

Thanks !

RayTracingRenderer.js:1650 Uncaught RangeError: Maximum call stack size exceeded

Hi,

I load a wavefront file that have 58 mesh within it. I replace the exiting mesh material with MeshStandardMaterial, but the application throw this Uncaught RangeError: Maximum call stack size exceeded exception. If I run a simple Cube example, the RayTracingRenderer can render without any problem. Any possible reason?

Issue with Material Transparency

Hi,

I have been having trouble with getting glass material to appear transparent. I am attaching the files before and after rendering. The material that I've used is below and the material does become transparent when raytracing. However, the items behind this glass material aren't visible. Any solution to this?

new THREE.MeshStandardMaterial({transparent: true});

Reflection problem

Hello! I updated the ray tracing version from 0.9.0 to 0.9.1 and got some reflection problems on my model. It seems that reflections are not projected onto the model properly and have an offset on the model.

Please, see below

v0.9.1

v0.9.0

v0.9.1

v0.9.0

Top projection. Its just the plane 1000x1000, but reflects like rectangle

p.s.
do not pay attention to different exposures, I change it manually

Bright Pixels show on screen when transparent material is used

See picture

Alpha texture

How to make a transparency mask, I have tried everything I can't do it.

Not working with the latest version of three.js. Any advice on how to fix this?

I just added BoxBufferGeometry to the scene and rendered.

Mesh material array

For a cube I am currently using an array of MeshStandardMaterial and feeding it to the box mesh like this:

       const matBFront = new THREE.MeshStandardMaterial({
       ....
       });
       const matBLeft = new THREE.MeshStandardMaterial({
       ....
       });
        ...
        ...
        ....
   const matBox = [
           matBLeft,
           matBRight,
           matBBottom,
           matBTop,
           matBFront,
           matBBack
       ];

       const boxObject =  new THREE.Mesh(geomBComplete, matBox);

This works in threejs but not when the raytracing renderer is turned on. The object just disappears. What is the best way to approach this problem ?
Thanks!

Dull texture with same lighting

It feels like texture contrast takes heavy hit when we change from threejs's WebGL2 to raytracing-renderer. What could be the issue ? The following textures have same lighting conditions but the dull one is from the raytracing-renderer. I even waited for the renderer to go on for 10 minutes so that the texture might clear out but the results are almost same.

I checked the texture encoding when shifting from threejs's renderer to raytracing renderer, they are same. Is that taken into account in raytracing renderer as srgb-encoding should be default for pictures on web
.

Thanks!

How to detect hardware/software compatibility?

I'm trying to find a method to test the hardware compatibility, and stop the process if not compatible, but impossible to find a solution ...
I tested the canvas with the method

gl = renderer.domElement.getContext ("webgl2");
alert (gl.getParameter (gl.VERSION));

And it returns me well "WebGL2 OpenGL ES 3.0", while I have a black background on my smartphone ... Stats shows me the FPS, but black background.

I also tested: https://get.webgl.org/webgl2/ and I have the cube spinning.

How do you do? Because on an old PC, this completely blocks the machine, forced to do a reset

Canvas transparency

Hello again! Im trying to save canvas as image like this

var data = renderer.domElement.toDataURL("image/png");
var img = new Image();
img.src = data;
$("body").append(img);

this way works only with three WebGLRenderer. In ray traycing renderer i get black background. Whats im doing wrong?

I can't run the demos

The demos linked in the readme crash my system...
Or at least it freezed completely during several minutes, until I decided to reboot.
Testing on Chrome Version 87.0.4280.88 on laptop.

Dead white pixels even after convergence

Hi,
Even after convergence, some noisy white pixels remains in the scene:

Is there any workaround ?

Add support for texture .repeat and .offset

If you set the texture to repeat over a surface, the texture does not repeat while doing ray tracing and resorts to 1 large texture over the entire surface.
Here is the webgl2 renderer version :

And here is the raytraced version :

This happens even when you upload a GLTF file with a repeat pattern . Here is the file for you to test:
https://drive.google.com/file/d/1idu7p_C36dxsTNpcNE4vFQXfsP7IpAbi/view?usp=sharing

Thanks !

Unable to run demo: Failed to execute 'getActiveUniforms' on 'WebGL2RenderingContext'

I am unable to run the demo here:

Failed to execute 'getActiveUniforms' on 'WebGL2RenderingContext': The provided value cannot be converted to a sequence.

But this one works.

about shadowCatcher

Old Version：mesh.rotateX(Math.PI / 2);

Maybe it's going to have to flip over:
mesh.rotateX(-Math.PI / 2);

Improvements to BVH

The heart of any high-performance ray tracer lies in the acceleration structure for ray intersections. The construction and traversal of this acceleration structure has the biggest impact on performance and is the most important thing to optimize.

Currently, we using a SAH-based BVH as described in pbrt. We are traversing this BVH on the GPU naively based off ideas in pbrt. Both the construction and traversal of this BVH don't consider GPU architecture (memory bandwidth, ray coherence, etc), and GPU-specific designs contribute to around a 100% or 200% speedup in rendering time.

This tickets serves as a reference to recent papers, and will be updated on a regular basis. There are advantages and disadvantages to every design, and it remains an open question about which design is best suited for use in WebGL (versus CUDA or other GPU APIs).

• 2017 - Gayot et al. - GPU Ray Tracing using Irregular Grids
• 2017 - Ylitie et al. - Efficient Incoherent Ray Traversal on GPUs Through Compressed Wide BVHs
• 2018 - Gu et al. - Fast and Dynamic Construction of Bounding Volume Hierarchies based on Loose Octrees
• 2019 - Lin et al. - Dual-Split Trees

Does anyone have experience or input with recent developments towards gpu-tailored acceleration structures that might work well with the renderer?

ES6 module not working

Error: export 'EnvironmentLight' (imported as 'THREE') was not found in 'three'

It's not working with npm install using ES6 modules. As far as I see, your main.js is not being imported anywhere which doesn't expose the rest of the modules.

Adding liquid IOR

Would it be possible to add management of the IOR, or at least add liquids (IOR 1.33)?
I saw in the code that there are IOR 1.5 parameters for THICK_GLASS, but I would like to use 1.33 and 1.5 in the same scene.
When I put two objects in each other, with the glass property, it works, but it's pretty violent.

Thank you

Envrionment map is displayed rotated when Object3D .DefaultUp is Z Axis.

Thank you for this great library.
I am using Z Axis as default up axis.

Object3D.DefaultUp = new Vector3(0, 0, 1);

And environment map rendering looks like this.(up direction is still y axis)

Could you provide any option or quick fix for this if there is? Thank you again.

Real-time denoising

Currently, our renderer draws a scene progressively. The more frames rendered from a given camera angle, the higher quality the resulting render becomes. While progressive rendering is typical for path tracing, it is far from ideal with our goal to bring path tracing into real-time.

Lots of research has gone into methods for denoising a path traced image, with the objective of producing a high quality result in only one frame. I am aware of two papers describing similar methods that would be most applicable to our renderer. The design involves hybrid rendering - the scene is rasterized to several G-buffers, and a 1spp path traced image is spatially and temporally filtered with help from the G-buffers.

• Schied et al. - Spatiotemporal Variance-Guided Filtering
  Shied's algorithm splits the direct illumination and the indirect illumination into two buffers which are then filtered separately. The spatial filter is a edge-avoiding wavelet filter.
• Mara et al. - An Efficient Denoising Algorithm for Global Illumination
  Mara's algorithm keeps direct and indirect illumination together, but instead splits diffuse and specular reflections into their own buffers. These buffers are then filtered separately, and the spacial filter is a bilateral filter.

I'm not sure which approach is better suited for our needs, and I will try implementing both to compare the two. Does anyone have any experience with these two methods? Are there other methods?

Fireflies

First of all: thank you for your amazing work, this renderer is amazing!

I've noticed that it's easy to get fireflies while rendering:

Is there a way to mitigate the problem or to limit the maximum amount of radiance received at a pixel?

GBuffer/zbuffer/material in bitmap/array format

I guess it must exist, but I can't get my hands on it.
Is there a gbuffer, zbuffer, material buffer in bitmap / array somewhere?
I may have searched poorly?
Thanks.

Hello, I'd like to ask about the render support three.js Is the bump in the map

If I can continue to add bump texture, how can I implement it?

Camera Zoom => blur bug

When you zoom it all becomes blurry (including the env)
repro on https://hover-demos.s3.amazonaws.com/ray-tracing-renderer/readme-example/index.html, zoom a lot and turn camera to look at the env

(that's after long render time )

Camera ends behind the helmet in the box looking at "outside"

( chrome 78, windows nvidia gpu)

possibly

• camera focus DOF problem
• sample for SSAA/TAA too big

Add support for THREE.HemisphereLight

The renderer currently supports lighting in the form of our new HDRI EnvironmentLight, as well as Three's DirectionalLight. We'd like to continue extending this cross-compatibility with Three.js.

The most useful and straightforward to add would be Three's AmbientLight and HemisphereLight in the same way that we've implemented the DirectionalLight.

Inside envMapCreation.js we bake the various lights into an equirectangular texture that encompasses the entire scene. New code would specifically fit inside generateEnvMapFromSceneComponents

• [FINISHED] Adding an AmbientLight would simply involve iterating over the entire texture and adding a constant color and intensity according to the AmbientLight.
• HemisphereLight would be much the same, but you'd gradient the color across the y-axis as you iterate through the texture.

If you would like to take on this feature, let me know! I can help with any questions you may have.

ES6 in the browser?

Hi,

I'm very excited to try this out. But I encounter problems using the latest THREE.js (v135, from a CDN) using modules in the browser.

To replicate:

1. Download the ES6 module.
2. Make index.html:

  <html><body>
     <script type="module">
      import * as THREE                     from 'https://cdn.skypack.dev/three';
     import * as RayTracingRenderer  from './RayTracingRenderer.js'
   </script>
</body></html>

The error I get in Chrome Inspector is:
RayTracingRenderer.js:18 Uncaught TypeError: Cannot read properties of undefined (reading 'PerspectiveCamera')
at RayTracingRenderer.js:18

Placing a breakpoint at line 7 in RayTracingRenderer.js we see that THREE$1 is undefined. The problem seems to be that the initialization code (lines 1-5) which look for THREE in a TypeScript ("exports") and NodeJS ("global" or "require") environment, cannot find it.

Maybe to solve this it's necessary to add an init() function, so the user can manually provide a THREE instance. That's less elegant than the current Import, but maybe easier than delving into the ES6 browser module loader.

Or is there a better solution?

ps. Fingers crossed that the flat lens support comes back! That look is lovely.

Background rotation

Hello! Is it possible to replace the HDR scene with a black background, but keep hdr`s reflectivity on the object?

Unable to Render

Hi,

I was giving this renderer a try on a project https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/

However, I only get these erros on the console and no output at all:

WebGL: INVALID_VALUE: texStorage2D: invalid dimensions
[.WebGL-000001A0EAA13280] GL_INVALID_OPERATION: Level of detail outside of range.

Any pointers to how these can be fixed to get the render?

Fantastic project

Hi! Great project!!! I do like it! I hope you succeed.

Color depending on the depth of the glass.

My goal is to make the areas of glass that are thicker darker. I don't feel like it is handled in the code, and I can't seem to find where and how to do it.
I do not find in SI Path or Ray the information of distance traveled by the ray
Thanks

muti material not supported

Broken demo

Shader error:

Uncaught ERROR: 0:87:
'isampler2D' : No precision specified
WARNING: 0:1183: '1.0e999' : Float overflow

Amazing test!

I tested it on gt630 and found that it can reach 60fps!

Using threejs renderer and raytracing renderer in the same canvas

Hello! Can I use Threejs Renderer and Raytracing Render on the same canvas without deleting it? I got an error when I tried. I use your example for this.
Thank you !

P.s i tried your renderer with React library. so far everything is working

Use ray tracing renderer with react

Hello! Is it possible to use your renderer in react app?

Hi, everyone. I'd like to ask when the ray tracing renderers can add light sources and spotlights

I'm using ray tracing renderers, but I don't support point light and spot light. I try to add point light according to parallel light. Unfortunately, I can't understand the case of parallel light. Can you give me some advice

Image burn

If I just add the texture attached below to a box in the default test scene provided in the master branch, the image starts burning after a few seconds and the burn spreads through all the materials. This happens every time. I am running nvidia RTX with a stable driver version 335 on Ubuntu 18.

Here is the video displaying the issue :
https://www.youtube.com/watch?v=209AtbejLHA&feature=youtu.be

Here is my main.js file :
main.zip

Here is the image to be put in the test folder :

Thanks for all your support guys!