redcamel

i love WebGL & webGPU

RedGPU -

[redcamel @redcamel15]

📢 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 렌더링 및 컨텍스트 독립성을 검증하기 위한 데모를 추가했습니다.

---

🎮 멀티 캔버스 라이브 데모:
https://t.co/mC5v9iHj6I

👉 자세한 내용은 아래 릴리즈 노트를 참고하시기 바랍니다.
GitHub Release Note:
https://t.co/ZxMYYrdhIt

---
#WebGPU #RedGPU #javascript #typescript

[redcamel @redcamel15]

🚀 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 보정: 회전 믹싱 시 쿼터니언 내적 계산으로 꼬임을 방지하며 최단 경로 보간을 계산합니다.

🔗 모션 블렌딩 데모: https://t.co/whJVqfbZAR

🔗 캐릭터 제어 데모: https://t.co/74z7gM77kf

4️⃣ 그림자 (Shadow) 시스템 변경

* 동적 프러스텀 피팅 (Tight Fitting): 매 프레임 메인 카메라 뷰 프러스텀 8개 정점을 월드 공간으로 역투영해 그림자 상자 범위를 꽉 채움으로써 해상도 낭비를 방지하고 그림자 화질을 극대화했습니다.
* 그림자 런타임 제어: 방향성 조명 그림자 관리자에 강도(strength) 및 PCF 필터 번짐 조절(filterScale) 속성을 추가하여 런타임 조절이 가능합니다.

🔗 그림자 데모: https://t.co/2roUmBp6i7

🔗 GLTF 그림자 데모: https://t.co/H29QBjVDIv

---

🔗 더 자세한 릴리즈 노트와 코드는 GitHub에서 확인해보세요!
👉 https://t.co/ux7NwYSFb6

#WebGPU #Web3D #JavaScript #RedGPU #GraphicsProgramming #GameDev #FrontEnd

[redcamel @redcamel15]

🚀 RedGPU V4.1.0-Alpha 공식 릴리스!

WebGPU 기반 3D 그래픽스 엔진 RedGPU가 한 단계 더 진화했습니다. 이번 V4.1.0 아키텍처 혁신의 핵심 요약을 공개합니다. 대기 산란부터 독립형 인스펙터까지, 차세대 웹 그래픽스를 위한 대대적인 변화를 확인하세요.

- - -

🌌 1. 핵심 아키텍처 혁신 및 신규 기능
- SkyAtmosphere 도입: 물리 기반의 하늘 대기 산란 시뮬레이션 구현 (실시간 일출/일몰, 대기 효과 완벽 재현).
- SkyAtmosphere 예제: https://t.co/GgHPgblFKk

- 물리 기반 카메라 & 조명 시스템: 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: https://t.co/fZL39NSPkg

- 메인 프레임 부하 Zero: 메인 스레드 런타임 성능 저하를 일으키던 구형 디버그 렌더러(DebugRender)를 전면 폐기.

- Vite + React + TS 기반 독립 대시보드: VRAM 상태, GPUBuffer 리드백 데이터 테이블화.

- 실시간 모달 미리보기: G-Buffer 및 후처리 중간 텍스처 실시간 모니터링, 씬 노드 트리 뷰, 톤맵 실시간 변환 제어 기능 탑재.

- - -

📦 3. 기반 구조 및 기타 개선사항
- 최상위 기본 객체 정립: BaseObject, RedGPUObject 신설로 코어 수준의 리소스 수명 관리 및 메모리 누수 방지.

- DirectTexture 도입: 외부 GPUTexture 리소스를 웹캠 스트리밍이나 실시간 캔버스에 VRAM 복사 지연 없이 다이렉트 바인딩 (ADirectTexture, 2D, Cube 지원).

- - -

- Examples 페이지: https://t.co/243t0xMDL5

#WebGPU #RedGPU #GraphicsEngine #3D #WebGL #TypeScript #JavaScript #Render #OpenSource

[redcamel @redcamel15]

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: 🔗
https://t.co/oq0JEPkoE1
https://t.co/qLh817MMMJ

#RedGPU #WebGPU

[redcamel @redcamel15]

It's been difficult to keep up with the current guides and API documentation, as I'm currently handling all engine work on my own. This update aims to provide continuous API documentation updates through AI, allowing me to devote more time to the guide documentation. The namespace change was made to make the API documentation easier to understand. It has minimal impact on the actual host code. The engine still has many shortcomings compared to Three or Babylon. I hope to surpass them through continuous updates.

[redcamel @redcamel15]

🚀 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: https://t.co/lOJ2hRuKvw
🔗 API: https://t.co/uWoDk8mZj8

#RedGPU #WebGPU #Javascript #Gemini #VitePress

[redcamel @redcamel15]

🎨 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! 👇 🔗 https://t.co/gyQjJGYvFv

Release Notes - https://t.co/Ve9W05J6RZ

#WebGPU #RedGPU #ToneMapping

[redcamel @redcamel15]

🚀 RedGPU V3.8.0-Alpha Released!

💎 SSAO SupportExperience enhanced spatial depth and realistic micro-shadows.

🎮 Live Demo - https://t.co/iPyaycodif

Release Note - https://t.co/2FvtqlaE7G

#RedGPU #WebGPU #SSAO

[redcamel @redcamel15]

🚀 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
https://t.co/UKO4nO9cst

💻 GitHub : https://t.co/JwQX7PQQ9Z
🎮 Live : https://t.co/uJNaHK92rh

#WebGPU #RedGPU

[redcamel @redcamel15]

🚀RedGPU V3.6.0-Alpha Released!
Summary
- Significantly improved PBR material quality

Please see the release notes for details.

ReleaseNote - https://t.co/2L7RsSXKhT

GitHub - https://t.co/JwQX7PQQ9Z
Live - https://t.co/uJNaHK92rh

#WebGPU #RedGPU

[redcamel @redcamel15]

🚀 RedGPU V3.5.0-Alpha
camera controller system has been significantly revamped. New controllers and improved mobile touch zoom handling

isometricController - https://t.co/4QwOejfpWm
followController -https://t.co/F4FyxcV7au

demos - https://t.co/uJNaHK92rh
#RedGPU #WebGPU

[redcamel @redcamel15]

🚀 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
https://t.co/Y8gi8zP5LN

🔹 CPU-Based LOD Demo
https://t.co/l2jADPTQsA

#RedGPU #WebGPU

[redcamel @redcamel15]

🚀 RedGPU V3.3.0-Alpha is here!

GPU-Based LOD System
Demo - https://t.co/mWcOd8VrTc

CPU-Based LOD System
Demo - https://t.co/wuvm8zQBs5

Live - https://t.co/D5RuuukpmV

#WebGPU #RedGPU

[redcamel @redcamel15]

🚀 RedGPU V3.2.0-Alpha is here!
📷 GPU-based culling for instanced meshes 📷
https://t.co/oZeepZWNq1
https://t.co/AzEiZ2akWW

#WebGPU #RedGPU

[redcamel @redcamel15]

🚀 RedGPU V3.1.0-Alpha is here!

The default rendering changes from CPU-based draw calls to GPU-based draw.

- Release Note
https://t.co/4cCliI0xKl

- Live (https://t.co/D5RuuukpmV)

#RedGPU #WebGPU

[redcamel @redcamel15]

🚀 RedGPU V3.0.0-Alpha is here!

🎯 GPURenderBundle-based rendering
📖 Auto-generated API docs
⚡ Better CPU performance

Docs: https://t.co/b8MDEiSpB3
Release: https://t.co/bLt0QkS7h2
Live (https://t.co/D5RuuukpmV)

#RedGPU #WebGPU

[redcamel @redcamel15]

The RedGPU introduction page has been revamped.
https://t.co/D5RuuujRxn

#RedGPU

[redcamel @redcamel15]

🚀RedGPU V2.9.0-Alpha Released!
Summary - Changed most of the calculations for skinning & morph target animation to GPU-based.

Release Notes (https://t.co/yg3MEZBb0f)
GitHub (https://t.co/JwQX7PQQ9Z)
Live (https://t.co/uJNaHK92rh)

#RedGPU #WebGPU

[redcamel @redcamel15]

🚀RedGPU V2.8.0-Alpha Released!
Summary
- Temporal Anti-Aliasing (TAA) introduced and implemented by default
- Experimental Screen Space Reflection

Release Notes (https://t.co/WIrmoQEkwf)
GitHub (https://t.co/JwQX7PQQ9Z)
Live (https://t.co/uJNaHK92rh)

#RedGPU #WebGPU

[redcamel @redcamel15]

🚀RedGPU V2.7.0-Alpha Released!
Summary - Debug Panel Improvements & Resource Tracking

GitHub (https://t.co/JwQX7PQQ9Z)
Documentation (https://t.co/b8MDEiSpB3)
Live Examples (https://t.co/uJNaHK92rh)
#RedGPU #WebGPU