A simple example of adding UBOs to a demo's js setup file

Geometry_Showcase.js

// scene/demo-specific variables go here
let torusObject;
let InvMatrices_UniformGroup, TopLevelBVH_UniformGroup;
let u_InvMatrices = [];
let u_AABBData = [];

// called automatically from within initTHREEjs() function (located in InitCommon.js file)
function initSceneData()
{
	demoFragmentShaderFileName = 'Geometry_Showcase_Fragment.glsl';

	// scene/demo-specific three.js objects setup goes here
	sceneIsDynamic = false;
	
	cameraFlightSpeed = 60;

	// pixelRatio is resolution - range: 0.5(half resolution) to 1.0(full resolution)
	pixelRatio = mouseControl ? 0.75 : 0.8;

	EPS_intersect = 0.01;

	// Torus Object
	torusObject = new THREE.Object3D();
	pathTracingScene.add(torusObject);

	torusObject.rotation.set((Math.PI * 0.5) - 0.05, -0.05, 0);
	torusObject.position.set(-60, 6, 50);
	torusObject.scale.set(11.5, 11.5, 11.5);

	// set camera's field of view
	worldCamera.fov = 60;
	focusDistance = 130.0;

	// position and orient camera
	cameraControlsObject.position.set(0, 20, 120);
	///cameraControlsYawObject.rotation.y = 0.0;
	// look slightly downward
	///cameraControlsPitchObject.rotation.x = -0.4;

	InvMatrices_UniformGroup = new THREE.UniformsGroup();
	InvMatrices_UniformGroup.setName('InvMatrices_UniformGroup');
	InvMatrices_UniformGroup.setUsage(THREE.DynamicDrawUsage);
	for (let i = 0; i < 64; i++)
	{
		u_InvMatrices[i] = new THREE.Matrix4();
		InvMatrices_UniformGroup.add(new THREE.Uniform(u_InvMatrices[i]));
	}
	
	TopLevelBVH_UniformGroup = new THREE.UniformsGroup();
	TopLevelBVH_UniformGroup.setName('TopLevelBVH_UniformGroup');
	TopLevelBVH_UniformGroup.setUsage(THREE.DynamicDrawUsage);
	for (let i = 0; i < 256; i++)
	{
		u_AABBData[i] = new THREE.Vector4();
		TopLevelBVH_UniformGroup.add(new THREE.Uniform(u_AABBData[i]));
	}
	

	// scene/demo-specific uniforms go here
	pathTracingUniforms.uTorusInvMatrix = { value: new THREE.Matrix4() };
	pathTracingUniformsGroups = [InvMatrices_UniformGroup, TopLevelBVH_UniformGroup];

} // end function initSceneData()



// called automatically from within the animate() function (located in InitCommon.js file)
function updateVariablesAndUniforms()
{
	// TORUS
	torusObject.updateMatrixWorld(true); // 'true' forces immediate matrix update
	pathTracingUniforms.uTorusInvMatrix.value.copy(torusObject.matrixWorld).invert();
	u_InvMatrices[63].set( Math.abs(Math.sin(elapsedTime)), 0, 1, 1,
			      255, 0, 255, 255,
			      255, 0, 255, 255,
			      255, 0, 255, 255);

	u_AABBData[255].set(1, 0, 1, 1);

	// INFO
	cameraInfoElement.innerHTML = "FOV: " + worldCamera.fov + " / Aperture: " + apertureSize.toFixed(2) + " / FocusDistance: " + focusDistance + "<br>" + "Samples: " + sampleCounter;

} // end function updateVariablesAndUniforms()



init(); // init app and start animating