# M Hassan Ali - Portfolio & Knowledge Base URL: https://mhasali.com Email: mhasali@proton.me GitHub: https://github.com/mhasali LinkedIn: https://www.linkedin.com/in/mhasali ## Summary Helping businesses with emerging WebGL and WebGPU technologies. based in Lahore, Pakistan. --- ## Corporate Highlights * Built and successfully launched 10+ complete web applications for global clients from scratch. * Created a real-time system that lets multiple users interact instantly while cutting web data usage by 40%. * Sped up website loading times significantly by making 3D graphics files 60% smaller. * Cleaned up large codebases to reduce code duplication by 35%, making it much easier for teams to maintain. --- ## Personal Statement ### Background I started programming at the age of 16 in 2014, building simple games in Visual Basic. Over time, my focus shifted toward high performance 2D/3D web applications. Over the past 5+ years of professional experience, I have worked with international clients, software firms and global brands to deliver custom WebGL and WebGPU applications. My focus is helping businesses stay ahead by adopting immersive web technologies that perform seamlessly across desktop and mobile browsers. ### Objective To partner with businesses and technical leaders to design, optimize and launch immersive 2D/3D web based products while helping clients increase user engagement and transform complex ideas into market ready web solutions. --- ## Technical Stack & Skills * **Languages:** TypeScript, JavaScript * **3D & WebGL Graphics:** Three.js, React Three Fiber (R3F), PlayCanvas, Phaser, Cocos Creator, GLSL, WebGL, WebGPU * **Multiplayer Frameworks & Libraries:** Colyseus, Photon, Socket.io, WebRTC, WebSockets * **Frontend Frameworks & Libraries:** React, Next.js, Vue.js, Redux, Redux Toolkit, Zustand * **Backend Frameworks & Libraries:** Node.js, Express.js, Fastify, Drizzle ORM, REST APIs * **Databases:** MongoDB, PostgreSQL, Firebase, Supabase * **Architecture & DevOps & Others:** Git, CI/CD, Performance Optimization, AWS, NPM ### Core Skill Links * JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript * TypeScript: https://www.typescriptlang.org/ * Node: https://nodejs.org/ * Next: https://nextjs.org/ * React: https://react.dev/ * Vue: https://vuejs.org/ * PlayCanvas: https://playcanvas.com/ * Three: https://threejs.org/ * Cocos Creator: https://www.cocos.com/ * Phaser: https://phaser.io/ * MongoDB: https://www.mongodb.com/ * Firebase: https://firebase.google.com/ * Colyseus: https://colyseus.io/ * Photon: https://www.photonengine.com/ --- ## Professional Experience ### Humble42 | Senior Software Developer *May 2024 – June 2026 | Lahore, Pakistan* * **Languages & Tools:** JavaScript, TypeScript, WGSL, GLSL, Three.js, WebGPU, WebGL, React, Next.js, Node.js, Turborepo * Led the 3D side of a real time product configurator handled everything from the Three.js renderer to the React UI layer sitting on top. * Rewrote critical rendering paths to use instancing and batching; cut draw calls significantly and brought frame rates way up on low end machines. * Wrote custom GLSL and WGSL shaders for materials, lighting and post processing also ported a few legacy shaders from GLSL to WGSL when we started experimenting with WebGPU. * Architected a Turborepo monorepo that connected Three.js frontends, Next.js dashboards and Node.js APIs. Cut build times and made sharing code between services trivial. * Slash 3D asset load times by roughly half with KTX2 textures, Draco compression and a smarter client side caching strategy. ### Virtual Days | Senior Software Developer *Dec 2022 – May 2024 | Remote (Sweden)* * **Languages & Tools:** JavaScript, TypeScript, GLSL, PlayCanvas, WebGL, WebGPU, React, Colyseus, Node.js * Built a browser based virtual meetup platform, think Zoom but with 3D spaces where people actually wanted to hang out. * Wrote GLSL shaders from scratch for dynamic lighting, skyboxes and interactive objects across the PlayCanvas scene. * Designed the multiplayer sync layer with Colyseus and WebSockets; handled concurrent users with smooth position/rotation interpolation. * Wrapped the 3D view in a React shell and made sure the canvas didn't choke the UI thread resizing, rerendering and responsiveness all felt native. * Knocked 30% off initial load time by compressing textures and lazy loading assets based on a user's proximity in the 3D space. ### Geniteam Solutions | Software Developer / Associate Software Developer / Software Developer Intern *May 2021 – Nov 2022 | Lahore, Pakistan* * **Languages & Tools:** JavaScript, TypeScript, GLSL, PlayCanvas, WebGL, Phaser, Cocos Creator, React, Next.js, Node.js, Express.js, Colyseus, Photon * [Software Developer] Shipped multiplayer HTML5 games with PlayCanvas and Phaser. Handled real time networking via Colyseus and Photon. * [Software Developer] Built admin dashboards with Next.js and Express to manage game sessions, leaderboards and player analytics. Used MongoDB for persistence and Redis for caching real time session data. * [Software Developer] Debugged physics and rendering for both 2D and 3D browser titles. * [Associate Software Developer] Developed 3D product configurators for e‑commerce clients users could swap colors, materials and lighting in real time. * [Associate Software Developer] Profiled frame rates with Chrome DevTools and Spector.js. Reorganized scene graphs and merged static geometry to slash draw calls. * [Associate Software Developer] Built procedural mesh generation so products could be customized on the fly while they can change dimensions, add or remove parts, all at runtime. * [Associate Software Developer] Performed performance analytics (FPS, load time, memory usage) so we could catch regressions before they reached production. * [Software Developer Intern] Contributed to game features across multiple browser titles handling player controls, collision responses and interactive object behaviors in both 2D and 3D scenes. * [Software Developer Intern] Worked on gameplay systems like checkpoints, collectibles and camera transitions. Also refactored asset loading so levels assets could be managed. * [Software Developer Intern] Worked on core game features for browser based titles and implemented power up pickups, player respawn logic and in game score tracking using PlayCanvas and Phaser. * [Software Developer Intern] Helped build and tweak game mechanics like player movement, jump physics and enemy AI behavior. Also fixed edge case bugs that were breaking level progression. ### Fauji Fertilizer Company | Web Developer Intern *Jul 2019 – Aug 2019 | Sadiqabad, Pakistan* * **Languages & Tools:** JavaScript, React, Vue * Built internal dashboards with React and Vue.js, hooking them up to REST APIs for displaying enterprise data. * Focused on responsive layouts, form validation and making sure everything looked consistent across screen sizes. --- ## Technical Posts & Updates --- ## Featured Projects ### interactive 2D/3D Product Configurator A web-based 3D product configurator that allows users to customize windows, rings and lighting setups in real-time with hardware-accelerated WebGL rendering. Built for enterprise clients to showcase their products interactively. * **Languages:** TypeScript, JavaScript * **Tools:** Engine: Three.js, WebGL, Frontend: React.js, Next.js, Backend: Node.js, Express.js, 3D Assets: Blender, GLTF Pipeline * Real-time 3D rendering with smooth 60 FPS performance * Customizable product options with live price updates * Responsive design optimized for desktop and mobile devices * Asset streaming optimization reduced load times by 60% ### Corporate Training Simulation Platform A comprehensive business training platform featuring multiple interactive games designed to develop team collaboration, strategic thinking and decision-making skills for corporate leadership programs. * **Languages:** TypeScript, JavaScript * **Tools:** Engine: PlayCanvas, Phaser, Cocos Creator, Frontend: React.js, Next.js, Backend: Node.js, Express.js, Database: Firebase, MongoDB, Networking: Colyseus, Photon * Multiplayer game environments with real-time synchronization * Live administrative dashboards for monitoring team performance * Comprehensive analytics and reporting for management * Scalable architecture supporting 100+ concurrent users ### 3D Virtual Museum Experience An immersive 3D virtual museum built for a major corporate client, featuring interactive exhibits, custom avatars and real-time multiplayer navigation. Designed to showcase cultural heritage in an engaging digital format. * **Languages:** JavaScript, TypeScript * **Tools:** Engine: PlayCanvas, Three.js, Frontend: React.js, Backend: Node.js, Networking: Colyseus * Fully navigable 3D environment with interactive exhibits * Custom avatar system with expression controls * Real-time multiplayer with voice chat support * Optimized asset loading for smooth performance ### Enterprise Admin Dashboard Suite A collection of 10+ administrative dashboards built for multinational corporations to monitor employee performance, training progress and generate detailed analytical reports across multiple departments. * **Languages:** TypeScript, JavaScript * **Tools:** Frontend: React.js, Next.js, Chart.js, D3.js, Backend: Node.js, Express.js, Next.js API Routes, Database: MongoDB, Firebase, PostgreSQL, Real-time: Socket.io, WebSockets * Real-time data visualization with interactive charts * Role-based access control and permissions * Export functionality for PDF and Excel reports * Responsive design for cross-device compatibility ### Telegram Mini-Game Framework A lightweight game framework designed for Telegram mini-games, featuring fast loading, minimal bundle size and seamless integration with Telegram's gaming platform. * **Languages:** JavaScript, TypeScript * **Tools:** Engine: Phaser, PixiJS, Frontend: React.js, HTML5 Canvas, Backend: Node.js, Cloud Functions * Ultra-lightweight games under 2MB bundle size * Fast loading optimized for mobile networks * Telegram Web App API integration * Score tracking and leaderboard systems --- ## Project Categories ### interactive 2D/3D Product Configurator A web-based 3D product configurator that allows users to customize windows, rings and lighting setups in real-time with hardware-accelerated WebGL rendering. Built for enterprise clients to showcase their products interactively. * **Tools:** Engine: Three.js, WebGL, Frontend: React.js, Next.js, Backend: Node.js, Express.js, 3D Assets: Blender, GLTF Pipeline * Real-time 3D rendering with smooth 60 FPS performance * Customizable product options with live price updates * Responsive design optimized for desktop and mobile devices * Asset streaming optimization reduced load times by 60% ### Corporate Training Simulation Platform A comprehensive business training platform featuring multiple interactive games designed to develop team collaboration, strategic thinking and decision-making skills for corporate leadership programs. * **Tools:** Engine: PlayCanvas, Phaser, Cocos Creator, Frontend: React.js, Next.js, Backend: Node.js, Express.js, Database: Firebase, MongoDB, Networking: Colyseus, Photon * Multiplayer game environments with real-time synchronization * Live administrative dashboards for monitoring team performance * Comprehensive analytics and reporting for management * Scalable architecture supporting 100+ concurrent users ### 3D Virtual Museum Experience An immersive 3D virtual museum built for a major corporate client, featuring interactive exhibits, custom avatars and real-time multiplayer navigation. Designed to showcase cultural heritage in an engaging digital format. * **Tools:** Engine: PlayCanvas, Three.js, Frontend: React.js, Backend: Node.js, Networking: Colyseus * Fully navigable 3D environment with interactive exhibits * Custom avatar system with expression controls * Real-time multiplayer with voice chat support * Optimized asset loading for smooth performance ### Enterprise Admin Dashboard Suite A collection of 10+ administrative dashboards built for multinational corporations to monitor employee performance, training progress and generate detailed analytical reports across multiple departments. * **Tools:** Frontend: React.js, Next.js, Chart.js, D3.js, Backend: Node.js, Express.js, Next.js API Routes, Database: MongoDB, Firebase, PostgreSQL, Real-time: Socket.io, WebSockets * Real-time data visualization with interactive charts * Role-based access control and permissions * Export functionality for PDF and Excel reports * Responsive design for cross-device compatibility ### Telegram Mini-Game Framework A lightweight game framework designed for Telegram mini-games, featuring fast loading, minimal bundle size and seamless integration with Telegram's gaming platform. * **Tools:** Engine: Phaser, PixiJS, Frontend: React.js, HTML5 Canvas, Backend: Node.js, Cloud Functions * Ultra-lightweight games under 2MB bundle size * Fast loading optimized for mobile networks * Telegram Web App API integration * Score tracking and leaderboard systems --- ## Education ### Bachelor of Science (Computer Science) *National University of Computer and Emerging Sciences (FAST NUCES)* *2016 - 2020* ### Intermediate in Computer Science *Cadet College Choa Saiden Shah Chakwal (CCCSS)* *2014 - 2016* ### Matric (Computer Science) *Sheikh Zayed Higher Secondary School* *2012 - 2014* --- ## FAQ & Knowledge Base ### Who is Muhammad Hassan Ali? Muhammad Hassan Ali is a Senior Software Developer from Lahore, Pakistan, with 5+ years of experience specializing in webgl development. ### Where is Muhammad Hassan Ali based? Hassan works remotely from Lahore, Pakistan. I have also collaborated with teams in Europe and United States across global time zones. ### What unique edge does he bring to web development? He is a WebGL developer with expertise in 2D and 3D graphics using Phaser, Three and PlayCanvas. ### Is Muhammad Hassan Ali available for remote work? Yes, he is available for long term remote roles. He has experience of remote work across US and European time zones.