Exemple proposal

[nebulacollapse]

Is your feature request related to a problem? Please describe.

I'm a beginner in three.js and think that adding another example could benefit to me and to others

Describe the solution you'd like

I would like to see another basic exemple in the setup part with basic shapes like "primitives" but including motion.
what do you think of something looking like the first example of code in three.js (https://threejs.org/docs/#manual/en/introduction/Creating-a-scene)?
Even if the framerate or the sampling is low it would help to better understand how to deal with this library along a simple animation loop.

(maybe with the addition of a directional light for pretty shadows :) )

anyways thanks for your work and time!

[nebulacollapse]

I tried but get unexpected results

the path traced view allways rools back to the initial position

import { Scene, SphereGeometry, MeshStandardMaterial, Mesh,
    BoxGeometry, PerspectiveCamera,
    ACESFilmicToneMapping, WebGLRenderer } from 'three';
import { WebGLPathTracer, GradientEquirectTexture } from 'three-gpu-pathtracer';
import { getScaledSettings } from './settings.ts';
import {LoaderElement} from "./LoaderElement.ts";
import {CanvasCapture} from "canvas-capture";

// init scene, renderer, camera, controls, etc
const scene = new Scene();
const sphereGeom = new SphereGeometry( 0.49, 64, 32 );
const ball1 = new Mesh(
    new BoxGeometry(1,1,1),
    new MeshStandardMaterial( {
        color: '#e91e63',
        roughness: 0.25,
        metalness: 1,
    } )
);
const ball2 = new Mesh(
    sphereGeom,
    new MeshStandardMaterial( {
        color: '#ff9800',
        roughness: 0.1,
        metalness: 1,
    } )
);
const ground = new Mesh(
    new BoxGeometry( 3.5, 0.1, 1.5 ),
    new MeshStandardMaterial(),
);

ball1.position.x = - 1;
ground.position.y = - 0.54;
scene.add( ball1, ball2,  ground );

// set the environment map
const texture = new GradientEquirectTexture();
texture.bottomColor.set( 0xffffff );
texture.bottomColor.set( 0x666666 );
texture.update();
scene.environment = texture;
scene.background = texture;

const camera = new PerspectiveCamera();
camera.position.set( 0, 1, - 5 );
camera.lookAt( 0, 0, 0 );

const renderer = new WebGLRenderer( { antialias: true } );
renderer.toneMapping = ACESFilmicToneMapping;
document.body.appendChild( renderer.domElement );

const settings = getScaledSettings();
const pathTracer = new WebGLPathTracer( renderer );
pathTracer.renderScale = settings.renderScale;
pathTracer.tiles.setScalar( settings.tiles );

pathTracer.setScene( scene, camera);

// capture
CanvasCapture.init(renderer.domElement)
CanvasCapture.bindKeyToGIFRecord('g');


//loader

let loader = new LoaderElement();
loader.setPercentage(100);

loader.attach(document.body)
loader.setDescription("Test")


onResize();

animate();


window.addEventListener( 'resize', onResize );

function animate() {

    requestAnimationFrame( animate );
    // if the camera position changes call "ptRenderer.reset()"

    // update the camera and render one sample
    if (pathTracer.samples > 10) {
        ball1.rotation.x += 0.3;
        pathTracer.updateCamera();
        pathTracer.updateLights();
        pathTracer.updateMaterials();
        pathTracer.updateEnvironment();
        scene.updateMatrix();

    }
        pathTracer.renderSample();
    loader.setSamples(pathTracer.samples, false)

}

function onResize() {

    // update rendering resolution
    const w = window.innerWidth;
    const h = window.innerHeight;

    renderer.setSize( w, h );
    renderer.setPixelRatio( window.devicePixelRatio );

    const aspect = w / h;
    camera.aspect = aspect;
    camera.updateProjectionMatrix();

    pathTracer.setScene( scene, camera );

}

[gkjohnson]

Hello! The "setScene" or the "setSceneAsync" function must be called whenever the scene changes - it doesn't look like you're doing that here.