🚀 RedGPU V4.4.0-Alpha is out! A major WebGPU update bringing large-scale open-world rendering to the browser: GPU-driven Terrain (Landscape), Foliage & Grass, Interactive Water (Lake), Global Wind, and KTX2 Compressed Textures. ✨ What's New in V4.4.0-Alpha: 1️⃣ GPU-Driven Terrain (RedGPU.Landscape) • Async 16-bit heightmap tile streaming & global heightmap fallback • Continuous LOD geomorphing & GPU frustum/occlusion culling • 4-channel multi-layer PBR splatting, stochastic tiling & virtual texture atlas baking 👉 Terrain Demos: redcamel.github.io/RedGPU/ex… 2️⃣ Large-Scale Foliage & Grass (Foliage & Grass) • GPU procedural scattering driven by terrain layer weights & slope • 3-stage mesh LODs + runtime-baked Octahedral Impostors with dithered crossfade • Chunk-streamed procedural grass with terrain ground-color blending 👉 Open World Demo: redcamel.github.io/RedGPU/ex… 3️⃣ Interactive Water System (RedGPU.Water.Lake) • Depth-based optical absorption & soft shoreline fade • Screen-Space Reflections (SSR), dual-normal refraction & underwater solar caustics • Real-time GPU 2D wave ripple simulation reacting to moving characters & objects 👉 Lake Demos: redcamel.github.io/RedGPU/ex… 4️⃣ Global Wind System (scene.windManager) • Unified wind direction, speed & strength synchronizing tree foliage sway and lake waves in real time 5️⃣ KTX2 Compressed Textures in BitmapTexture • Load .ktx2 textures directly via RedGPU.Resource.BitmapTexture • Native KTX2/ZSTD parsing & automatic GPU format negotiation (BC7, BC6H, ASTC, ETC2) • On-demand Three.js Basis Universal WASM transcoder integration for a lightweight core bundle 👉 KTX2 Demo: redcamel.github.io/RedGPU/ex… 🔗 Explore RedGPU: • Live Examples: redcamel.github.io/RedGPU/ex… • Documentation: redcamel.github.io/RedGPU/ma… • GitHub: github.com/redcamel/RedGPU #RedGPU #WebGPU #JavaScript #TypeScript #3DGraphics #GameDev #OpenWorld #WebDev

📢 RedGPU V4.3.0-Alpha Released! 🚀 webgpu 및 페이지 생명주기에 따른 고질적인 메모리 누수 해결, 다중 캔버스 지원, 그리고 메모리 사용량 최적화에 초점을 맞추었습니다. 주요 기술적 개선 사항들을 자세히 소개합니다. 👇 --- 1. WebGPU 리소스 해제(destroy) 메커니즘 개선 및 신규 도입 🛑 페이지 및 GPU 디바이스 생명주기 관리 과정에서의 GPU 자원 잔존 문제를 근본적으로 해결하기 위해, 모든 핵심 클래스 및 래퍼에 destroy 메서드와 캐시 정리 로직을 구현했습니다. - 일괄 해제 고도화: 최상위 RedGPUContext에서 한 번의 호출로 하위의 모든 리소스를 일괄 해제합니다. - 모듈별 소멸 로직 리팩터링 및 물리 자원 해제 구현: • 컨텍스트 및 렌더러: RedGPUContext에 destroy 메서드 도입 및 GPU 디바이스 파괴 연동, Renderer 루프 종료 조건 명시 • 씬 및 오브젝트: Scene, Mesh, View3D, ABaseMaterial 소멸 로직 개선 및 Object3DContainer 재귀 소멸, InstancingMesh, ParticleEmitter, SkyBox, AutoExposure 등 물리 자원 해제 추가 • SkyAtmosphere: SkyAtmosphere, SkyLight 등 대기 물리 자원 정리 로직 구현 • 조명 및 클러스터: LightManager, ClusterLightManager, ShadowManager 등에 destroy 및 리소스 정리 적용 • 포스트 이펙트: PostEffectManager, AMultiPassPostEffect 등 소멸 로직 추가 • GLTF 및 텍스처: CubeTexture/BitmapTexture의 ImageBitmap 및 GPU 텍스처 해제, GLTFLoader/GLTFCacheManager 캐시 정리 로직 도입 및 Object URL 해제 2. 전역 캐시의 RedGPUContext 인스턴스별 격리 (다중 Canvas 지원) 🌀 기존에 전역 싱글톤으로 공유되던 캐시 및 파서 자원들을 ResourceManager를 통해 RedGPUContext 인스턴스 단위로 격리했습니다. - 다중 Canvas(multiCanvas) 독립 운용 가능: 단일 페이지 내에서 여러 개의 3D 캔버스를 상호 간섭 없이 독립적으로 제어할 수 있습니다. - DrawBufferManager 싱글톤 해체: RedGPUContext 인스턴스 내부로 귀속시켜 컨텍스트별 버퍼 수명 주기를 완전하게 보장합니다. - WGSL 파서 단일화: WGSL 셰이더 정보 파싱 및 구조체 초기화 로직을 ResourceManager로 일원화하고 기존 전역 MESH_SHADER_INFO를 제거했습니다. - 캐시 관리자 이관: GLTFCacheManager, PackedTextureManager, 샘플러 캐시를 ResourceManager 내부로 이관하여 인스턴스별 소멸 동작을 지원합니다. 3. 브라우저 페이지 라이프사이클 연동 및 안정성 강화 📈 웹 애플리케이션의 비정상 종료나 페이지 전환 환경에서도 GPU 자원이 잔존하지 않도록 수명 주기를 고도화했습니다. - 중복 파괴 방지: 중복 소멸 호출로 인한 런타임 에러를 방지하는 destroyed 플래그를 도입했습니다. - bfcache 대응 (pageshow): 뒤로/앞으로가기 복원 시, 이벤트 리스너와 렌더링 루프를 명시적으로 파괴/중단(destroy 및 abort)한 후 페이지가 새로고침(window.location.reload())되도록 안정화했습니다. - 이탈 및 언로드 (pagehide, beforeunload): 페이지 이탈 시 destroy()가 자동으로 트리거되어 GPU 디바이스/버퍼/캐시를 완전히 해제하고, 캔버스 DOM 제거(remove) 및 null 처리로 메모리 누수를 차단했습니다. - 이벤트 핸들러 해제: 터치, 키보드, 캔버스 전역/로컬 이벤트 핸들러를 일괄 해제하고 requestAnimationFrame 종료 순서를 조율했습니다. 4. 설정 및 기본 메모리 사용량 최적화 ⚡️ 지속적인 렌더링 성능 확보와 가시성 연산 부하를 축소하기 위한 최적화가 반영되었습니다. - DrawBufferManager 초기 버퍼 크기 최적화: 초기 버퍼 제한을 128MB에서 256KB로 대폭 축소하여 초기 메모리 점유율을 줄였습니다. - 클러스터 조명 GPU 버퍼 축소: 클러스터 조명 연산 버퍼 크기를 약 37.87 MB에서 약 12.62 MB로 축소하여 약 25.25 MB의 런타임 메모리를 절감했습니다. • X/Y축 타일 수: 32 -> 16 • Z축 타일 수: 48 -> 64 (공간 정밀도 확보 목적) - 미사용 필드 정리: 버퍼 상태 관리 클래스 내 불필요한 정적 필드 dirtyList 제거 및 레거시 API 정리 5. 버그 수정 및 예제 추가 🐛 - 프러스텀 컬링 오류 수정: 다중 뷰 환경에서 이전 뷰의 컬링 결과가 초기화되지 않고 다른 뷰에 유지되어 오브젝트가 화면에서 강제로 사라지는 렌더링 오류를 수정했습니다. (viewList가 2개 이상일 때 뷰 패스 시작 시 passFrustumCulling 강제 초기화) - multiCanvas 예제 추가: 단일 페이지 내 다중 Canvas 렌더링 및 컨텍스트 독립성을 검증하기 위한 데모를 추가했습니다. --- 🎮 멀티 캔버스 라이브 데모: redcamel.github.io/RedGPU/ex… 👉 자세한 내용은 아래 릴리즈 노트를 참고하시기 바랍니다. GitHub Release Note: github.com/redcamel/RedGPU/r… --- #WebGPU #RedGPU #javascript #typescript

🚀 RedGPU V4.2.0-Alpha 공식 릴리스! 1️⃣ SSBO (Shader Storage Buffer Object) 구조 통합 * 메시와 재질 데이터를 전역 스토리지 버퍼(SSBO)에 통일! * 인덱스 번호표 기반의 고속 조회를 통해 드로우콜 바인딩 비용을 획기적으로 차단했습니다. - globalVertexSSBO (2,000 슬롯): 메시 변환 및 버텍스 연산 속성 - globalFragmentSSBO_PBR (1,024 슬롯): PBR 재질 속성 및 GLTF 확장 옵션 제어 - globalFragmentSSBO_BuiltIn (1,024 슬롯): 기본 빌트인 머티리얼 속성 제어 2️⃣ CPU 컬링 (Culling) 최적화 시스템 * 조기 탈락 (Early-Out): 카메라 뒤편 물체는 복잡한 6-Plane 충돌 검사 전, 단순 1회 내적(Dot Product) 연산으로 우선 제외해 연산 부하를 크게 낮췄습니다. * 가변 인터리브드 컬링: 씬의 물체들을 4개 그룹으로 분할하여 매 프레임 1/4씩 순차 계산하며, 카메라 속도에 감응하여 주기를 실시간 조절합니다. * 원거리 아주 작은 물체 생략: 투영 높이가 화면 세로 대비 1% 미만인 물체는 그리기에서 제외해 드로우콜 비용을 절감합니다. 3️⃣ 모션 블렌딩 & 애니메이션 시스템 고도화 * 애니메이션 상태 머신 (AnimStateMachine) 도입: 상태 및 전이 조건에 따라 실시간 믹서 레이어의 가중치와 크로스페이드를 시스템이 자동 제어합니다. * CPU-Side TRS Blending: 로컬 스페이스에서 모션을 먼저 믹싱하여 연산 오버헤드를 줄였습니다. * 최단 경로 SLERP 보정: 회전 믹싱 시 쿼터니언 내적 계산으로 꼬임을 방지하며 최단 경로 보간을 계산합니다. 🔗 모션 블렌딩 데모: redcamel.github.io/RedGPU/ex… 🔗 캐릭터 제어 데모: redcamel.github.io/RedGPU/ex… 4️⃣ 그림자 (Shadow) 시스템 변경 * 동적 프러스텀 피팅 (Tight Fitting): 매 프레임 메인 카메라 뷰 프러스텀 8개 정점을 월드 공간으로 역투영해 그림자 상자 범위를 꽉 채움으로써 해상도 낭비를 방지하고 그림자 화질을 극대화했습니다. * 그림자 런타임 제어: 방향성 조명 그림자 관리자에 강도(strength) 및 PCF 필터 번짐 조절(filterScale) 속성을 추가하여 런타임 조절이 가능합니다. 🔗 그림자 데모: redcamel.github.io/RedGPU/ex… 🔗 GLTF 그림자 데모: redcamel.github.io/RedGPU/ex… --- 🔗 더 자세한 릴리즈 노트와 코드는 GitHub에서 확인해보세요! 👉 github.com/redcamel/RedGPU/r… #WebGPU #Web3D #JavaScript #RedGPU #GraphicsProgramming #GameDev #FrontEnd

🚀 RedGPU V4.1.0-Alpha 공식 릴리스! WebGPU 기반 3D 그래픽스 엔진 RedGPU가 한 단계 더 진화했습니다. 이번 V4.1.0 아키텍처 혁신의 핵심 요약을 공개합니다. 대기 산란부터 독립형 인스펙터까지, 차세대 웹 그래픽스를 위한 대대적인 변화를 확인하세요. - - - 🌌 1. 핵심 아키텍처 혁신 및 신규 기능 - SkyAtmosphere 도입: 물리 기반의 하늘 대기 산란 시뮬레이션 구현 (실시간 일출/일몰, 대기 효과 완벽 재현). - SkyAtmosphere 예제: redcamel.github.io/RedGPU/ex… - 물리 기반 카메라 & 조명 시스템: Lux, Lumen 단위계와 노출 공식 연계. 실제 지상 조도에 부합하는 일관된 씬 렌더링. - AutoExposure (실시간 자동 노출): 물리 카메라 도입에 따른 씬의 명암 변화를 실시간으로 조절하는 자동 노출 시스템 탑재. - CommandEncoderManager 도입: 프레임을 4단계(RESOURCE, PRE_PROCESS, MAIN, POST_PROCESS)로 구분. 인코더 공유 및 일괄 큐 제출을 통해 CPU 오버헤드 경감 및 WebGPU 파이프라인 안정성 극대화. - 포스트 이펙트 텍스처 풀링: 임시 텍스처 재사용 풀을 구축하여 VRAM 파편화 방지 및 GC로 인한 프레임 드롭 완벽 차단. - PrimitiveUtils 통합: 기하 연산 공통화로 코드 경량화 및 신규 프리미티브 3종(RoundedBox, Cone, Ring) 추가. - DefineGPUProperty 단일 통합: Vertex/Fragment로 이원화되었던 버퍼 정의기를 하나로 통합하여 데이터 연결 오버헤드 감소 및 개발 편의성 증대. - - - 🔍 2. 독립형 진단 웹앱 'RedGPU Inspector' - RedGPU Inspector: redcamel.github.io/RedGPU/ma… - 메인 프레임 부하 Zero: 메인 스레드 런타임 성능 저하를 일으키던 구형 디버그 렌더러(DebugRender)를 전면 폐기. - Vite + React + TS 기반 독립 대시보드: VRAM 상태, GPUBuffer 리드백 데이터 테이블화. - 실시간 모달 미리보기: G-Buffer 및 후처리 중간 텍스처 실시간 모니터링, 씬 노드 트리 뷰, 톤맵 실시간 변환 제어 기능 탑재. - - - 📦 3. 기반 구조 및 기타 개선사항 - 최상위 기본 객체 정립: BaseObject, RedGPUObject 신설로 코어 수준의 리소스 수명 관리 및 메모리 누수 방지. - DirectTexture 도입: 외부 GPUTexture 리소스를 웹캠 스트리밍이나 실시간 캔버스에 VRAM 복사 지연 없이 다이렉트 바인딩 (ADirectTexture, 2D, Cube 지원). - - - - Examples 페이지: redcamel.github.io/RedGPU/ex… #WebGPU #RedGPU #GraphicsEngine #3D #WebGL #TypeScript #JavaScript #Render #OpenSource

RedGPU V4.0.0 Alpha Released! We’ve integrated the Rapier WASM Physics Engine to bring native-level simulation to WebGPU. 📍 Highlights: • Native Physics: Rigid bodies, Joints, and Character Controllers • Hybrid Picking: Triangle-level precision raycasting • Visual Overhaul: Modernized IBL & BRDF LUT • Smart Sizing: Precise Pixel/World layout control Experience the power of a fully integrated physics engine in your WebGPU projects! 🔥 Check it out: 🔗 redcamel.github.io/RedGPU/ex… github.com/redcamel/RedGPU/r… #RedGPU #WebGPU

🚀 RedGPU V3.9.1-Alpha Released! We've supercharged our documentation for a much smoother DX. ✨ New Docs: 📖 New Manual: Freshly built with VitePress (KO/EN) 🤖 AI-Powered: API Docs automated & generated via Gemini 🛠️ Namespace Updates: Engine features like Bound, Antialiasing, & ToneMapping are now standalone modules for cleaner code. Explore the fresh new documentation: 🔗 Manual: redcamel.github.io/RedGPU/ma… 🔗 API: redcamel.github.io/RedGPU/ma… #RedGPU #WebGPU #Javascript #Gemini #VitePress

🎨 RedGPU V3.9.0-Alpha: Built-in Tone Mapping! High-quality tone mapping is now enabled by default in RedGPU. We've laid the foundation for achieving professional-quality visuals on the web, out of the box! 🚀 ✨ What's New: Standards Support: Support for industry standards like Khronos PBR Neutral and ACES Filmic. High Precision: The pipeline has been upgraded to rgba16float for improved color depth. Accurate Color Space: Optimized for a wider and more accurate color gamut, using the sRGB preferred format. Check out the live demo! 👇 🔗 redcamel.github.io/RedGPU/ex… Release Notes - github.com/redcamel/RedGPU/r… #WebGPU #RedGPU #ToneMapping

🚀 RedGPU V3.8.0-Alpha Released! 💎 SSAO SupportExperience enhanced spatial depth and realistic micro-shadows. 🎮 Live Demo - redcamel.github.io/RedGPU/ex… Release Note - github.com/redcamel/RedGPU/r… #RedGPU #WebGPU #SSAO

🚀 RedGPU V3.7.0-Alpha Released! Major Update 💎 Full rewrite of TAA (Temporal Anti-Aliasing) for superior rendering quality! Check out the full release notes here github.com/redcamel/RedGPU/r… 💻 GitHub : github.com/redcamel/RedGPU 🎮 Live : redcamel.github.io/RedGPU/ex… #WebGPU #RedGPU

🚀RedGPU V3.6.0-Alpha Released! Summary - Significantly improved PBR material quality Please see the release notes for details. ReleaseNote - github.com/redcamel/RedGPU/r… GitHub - github.com/redcamel/RedGPU Live - redcamel.github.io/RedGPU/ex… #WebGPU #RedGPU

🚀 RedGPU V3.5.0-Alpha camera controller system has been significantly revamped. New controllers and improved mobile touch zoom handling isometricController - redcamel.github.io/RedGPU/ex… followController -redcamel.github.io/RedGPU/ex… demos - redcamel.github.io/RedGPU/ex… #RedGPU #WebGPU

🚀 RedGPU V3.4.0-Alpha Released! Major Update: LOD now supports switching Materials, not just Geometry. Optimize your scenes with full control! 🛠️ 🔹 GPU-Based LOD Demo redcamel.github.io/RedGPU/ex… 🔹 CPU-Based LOD Demo redcamel.github.io/RedGPU/ex… #RedGPU #WebGPU

🚀 RedGPU V3.3.0-Alpha is here! GPU-Based LOD System Demo - redcamel.github.io/RedGPU/ex… CPU-Based LOD System Demo - redcamel.github.io/RedGPU/ex… Live - redcamel.github.io/RedGPU/ #WebGPU #RedGPU

🚀 RedGPU V3.2.0-Alpha is here! 📷 GPU-based culling for instanced meshes 📷 redcamel.github.io/RedGPU/ex… redcamel.github.io/RedGPU/ex… #WebGPU #RedGPU

🚀 RedGPU V3.1.0-Alpha is here! The default rendering changes from CPU-based draw calls to GPU-based draw. - Release Note github.com/redcamel/RedGPU/r… - Live (redcamel.github.io/RedGPU/) #RedGPU #WebGPU

🚀 RedGPU V3.0.0-Alpha is here! 🎯 GPURenderBundle-based rendering 📖 Auto-generated API docs ⚡ Better CPU performance Docs: redcamel.github.io/RedGPU/do… Release: github.com/redcamel/RedGPU/r… Live (redcamel.github.io/RedGPU/) #RedGPU #WebGPU

The RedGPU introduction page has been revamped. redcamel.github.io/RedGPU/ #RedGPU

🚀RedGPU V2.9.0-Alpha Released! Summary - Changed most of the calculations for skinning & morph target animation to GPU-based. Release Notes (github.com/redcamel/RedGPU/r…) GitHub (github.com/redcamel/RedGPU) Live (redcamel.github.io/RedGPU/ex…) #RedGPU #WebGPU

🚀RedGPU V2.8.0-Alpha Released! Summary - Temporal Anti-Aliasing (TAA) introduced and implemented by default - Experimental Screen Space Reflection Release Notes (github.com/redcamel/RedGPU/r…) GitHub (github.com/redcamel/RedGPU) Live (redcamel.github.io/RedGPU/ex…) #RedGPU #WebGPU

🚀RedGPU V2.7.0-Alpha Released! Summary - Debug Panel Improvements & Resource Tracking GitHub (github.com/redcamel/RedGPU) Documentation (redcamel.github.io/RedGPU/do…) Live Examples (redcamel.github.io/RedGPU/ex…) #RedGPU #WebGPU