On my small webpage, I have incorporated animated gradient blobs scattered throughout the layout. Each blob is attached to different elements and has its unique color palette and animation style.
$(".blob").each(function(){
let scene = new THREE.Scene();
let lightTop = new THREE.DirectionalLight(0xFFFFFF, .7);
lightTop.position.set(0, 500, 200);
lightTop.castShadow = true;
scene.add(lightTop);
let lightBottom = new THREE.DirectionalLight(0x000000, .95);
lightBottom.position.set(0, -500, 400);
lightBottom.castShadow = true;
scene.add(lightBottom);
let ambientLight = new THREE.AmbientLight(0x798296);
scene.add(ambientLight);
camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
var material = new THREE.MeshPhongMaterial({
vertexColors: THREE.VertexColors,
shininess: 100
});
var geometry = new THREE.SphereGeometry(.8, 128, 128);
var speedSlider = $(this).data('speed'),
spikesSlider = $(this).data('spikes'),
processingSlider = $(this).data('processing'),
color1 = $(this).data('color-1');
color2 = $(this).data('color-2');
color3 = $(this).data('color-3');
var $canvas = $(this).children('canvas'),
canvas = $canvas[0],
renderer = new THREE.WebGLRenderer({
canvas: canvas,
context: canvas.getContext('webgl2'),
antialias: false,
alpha: false
}),
simplex = new SimplexNoise();
renderer.setSize($canvas.width(), $canvas.height());
renderer.setPixelRatio(window.devicePixelRatio * 1 || 1);
camera.position.z = 5;
var sphere = new THREE.Mesh(geometry, material);
var rev = true;
var color_parsed_1 = hexToRgb(color1);
var color_parsed_2 = hexToRgb(color2);
var color_parsed_3 = hexToRgb(color3);
var cols = [{
stop: 0,
color: new THREE.Color(color_parsed_1)
}, {
stop: .55,
color: new THREE.Color(color_parsed_2)
}, {
stop: 1,
color: new THREE.Color(color_parsed_3)
}];
setGradient(geometry, cols, 'y', rev);
scene.add(sphere);
var update = () => {
var time = performance.now() * 0.00001 * speedSlider * Math.pow(processingSlider, 3),
spikes = spikesSlider * processingSlider;
for(var i = 0; i < sphere.geometry.vertices.length; i++) {
var p = sphere.geometry.vertices[i];
p.normalize().multiplyScalar(1 + 0.3 * simplex.noise3D(p.x * spikes, p.y * spikes, p.z * spikes + time));
}
sphere.geometry.computeVertexNormals();
sphere.geometry.normalsNeedUpdate = true;
sphere.geometry.verticesNeedUpdate = true;
}
function animate() {
update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
});
Check out the jsfiddle demo: https://jsfiddle.net/cdigitalig/Lqdr7825/18/
I realize that rendering a separate canvas and scene for each individual '.blob' element may not be ideal for performance. The current setup results in redundant variables and lighting properties being defined repeatedly for each blob. However, consolidating these settings outside the loop causes issues with color display.
I'm facing challenges in containing all blobs within a single canvas or scene while accommodating their dynamic positions on the page. How can I optimize the performance of this setup and ensure that all animations/colors per blob are implemented effectively within a unified canvas/scene?