ALEX 'SPECTER' VANCE
Crafting immersive digital realities with cutting-edge 3D and WebGL experiences.
View My WorkABOUT ME
I am a seasoned 3D developer with a passion for bringing complex visualizations to life. Specializing in high-performance WebGL and interactive UI/UX, I bridge the gap between abstract data and engaging user experiences.
My expertise spans real-time graphics, shader programming, and optimizing complex scenes for web platforms, ensuring a seamless and breathtaking experience across all devices.
MY TECH STACK
FEATURED PROJECTS
Project Nebula
A real-time 3D solar system simulator built with Three.js and GLSL shaders, featuring dynamic lighting and custom physics.
Voxel Architect
An interactive voxel editor enabling users to sculpt 3D environments directly in the browser, optimized for performance.
Data Vortex
A powerful data visualization platform rendering complex datasets as interactive 3D graphs and abstract structures.
Neural Canvas
An AI-powered art generator with a WebGL backend, producing high-resolution, procedurally generated 3D landscapes.
Cybernetic Cityscape
An architectural visualization tool for urban planning, featuring dynamic building generation and weather effects.
INTERACTIVE CODE SNIPPETS
GLSL Shader for Neon Glow
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
st.x *= u_resolution.x / u_resolution.y;
vec3 color = vec3(0.0);
vec2 p = st - vec2(0.5);
float dist = length(p);
// Glowing effect
float glow = 0.04 / dist;
color = mix(color, vec3(0.0, 1.0, 1.0), glow * 0.5); // Cyan glow
color = mix(color, vec3(0.5, 0.0, 1.0), glow * 0.3); // Violet tint
// Animated distortion
float angle = atan(p.y, p.x);
float pulse = sin(u_time * 2.0 + dist * 10.0) * 0.1 + 0.9;
color *= pulse;
gl_FragColor = vec4(color, 1.0);
}
Three.js Octahedron Setup
import * as THREE from 'three';
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);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.OctahedronGeometry(2, 0); // Size 2, 0 subdivisions
const material = new THREE.MeshPhysicalMaterial({
color: 0x00ffff,
transparent: true,
opacity: 0.2,
roughness: 0.1,
metalness: 0.9,
clearcoat: 1,
clearcoatRoughness: 0.1,
reflectivity: 0.8,
envMapIntensity: 1.5,
emissive: 0x8A2BE2, // Violet emissive
emissiveIntensity: 0.5
});
const octahedron = new THREE.Mesh(geometry, material);
scene.add(octahedron);
// Add subtle ambient light and a point light
scene.add(new THREE.AmbientLight(0x404040, 0.5));
const pointLight = new THREE.PointLight(0x00FFFF, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
octahedron.rotation.x += 0.005;
octahedron.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();