Cannot use three-gpu-pathtracer importing js

Questions
1

Hello,
I’m trying to use the sample made here: three.js examples (threejs.org)

It doen’t work and the error (from the console) is: “Impossible to import json map”.

I didn’t installed three-gpu via npm but I want to import map or… please help me!

my code is:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 0.5; // influenza molto la resa
document.body.appendChild(renderer.domElement);

const params = {
    enable: true,
    toneMapping: true,
    pause: false,
    tiles: 3,
    transparentBackground: false,
    resolutionScale: 1,
    download: () => {

        const link = document.createElement( 'a' );
        link.download = 'pathtraced-render.png';
        link.href = renderer.domElement.toDataURL().replace( 'image/png', 'image/octet-stream' );
        link.click();

    },
    roughness: 0.15,
    metalness: 0.9,
};

const controls = new OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 1); // colore + intensità (ora a 5, dafault è 1)
light.position.set(0, 10, 5);
let mapSize = 1024;
light.shadow.mapSize.width = mapSize;
light.shadow.mapSize.height = mapSize;
scene.add(light);

new RGBELoader().load('https://modelviewer.dev/shared-assets/environments/neutral.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    texture.encoding = THREE.RGBEEncoding;
    scene.environment = texture;
});

let model;

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(
    './model/Digityze - T-Shirt/Digityze - T-Shirt.gltf',
    function (gltf) {
        model = gltf.scene;
        model.position.set(0, 0, 0);
        model.traverse(function (child) {
            if (child.isMesh) {
                child.castShadow = true;
                child.receiveShadow = true;
                child.material.shadowIntensity = 1;
                child.material.originalMap = child.material.map;
            }
        });

        const bbox = new THREE.Box3().setFromObject(model);
        const objectSize = new THREE.Vector3();
        bbox.getSize(objectSize);
        const center = bbox.getCenter(new THREE.Vector3());
        // Imposta la posizione della fotocamera in modo che l'oggetto sia centrato
        camera.position.set(center.x, center.y, center.z + 1);
        // Imposta la posizione dell'oggetto al centro della scena
        model.position.set(-center.x, -center.y, -center.z);

        scene.add(model);
    },
    undefined,
    function (error) {
        console.error(error);
    }
);


function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;

    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
});

and I want just to create a switcher in order to switch between webgl renderer mode and pathtracer…

2

You code doesn’t seem to mention path tracer?
In any way, use npm and vite. What you do is a thousand times more complicated and it simply won’t allow you to consume many if not most npm packages. Not to mention that you’re serving megabytes of data to the end user since you don’t bundle, minify and tree shake. With vite all of that is trivial.

3

I dont’t know how to proceed because for each step I have a problem.

For example this is my code:

and I would like to see it in my browser but when I run it…

the console: Uncaught TypeError: Failed to resolve module specifier “three/examples/jsm/postprocessing/Pass.js”. Relative references must start with either “/”, “./”, or “…/”.

but it was never called into my code…

5

I attached the code here

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
	<script type="importmap">
		{
		  "imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.164/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164/examples/jsm/",
			"three-gpu-pathtracer": "https://cdn.jsdelivr.net/npm/three-gpu-pathtracer@0.0.20/build/index.module.js",
			"three-mesh-bvh": "https://cdn.jsdelivr.net/npm/three-mesh-bvh@0.7.3/build/index.module.js"
		}
		}
	</script>
</head>

<body>

<script type="module">
	import { Scene, SphereGeometry, MeshStandardMaterial, Mesh, BoxGeometry, PerspectiveCamera, ACESFilmicToneMapping, WebGLRenderer } from 'three';
import { WebGLPathTracer, GradientEquirectTexture } from 'three-gpu-pathtracer';
import { getScaledSettings } from './utils/getScaledSettings.js';

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

ball1.position.x = - 1;
ball3.position.x = 1;
ground.position.y = - 0.54;
scene.add( ball1, ball2, ball3, 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 );

onResize();

animate();

window.addEventListener( 'resize', onResize );

function animate() {

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

	// update the camera and render one sample
	pathTracer.renderSample();

}

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 );

}
</script>

</body>
</html>
6

here is a slightly reworked version of your code that uses importmaps.

I didnt have ./utils/getScaledSettings.js so i guessed some values.

Beware that the path tracer code uses a lot of CPU when starting up.

7

This is awesome! But what was the issue? import map?

8

yes, the problem was described in your error message.

Essentially, your browser didn’t know how to resolve three/examples/jsm/. One of the dependencies you were loading was internally prefixing another import with three/examples/jsm/

I added the importmap for it, but then refactored it a little further, it’s a long story.

You can read all about import maps at Using Import Maps - Three.js Tutorials

9

Thanks again for your support. Best community!

1 Like