Function WebGLInitializer

apps/baseai.dev/src/components/home/webgl.tsx:8–499

()

import '../../styles/webgl.css';

const WebGLInitializer = () => {
	const mountRef = useRef<HTMLDivElement | null>(null);

	useEffect(() => {
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(
			75,
			window.innerWidth / window.innerHeight,
			0.1,
			1000
		);
		const renderer = new THREE.WebGLRenderer({
			alpha: true,
			antialias: true
		});
		renderer.setSize(window.innerWidth, window.innerHeight);
		if (mountRef.current) {
			mountRef.current.appendChild(renderer.domElement);
		}

		const canvas = document.createElement('canvas');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		const textDiv = document.createElement('div');
		textDiv.style.position = 'absolute';
		textDiv.style.left = '0';
		textDiv.style.top = '0';
		textDiv.style.width = '100%';
		textDiv.style.height = '100%';
		textDiv.style.fontWeight = 'bold';
		textDiv.style.fontFamily = 'Grotesk';
		textDiv.style.color = 'rgba(255,255,255,1)';
		textDiv.style.display = 'flex';
		textDiv.style.justifyContent = 'center';
		textDiv.style.alignItems = 'center';
		textDiv.textContent = 'BASE AI';
		textDiv.style.zIndex = '-1';

		const PIXEL_RATIO = 2;
		const createHighResBackgroundTexture = async (
			width: number,
			height: number
		) => {
			const scale = PIXEL_RATIO;
			textDiv.style.width = `${width}px`;
			textDiv.style.height = `${height}px`;
			textDiv.style.fontSize = `${width * 0.192}px`;

			await document.fonts.ready;
			document.body.appendChild(textDiv);

			const lineHeight = window.getComputedStyle(textDiv).lineHeight; 
			const y = parseFloat(lineHeight);

			const canvas = await html2canvas(textDiv, {
				backgroundColor: '#000000',
				scale: scale,