PSD Viewer & Editor with WebGL

A web-based PSD file viewer and editor with WebGL rendering and layer transformation capabilities.

VERSION 1.0.0 MY DEMO FILE

Steps to run:

git clone <repo>
cd <repo>
npx serve

→ then open the localhost link shown in terminal.

Features

✅ Completed

• PSD File Loading: Drag & drop or click to upload .psd files
• WebGL Rendering: Hardware-accelerated rendering with automatic fallback
• Layer Management:
  • Complete layer information retained (names, positions, sizes, opacity, visibility)
  • Layer panel with visibility toggles
  • Hierarchical layer display with indentation
  • Layer selection and highlighting

✨ New Features

• WebGL Renderer:

  • Custom shader-based rendering for better performance
  • Texture-based layer rendering with GPU acceleration
  • Opacity and transform support in shaders

• Layer Editing:

  • Move: Click and drag selected layers
  • Resize: Drag corner handles to resize layers
  • Transform Controls: Real-time input fields for X, Y, Width, Height
  • Opacity Control: Slider to adjust layer opacity (0-100%)
  • Reset Layer: Restore layer to original state

• Interactive Canvas:

  • Pan: Click and drag empty space
  • Zoom: Scroll wheel or zoom buttons
  • Selection handles with visual feedback
  • Cursor changes based on interaction mode plus Rotation

Usage

1. Open index.html in a modern web browser
2. Upload a PSD file (drag & drop or click upload area)
3. Wait for parsing and rendering
4. Select a layer from the panel on the left
5. Edit the layer:
   • Drag to move
   • Drag corner handles to resize
   • Use input fields for precise positioning
   • Adjust opacity with slider
   • Toggle visibility with checkbox

Controls

Canvas

• Pan: Left-click + drag (on empty space)
• Zoom: Mouse wheel or zoom buttons (top-left)
• Reset View: Reset zoom and pan to default

Layer Selection

• Select: Click on layer in panel or click on layer in canvas
• Move: Drag selected layer
• Resize: Drag corner handles (TL, TR, BL, BR)

Transform Panel (Right side)

• X/Y: Layer position
• W/H: Layer dimensions
• Opacity: Layer transparency (0-100%)
• Reset Layer: Reset all transformations

Technical Details

WebGL Implementation

• Custom vertex and fragment shaders
• Texture-based rendering with alpha blending
• Transform matrix support (translation, scale, rotation)
• Automatic fallback to Canvas 2D if WebGL unavailable

Libraries Used

• @webtoon/[email protected] - PSD file parsing (via CDN)

Browser Compatibility

• Modern browsers with WebGL support (Chrome, Firefox, Edge, Safari)
• Automatic 2D canvas fallback for older browsers

Architecture

WebGLRenderer
├── Shader Programs (vertex + fragment)
├── Texture Management
└── Layer Rendering

PSDEditor
├── File Upload & Parsing
├── Layer Management
├── Mouse Interaction
├── Transform Controls
└── Rendering Pipeline

Future Enhancements

• Layer rotation control
• Layer blending modes
• Undo/redo functionality
• Layer duplication/deletion
• Export to PNG/JPG
• Multi-layer selection
• Keyboard shortcuts