Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LightProbeGenerator: adapt for WebGPU compatibility #29335

Merged
merged 5 commits into from
Sep 9, 2024
Merged

LightProbeGenerator: adapt for WebGPU compatibility #29335

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8df8691
adapt for webGPU
Sep 5, 2024
b7d0fc8
improve backend detection
Sep 5, 2024
ead2964
rework
Sep 6, 2024
fb244d8
rework
Sep 7, 2024
83a9d96
exclude from tests
Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/files.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,7 @@
"webgpu_instance_uniform",
"webgpu_instancing_morph",
"webgpu_lightprobe",
"webgpu_lightprobe_cubecamera",
"webgpu_lights_custom",
"webgpu_lights_ies_spotlight",
"webgpu_lights_phong",
Expand Down
43 changes: 33 additions & 10 deletions examples/jsm/lights/LightProbeGenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
SRGBColorSpace,
NoColorSpace,
HalfFloatType,
DataUtils
DataUtils,
WebGPUCoordinateSystem
} from 'three';

class LightProbeGenerator {
Expand Down Expand Up @@ -126,7 +127,18 @@ class LightProbeGenerator {

}

static fromCubeRenderTarget( renderer, cubeRenderTarget ) {
static async fromCubeRenderTarget( renderer, cubeRenderTarget ) {

let useAsync = false;
let flip = - 1;

if ( renderer.isWebGPURenderer ) {

useAsync = true;

if ( renderer.coordinateSystem === WebGPUCoordinateSystem ) flip = 1;

Mugen87 marked this conversation as resolved.
Show resolved Hide resolved
}

// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
let totalWeight = 0;
Expand All @@ -143,12 +155,11 @@ class LightProbeGenerator {
const shCoefficients = sh.coefficients;

const dataType = cubeRenderTarget.texture.type;
const imageWidth = cubeRenderTarget.width; // assumed to be square

for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {

const imageWidth = cubeRenderTarget.width; // assumed to be square
let data;

let data;
if ( ! useAsync ) {

if ( dataType === HalfFloatType ) {

Expand All @@ -162,7 +173,19 @@ class LightProbeGenerator {

}

renderer.readRenderTargetPixels( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex );
}

for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {

if ( useAsync ) {
Mugen87 marked this conversation as resolved.
Show resolved Hide resolved

data = await renderer.readRenderTargetPixelsAsync( cubeRenderTarget, 0, 0, imageWidth, imageWidth, 0, faceIndex );

} else {

await renderer.readRenderTargetPixelsAsync( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex );

}

const pixelSize = 2 / imageWidth;

Expand Down Expand Up @@ -194,15 +217,15 @@ class LightProbeGenerator {

const pixelIndex = i / 4;

const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
const col = ( 1 - ( pixelIndex % imageWidth + 0.5 ) * pixelSize ) * flip;

const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;

switch ( faceIndex ) {

case 0: coord.set( 1, row, - col ); break;
case 0: coord.set( - 1 * flip, row, col * flip ); break;

case 1: coord.set( - 1, row, col ); break;
case 1: coord.set( 1 * flip, row, - col * flip ); break;

case 2: coord.set( col, 1, - row ); break;

Expand Down
Binary file added examples/screenshots/webgpu_lightprobe_cubecamera.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions examples/webgl_lightprobe_cubecamera.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,15 @@

const urls = genCubeUrls( 'textures/cube/pisa/', '.png' );

new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
new THREE.CubeTextureLoader().load( urls, async function ( cubeTexture ) {

scene.background = cubeTexture;

cubeCamera.update( renderer, scene );

lightProbe.copy( LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget ) );
const probe = await LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget );

lightProbe.copy( probe );

scene.add( new LightProbeHelper( lightProbe, 5 ) );

Expand Down
125 changes: 125 additions & 0 deletions examples/webgpu_lightprobe_cubecamera.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgpu - light probe from cubeCamera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - light probe from cubeCamera
</div>

<script type="importmap">
{
"imports": {
"three": "../build/three.webgpu.js",
"three/tsl": "../build/three.webgpu.js",
"three/addons/": "./jsm/"
}
}
</script>

<script type="module">

import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { LightProbeHelper } from 'three/addons/helpers/LightProbeHelperGPU.js';
import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js';

let renderer, scene, camera, cubeCamera;

let lightProbe;

init();

function init() {

// renderer
renderer = new THREE.WebGPURenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 30 );

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256 );

cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );

// controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.minDistance = 10;
controls.maxDistance = 50;
controls.enablePan = false;

// probe
lightProbe = new THREE.LightProbe();
scene.add( lightProbe );

// envmap
const genCubeUrls = function ( prefix, postfix ) {

return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];

};

const urls = genCubeUrls( 'textures/cube/pisa/', '.png' );

new THREE.CubeTextureLoader().load( urls, async function ( cubeTexture ) {

scene.background = cubeTexture;

await renderer.init();

cubeCamera.update( renderer, scene );

const probe = await LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget );

lightProbe.copy( probe );

scene.add( new LightProbeHelper( lightProbe, 5 ) );

render();

} );

// listener
window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

renderer.setSize( window.innerWidth, window.innerHeight );

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

render();

}

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
Loading