The OSI model often feels abstract when it’s only shown in textbooks or static diagrams — it’s almost always presented as a flat model.
PacketLab is a small 3D visual experiment designed to make the OSI model easier to understand.
Each layer is represented as a protective box added around a central “data core,” similar to how packaging works in logistics.
The goal is simple:
👉 turn theory into something learners can actually see.
PacketLab aims to bridge the gap between:
- abstract networking theory
- real, visual, intuitive understanding
It is meant for:
- students
- beginners in networking
- teachers and trainers
- anyone who learns better visually than through static diagrams
Visualising the invisible helps transform complexity into intuition.
PacketLab is built around a simple analogy inspired by logistics:
- 📦 Each OSI layer = one box
- 🏷️ Each box adds an address or identifier (MAC → IP → Port…)
- 🔄 Encapsulation = packaging steps, one layer at a time
- 💎 The Data Core is the central item being wrapped and protected
This allows learners to follow encapsulation like the preparation of a parcel moving through different processing stages.
- 3D animated OSI model
- Step-by-step encapsulation and decapsulation
- Data shown as a glowing “Data Core” (Ruby/Diamond)
- Layer highlighting and transitions
- Multiple immersive environments:
- Cyberpunk
- Mirror’s Edge-style city
- Matrix-inspired space
- Simple visual model for students and beginners
- Works as a static webpage (HTML + JS)
You can watch the video teaser demonstrating the visual concept:
👉 https://www.linkedin.com/posts/activity-7397797725905264640-upqY?
The project landing page is available here:
👉 https://dzcontrol.github.io/PacketLAB/
You can also deploy on Netlify for a smoother experience.