JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex;border: 0px;margin:0px">
		<div id="div1" class="divBox">View1</div>
    <div id="div2" class="divBox">View2</div>    
	</div>
<script type="importmap">
	{
		"imports": {
		"three": "https://unpkg.com/[email protected]/build/three.webgpu.js",
	"three/tsl": "https://unpkg.com/[email protected]/build/three.webgpu.js",
	"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

.divBox{
  width: 40%; position: relative; 
  height: 200px;
  margin-left:5px
}

JavaScript

import * as THREE from 'three';
import { pass } from 'three/tsl';
import { bloom } from 'three/addons/tsl/display/BloomNode.js';

var allProject=[];
var updating=false;
const clock = new THREE.Clock();

//External Update
function update() {
    var delta = clock.getDelta();
    
    for (var i = 0; i < allProject.length; i++) {
        var project = allProject[i];
        if (delta && delta != null && project.postProcessRender) {
            project.postProcessRender.renderAsync(project.scene, project.camera);
            //default render
            //project.renderer.renderAsync(project.scene, project.camera);
        }
    }
    requestAnimationFrame(update);
}


//Project Class contains WebGPU data creation
class Project {
	constructor() {		
		this.scene = null;
		this.renderer = null;
		this.camera = null;
		this.control = null;		
		this.postProcessRender = null; //Hold posprocess render node
		this.mainDiv = null;		

		//put in external global variable and start update
		allProject.push(this);
		if (updating == false) {
			updating = true;
			update();
		}
	}

	createPostProcessRender(renderer) {
		var outputTexture = this.scenePass.getTextureNode('output');    
		var bloomPass = bloom(outputTexture, 0.2, 0.1, 0);    
		var renderOutput = new THREE.PostProcessing(renderer);
		renderOutput.outputNode = bloomPass;
		return renderOutput;
	}

	async init(element, mode) {
		const width = element.innerWidth || element.offsetWidth;
		const height = element.innerHeight || element.offsetHeight;
		this.mainDiv = element;
		this.camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
		this.scene = new THREE.Scene();
		this.scene.add(this.camera);

		this.renderer = new THREE.WebGPURenderer({ alpha: false, antialias: true });
		this.renderer.setSize(width, height);
		this.renderer.shadowMap.enabled = true;
		this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
		this.renderer.toneMappingExposure =...