three.js icon indicating copy to clipboard operation
three.js copied to clipboard

WebGLRenderTarget Texture breaks glTF export

Open marwie opened this issue 8 months ago • 2 comments

Description

WebGLRenderTarget textures assigned to objects in the scene cause the GLTFExporter to throw at image export resulting in the glTF export to not work at all

Not sure how to fix this properly - but I believe this shouldnt cause the export from failing altogether

Reproduction steps

  1. Create a WebGLRenderTarget
  2. Assign renderTarget.texture to some material used in the scene
  3. Try export with GLTFExporter
  4. Observe error
Error: THREE.GLTFExporter: Invalid image type. Use HTMLImageElement, HTMLCanvasElement, ImageBitmap or OffscreenCanvas.
    at GLTFWriter.processImage (GLTFExporter.js:1323:12)
    at GLTFWriter.processTexture (GLTFExporter.js:1430:17)
    at GLTFWriter.processMaterial (GLTFExporter.js:1516:17)
    at GLTFWriter.processMesh (GLTFExporter.js:1929:26)
    at GLTFWriter.processNode (GLTFExporter.js:2284:27)
    at GLTFWriter.processScene (GLTFExporter.js:2360:28)
    at GLTFWriter.processInput (GLTFExporter.js:2416:10)
    at GLTFWriter.write (GLTFExporter.js:552:8)
    at GLTFExporter.parse (GLTFExporter.js:202:10)
    at exportGLTF (misc_exporter_gltf.html:43:18)

Code

setTimeout(()=>{
	const renderTexture = new THREE.WebGLRenderTarget(256, 256);
	// not necessary but let's render the scene once
	renderer.setRenderTarget( renderTexture );
	renderer.render( scene1, camera );
	renderer.setRenderTarget( null );
	// add the render texture to an object in the scene
	const cube = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xffffff, map: renderTexture.texture } ) );				
	scene1.add( cube );
}, 10)

Live example

https://github.com/needle-tools/three.js/tree/webglrendertarget-breaks-gltfexport

Screenshots

No response

Version

r165

Device

Desktop, Mobile, Headset

Browser

Chrome, Safari

OS

MacOS

marwie avatar Jun 13 '24 19:06 marwie