DEV Community: SUJIT KOJI

I Built GLBKit - A Free Online Toolkit for Working with GLB Files

SUJIT KOJI — Wed, 01 Jul 2026 09:47:14 +0000

How a simple frustration with existing GLB tools turned into a browser-based toolkit for developers.

If you've ever worked with Three.js, React Three Fiber, Babylon.js, or any other 3D web framework, you've probably spent a lot of time dealing with GLB files.

Sometimes you only want to inspect a model.

Sometimes you need to check triangle count.

Sometimes you need a clean screenshot for documentation.

And sometimes you just want to quickly open a model without installing another desktop application.

I kept running into these small problems while building projects.

So instead of switching between multiple tools every day, I decided to build one place for everything.

That's how GLBKit started.

Why I Built It

Most available tools solve only one problem.

One website lets you preview a model.

Another application shows statistics.

Another utility generates screenshots.

Another tool optimizes the file.

After using this workflow for months, it became clear that it wasn't efficient.

I wanted something that worked directly in the browser with no installation and no account required.

Current Features

At the moment GLBKit includes two tools.

1. GLB Viewer

The viewer is designed for developers who need to inspect a model quickly.

You can:

Upload a GLB file
Rotate and inspect the model
Switch between wireframe and solid view
Show bounding boxes
Enable grid
Change camera views
Auto rotate the model
View geometry statistics
Inspect triangles, vertices and draw calls

Everything runs inside the browser using WebGL.

2. GLB Screenshot

Sometimes documentation, portfolios or marketplaces require high quality images of a 3D model.

Instead of opening Blender just to render a preview, the screenshot tool lets you generate clean images directly in your browser.

Features include:

PNG export
JPEG export
Transparent background
Multiple camera angles
High-resolution output

Built With

The project is built using technologies I work with daily.

Next.js
React
React Three Fiber
Three.js
TypeScript
Tailwind CSS

Everything is focused on keeping the interface simple while maintaining good rendering performance.

What's Coming Next

The viewer and screenshot tools are only the beginning.

I'm currently working on additional utilities including:

GLB Optimizer
GLB Analyzer
Texture Inspector
Material Inspector
Mesh Statistics
Animation Inspector
File Validation
Performance Analysis
Compression Utilities

The goal is to make GLBKit a complete toolbox for developers working with 3D assets on the web.

A Small Design Philosophy

One thing I wanted to avoid was creating another dashboard full of buttons.

The idea behind GLBKit is simple.

Upload a file.

Get the information you need.

Export what you need.

Move on with your project.

No unnecessary complexity.

I'd Love Your Feedback

The project is still growing, and I'm improving it step by step.

If you're a Three.js or React Three Fiber developer, I'd love to know:

Which GLB tool do you use most often?
What feature would save you the most time?
Is there something missing from your current workflow?

Your feedback will help shape the next version of GLBKit.

Try GLBKit 🌐 Website: https://glbkit.com

THREE.JS VISION MOUSE DISTORTION // VOL. 04

SUJIT KOJI — Sun, 29 Mar 2026 08:25:37 +0000

A real-time WebGL experiment exploring fluid distortion and chromatic refraction through mouse interaction.
Built with Three.js and GLSL, the experience blends dynamic motion, procedural effects, and cinematic visuals on the modern web.

THREE.JS ELEGANCE: INTERACTIVE FLOWER SHADER VOL. 03

SUJIT KOJI — Sat, 28 Mar 2026 08:21:16 +0000

Elegance: Interactive Flower Shader

A sophisticated, interactive visual experience blending high-end editorial design with advanced WebGL techniques. This project features a 3D-distorted floral gallery element powered by Three.js and custom GLSL Shaders.

Three.js #GLSL #Shaders

THREE.JS MIND SCAPE // VOL. 02

SUJIT KOJI — Fri, 27 Mar 2026 09:34:37 +0000

THREE.JS MIND SCAPE // VOL. 02

An exploration of digital tactile experiences through Refraction Shaders and Interactive Distortion. This experiment pushes the boundaries of WebGL by blending organic motion with high-end typography.

Tech Stack: Three.js, GLSL (Shaders), Custom Pipeline.
Key Feature: Dynamic RGB Shift & Mouse-Inertia Displacement.
Vibe: Minimalist, Cinematic, High-Fashion.

THREE.JS MORPHING VOID // VOL. 01

SUJIT KOJI — Thu, 26 Mar 2026 06:46:22 +0000

Pushing the limits of Three.js with custom GLSL noise displacement. 128-segment density for that ultra-smooth liquid transition. No videos, no heavy assets-just pure, optimized math.

Engine: Three.js

Shader: Simplex 3D Noise

Vibe: Industrial Minimalist

THREE.JS LIQUID ART // VOL. 02

SUJIT KOJI — Sat, 21 Mar 2026 18:51:27 +0000

An exploration into high-end GPU-accelerated visuals and fluid motion.

This experiment focuses on the intersection of mathematics and art, utilizing custom GLSL Shaders to create a responsive, liquid-like surface. The interaction is driven by a smooth Lerp-based mouse tracking system that distorts a 3D mesh in real-time.

Engineering "Interfaces That Feel Alive" - My Design Philosophy

SUJIT KOJI — Tue, 17 Mar 2026 17:42:07 +0000

Portfolio:

The Core Concept

Websites shouldn't just be viewed; they should be felt. When we talk about "Awwwards-level" digital experiences, it isn't just about a flashy color palette or a trendy typeface. It’s about that organic flow-the thin line between a static UI and an immersive environment.

The Vision: Motion-First Identity

My portfolio (screenshot above) is built on a single principle: Interfaces that feel alive - not just animated. In this hero section, I focused on three pillars to define my digital identity:

The Living Core: The central organic blob isn't a pre-rendered video or a simple loop. It’s a performance-driven shader designed to give the interface a "pulse" that responds to the environment.

Typography & Hierarchy: By using high-contrast, minimalist Sans-Serif, I let the message breathe while the motion does the heavy lifting.

Technical Sophistication: Every interaction is locked at a cinematic 60FPS to ensure the premium feel remains buttery smooth.

The Creative Tech Stack

To bridge the gap between functional UI and high-end aesthetics, I utilized a stack that balances performance with creative freedom:

Next.js: For a robust, SEO-friendly architecture.
React Three Fiber (R3F): Bringing 3D into the DOM with seamless state management.
Custom GLSL Shaders: Crafting unique visual textures that go beyond standard CSS.
GSAP & Framer Motion: For orchestrating complex layout transitions and micro-interactions.

Beyond the Code

For me, code is more than just logic-it's a medium for Digital Architecture. As a Creative Frontend Developer and WebGL Specialist, I am constantly pushing the boundaries of how we interact with the web.

The goal is always the same: Move away from "templates" and toward "experiences."

I'd love to hear from other creative engineers:
How do you balance heavy WebGL graphics with web performance? Let's discuss in the comments!