Initial commit: ComfyUI Camera Angle Selector node
This commit is contained in:
Nick Pittas
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Agent Builder agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Agent Builder Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmb/agents/agent-builder.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Module Builder agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Module Builder Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmb/agents/module-builder.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Workflow Builder agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Workflow Builder Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmb/agents/workflow-builder.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Analyst agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Analyst Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/analyst.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Architect agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Architect Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/architect.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Dev agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Dev Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/dev.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Pm agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Pm Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/pm.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Quick Flow Solo Dev agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Quick Flow Solo Dev Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/quick-flow-solo-dev.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Sm agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Sm Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/sm.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Tea agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Tea Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/tea.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Tech Writer agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Tech Writer Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/tech-writer.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Ux Designer agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Ux Designer Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/bmm/agents/ux-designer.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Brainstorming Coach agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Brainstorming Coach Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/brainstorming-coach.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Creative Problem Solver agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Creative Problem Solver Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/creative-problem-solver.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Design Thinking Coach agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Design Thinking Coach Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/design-thinking-coach.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Innovation Strategist agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Innovation Strategist Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/innovation-strategist.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Presentation Master agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Presentation Master Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/presentation-master.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Storyteller agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Storyteller Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/cis/agents/storyteller/storyteller.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
description: "Activates the Bmad Master agent persona."
|
||||
tools: ["changes","edit","fetch","githubRepo","problems","runCommands","runTasks","runTests","search","runSubagent","testFailure","todos","usages"]
|
||||
---
|
||||
|
||||
# Bmad Master Agent
|
||||
|
||||
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
|
||||
|
||||
<agent-activation CRITICAL="TRUE">
|
||||
1. LOAD the FULL agent file from @_bmad/core/agents/bmad-master.md
|
||||
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
|
||||
3. Execute ALL activation steps exactly as written in the agent file
|
||||
4. Follow the agent's persona and menu system precisely
|
||||
5. Stay in character throughout the session
|
||||
</agent-activation>
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
# Copilot Instructions - Angles (ComfyUI Camera Angle Selector)
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is a **ComfyUI custom node** that provides an interactive 3D interface for selecting camera angles. The main deliverable is in `ComfyUI_CameraAngleSelector/` - a Python + JavaScript node that renders a Three.js 3D viewport inline within ComfyUI.
|
||||
|
||||
The `_bmad/` folder contains BMad Method tooling for project planning and documentation - it's NOT part of the shipped product.
|
||||
|
||||
## Architecture
|
||||
|
||||
### ComfyUI Node Structure
|
||||
```
|
||||
ComfyUI_CameraAngleSelector/
|
||||
├── __init__.py # Node registration (WEB_DIRECTORY, NODE_CLASS_MAPPINGS)
|
||||
├── camera_angle_selector.py # Python backend - legacy ComfyUI API
|
||||
└── web/js/camera_angle_extension.js # Three.js frontend widget (~740 lines)
|
||||
```
|
||||
|
||||
### Key Patterns
|
||||
|
||||
**ComfyUI Extension Pattern** - The JavaScript uses `nodeCreated` callback to inject the 3D widget:
|
||||
```javascript
|
||||
app.registerExtension({
|
||||
name: "Comfy.CameraAngleSelector",
|
||||
async nodeCreated(node) {
|
||||
if (node.comfyClass !== "CameraAngleSelector") return;
|
||||
// Create and attach 3D widget via node.addDOMWidget()
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**96 Camera Angle Combinations** - Generated from constants:
|
||||
- `VIEW_DIRECTIONS` (8): front, front-right quarter, right, back-right quarter, back, back-left quarter, left, front-left quarter
|
||||
- `HEIGHT_ANGLES` (4): low-angle shot, eye-level shot, elevated shot, high-angle shot
|
||||
- `SHOT_SIZES` (3): close-up, medium shot, wide shot
|
||||
|
||||
**Output Format**: `<sks> {direction} {height} {size}` (e.g., `<sks> front view low-angle shot close-up`)
|
||||
|
||||
### Frontend Widget Pattern
|
||||
|
||||
The JavaScript extension in `web/js/camera_angle_extension.js`:
|
||||
- Loads Three.js dynamically from CDN (`r128`)
|
||||
- Uses `CameraAngleWidget` class with inline rendering
|
||||
- Communicates via `selected_indices` JSON string parameter
|
||||
- Color-coded cameras: height by body color, size by cone/indicator color
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Testing in ComfyUI
|
||||
1. Copy/symlink `ComfyUI_CameraAngleSelector/` to ComfyUI's `custom_nodes/` directory
|
||||
2. Restart ComfyUI server
|
||||
3. Node appears as "Camera Angle Selector" in camera category
|
||||
4. Browser DevTools console shows any JavaScript errors
|
||||
|
||||
### Key Files to Modify
|
||||
|
||||
| Task | File |
|
||||
|------|------|
|
||||
| Add new angle types | `camera_angle_selector.py` - modify constants |
|
||||
| Change 3D visuals | `web/js/camera_angle_extension.js` - Three.js scene code |
|
||||
| Modify output format | `camera_angle_selector.py` - `execute()` method |
|
||||
| Add UI controls | `camera_angle_extension.js` - `CameraAngleWidget` class |
|
||||
|
||||
## Conventions
|
||||
|
||||
- **Prompt prefix**: All outputs use `<sks>` prefix (standard for camera angle prompts)
|
||||
- **Color scheme**: Dark theme matching ComfyUI (`#1a1a2e` background, `#0f3460` accents)
|
||||
- **Widget sizing**: Minimum 240px height for 3D viewport
|
||||
- **JSON state**: Selection state stored as JSON array of indices `"[0, 5, 12]"`
|
||||
|
||||
## BMad Tooling (Non-Product)
|
||||
|
||||
The `_bmad/` directory contains planning framework - ignore when working on the node itself. Relevant outputs:
|
||||
- `_bmad-output/planning-artifacts/prd.md` - Product requirements (reference only)
|
||||
- `_bmad-output/planning-artifacts/product-brief-*.md` - Vision document
|
||||
|
||||
## Testing Notes
|
||||
|
||||
- No automated test suite currently exists
|
||||
- Manual testing: verify 3D scene loads, click selection works, output connects to downstream nodes
|
||||
- Check browser console for Three.js or ComfyUI extension errors
|
||||
- Test both ComfyUI v1.0+ and legacy versions for API compatibility
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
*.so
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
|
||||
# Virtual environments
|
||||
venv/
|
||||
ENV/
|
||||
env/
|
||||
.venv/
|
||||
|
||||
# IDE and editor configs
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.project
|
||||
.pydevproject
|
||||
.settings/
|
||||
|
||||
# AI agent configs
|
||||
.claude/
|
||||
.opencode/
|
||||
.roo/
|
||||
.cursor/
|
||||
.windsurf/
|
||||
.kilocodemodes
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
Desktop.ini
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
*.log
|
||||
|
||||
# Screenshots in root (keep the one in ComfyUI_CameraAngleSelector/)
|
||||
/Screenshot*.png
|
||||
@@ -0,0 +1,202 @@
|
||||
# ComfyUI Camera Angle Selector
|
||||
|
||||
A ComfyUI custom node that provides an interactive 3D interface for selecting camera angles. Select from 96 different camera angle combinations (8 view directions × 4 height angles × 3 shot sizes) with visual feedback and multi-selection support.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- **3D Visualization**: Interactive 3D scene showing camera positions around a central subject
|
||||
- **Multi-Selection**: Select multiple camera angles simultaneously
|
||||
- **Color-Coded Cameras**: Direction-based colors (green=front, red=back) with height indicator rings
|
||||
- **Three Shot Size Layers**: Close-up (inner), Medium (middle), Wide (outer) rings
|
||||
- **Filter Controls**: Filter by view direction, height angle, and shot size
|
||||
- **Drag to Rotate**: Click and drag to rotate the 3D scene
|
||||
- **Zoom**: Mouse wheel to zoom in/out
|
||||
- **Resizable**: Node scales with 1:1 aspect ratio 3D viewport
|
||||
- **Selection List**: View and manage selected angles with individual removal
|
||||
- **List Output**: Returns a list of formatted prompt strings
|
||||
|
||||
## Camera Angles
|
||||
|
||||
### View Directions (8 angles)
|
||||
- Front view
|
||||
- Front-right quarter view
|
||||
- Right side view
|
||||
- Back-right quarter view
|
||||
- Back view
|
||||
- Back-left quarter view
|
||||
- Left side view
|
||||
- Front-left quarter view
|
||||
|
||||
### Height Angles (4 types)
|
||||
- Low-angle shot
|
||||
- Eye-level shot
|
||||
- Elevated shot
|
||||
- High-angle shot
|
||||
|
||||
### Shot Sizes (3 types)
|
||||
- Close-up
|
||||
- Medium shot
|
||||
- Wide shot
|
||||
|
||||
**Total: 96 unique camera angle combinations**
|
||||
|
||||
## Installation
|
||||
|
||||
### Prerequisites
|
||||
- ComfyUI installed and running
|
||||
- Python 3.8 or higher
|
||||
|
||||
### Step-by-Step Installation
|
||||
|
||||
1. **Navigate to ComfyUI's custom_nodes directory:**
|
||||
```bash
|
||||
cd ComfyUI/custom_nodes
|
||||
```
|
||||
|
||||
2. **Clone or copy this repository:**
|
||||
```bash
|
||||
git clone <repository-url> ComfyUI_CameraAngleSelector
|
||||
```
|
||||
|
||||
Or if you have the files locally:
|
||||
```bash
|
||||
cp -r /path/to/ComfyUI_CameraAngleSelector .
|
||||
```
|
||||
|
||||
3. **Restart ComfyUI** to load the new node.
|
||||
|
||||
## Usage
|
||||
|
||||
### In ComfyUI
|
||||
|
||||
1. **Add the Node:**
|
||||
- Right-click in the node editor
|
||||
- Search for "Camera Angle Selector"
|
||||
- Add the node to your workflow
|
||||
|
||||
2. **Select Camera Angles:**
|
||||
- Click on the 3D visualization to open the full interface
|
||||
- Click on camera icons to select/deselect angles
|
||||
- Drag the scene to rotate the view
|
||||
- Use filters to narrow down visible cameras
|
||||
- Use "Select Visible" to select all currently filtered cameras
|
||||
- Use "Clear All" to deselect all cameras
|
||||
|
||||
3. **Connect the Output:**
|
||||
- Connect the `selected_angles` output to any node that accepts string inputs
|
||||
- The output is a list of strings, one per selected camera angle
|
||||
|
||||
### Output Format
|
||||
|
||||
Each selected camera angle is returned as a formatted string:
|
||||
|
||||
```
|
||||
<sks> {view_direction} {height_angle} {shot_size}
|
||||
```
|
||||
|
||||
**Example outputs:**
|
||||
```
|
||||
<sks> front view low-angle shot close-up
|
||||
<sks> front-right quarter view eye-level shot medium shot
|
||||
<sks> back view high-angle shot wide shot
|
||||
```
|
||||
|
||||
## Node Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| `selected_indices` | STRING | Internal parameter (auto-managed by the 3D interface) |
|
||||
|
||||
## Node Outputs
|
||||
|
||||
| Output | Type | Description |
|
||||
|--------|------|-------------|
|
||||
| `selected_angles` | STRING (List) | List of selected camera angle prompt strings |
|
||||
|
||||
## Interface Controls
|
||||
|
||||
### 3D View
|
||||
- **Click** on a camera to select/deselect it
|
||||
- **Drag** to rotate the view around the subject
|
||||
- **Hover** over cameras to see their details
|
||||
|
||||
### Filters
|
||||
- **View Direction**: Filter by front, side, or back views
|
||||
- **Height Angle**: Filter by low, eye-level, elevated, or high angles
|
||||
- **Shot Size**: Filter by close-up, medium, or wide shots
|
||||
|
||||
### Action Buttons
|
||||
- **Clear All**: Deselect all cameras
|
||||
- **Select Visible**: Select all currently visible (filtered) cameras
|
||||
|
||||
### Legend
|
||||
|
||||
**Camera Body Colors (Direction):**
|
||||
- **Green**: Front view
|
||||
- **Light Green**: Front quarter views
|
||||
- **Yellow**: Side views (left/right)
|
||||
- **Orange**: Back quarter views
|
||||
- **Red**: Back view
|
||||
|
||||
**Shot Size Layers (Distance from subject):**
|
||||
- **Inner ring**: Close-up shots
|
||||
- **Middle ring**: Medium shots
|
||||
- **Outer ring**: Wide shots
|
||||
|
||||
**Height Indicator Ring (on top of camera):**
|
||||
- **Red**: Low-angle
|
||||
- **Blue**: Eye-level
|
||||
- **Purple**: Elevated
|
||||
- **Teal**: High-angle
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
ComfyUI_CameraAngleSelector/
|
||||
├── __init__.py # Node registration
|
||||
├── camera_angle_selector.py # Main Python node class
|
||||
├── screenshot.png # Screenshot for README
|
||||
├── web/
|
||||
│ └── js/
|
||||
│ └── camera_angle_extension.js # Three.js ComfyUI extension
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Python Node
|
||||
- Uses `OUTPUT_IS_LIST = (True,)` to enable list output
|
||||
- Returns `("STRING",)` as `RETURN_TYPES`
|
||||
- Handles JSON input from the frontend interface
|
||||
|
||||
### Frontend
|
||||
- Built with Three.js for 3D rendering
|
||||
- Uses raycasting for click detection on 3D objects
|
||||
- Implements drag-to-rotate camera controls
|
||||
- PostMessage API for ComfyUI integration
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Node not appearing in ComfyUI
|
||||
- Ensure the folder is in `ComfyUI/custom_nodes/`
|
||||
- Restart ComfyUI after installation
|
||||
- Check for errors in the ComfyUI console
|
||||
|
||||
### 3D interface not loading
|
||||
- Check browser console for JavaScript errors
|
||||
- Ensure Three.js CDN is accessible
|
||||
- Try refreshing the page
|
||||
|
||||
### Selections not persisting
|
||||
- Make sure you're clicking directly on camera icons
|
||||
- Check that the node is properly connected in the workflow
|
||||
|
||||
## License
|
||||
|
||||
This project is provided as-is for use with ComfyUI.
|
||||
|
||||
## Credits
|
||||
|
||||
Built for ComfyUI to provide an intuitive 3D interface for camera angle selection in AI image generation workflows.
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
from .camera_angle_selector import CameraAngleSelector
|
||||
|
||||
WEB_DIRECTORY = "web"
|
||||
|
||||
NODE_CLASS_MAPPINGS = {
|
||||
"CameraAngleSelector": CameraAngleSelector,
|
||||
}
|
||||
|
||||
NODE_DISPLAY_NAME_MAPPINGS = {
|
||||
"CameraAngleSelector": "Camera Angle Selector",
|
||||
}
|
||||
|
||||
__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]
|
||||
@@ -0,0 +1,112 @@
|
||||
"""
|
||||
Camera Angle Selector Node for ComfyUI
|
||||
A custom node that provides a 3D visual interface for selecting camera angles.
|
||||
The 3D visualization renders directly inside the node using Three.js.
|
||||
"""
|
||||
|
||||
import json
|
||||
|
||||
# View directions (8 angles)
|
||||
VIEW_DIRECTIONS = [
|
||||
"front view",
|
||||
"front-right quarter view",
|
||||
"right side view",
|
||||
"back-right quarter view",
|
||||
"back view",
|
||||
"back-left quarter view",
|
||||
"left side view",
|
||||
"front-left quarter view",
|
||||
]
|
||||
|
||||
# Height angles (4 types)
|
||||
HEIGHT_ANGLES = [
|
||||
"low-angle shot",
|
||||
"eye-level shot",
|
||||
"elevated shot",
|
||||
"high-angle shot",
|
||||
]
|
||||
|
||||
# Shot sizes (3 types)
|
||||
SHOT_SIZES = [
|
||||
"close-up",
|
||||
"medium shot",
|
||||
"wide shot",
|
||||
]
|
||||
|
||||
# Generate all 96 combinations
|
||||
CAMERA_ANGLES = []
|
||||
for direction in VIEW_DIRECTIONS:
|
||||
for height in HEIGHT_ANGLES:
|
||||
for size in SHOT_SIZES:
|
||||
CAMERA_ANGLES.append({
|
||||
"direction": direction,
|
||||
"height": height,
|
||||
"size": size,
|
||||
"prompt": f"<sks> {direction} {height} {size}"
|
||||
})
|
||||
|
||||
|
||||
class CameraAngleSelector:
|
||||
"""
|
||||
ComfyUI custom node for selecting camera angles using a 3D visual interface.
|
||||
The 3D visualization is rendered by the companion JavaScript extension.
|
||||
"""
|
||||
|
||||
@classmethod
|
||||
def INPUT_TYPES(cls):
|
||||
return {
|
||||
"required": {
|
||||
"selected_indices": ("STRING", {
|
||||
"default": "[]",
|
||||
"multiline": False,
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
||||
RETURN_TYPES = ("STRING",)
|
||||
RETURN_NAMES = ("selected_angles",)
|
||||
OUTPUT_IS_LIST = (True,)
|
||||
FUNCTION = "execute"
|
||||
CATEGORY = "camera"
|
||||
DESCRIPTION = "Select camera angles using a 3D visual interface rendered directly in the node"
|
||||
|
||||
def execute(self, selected_indices="[]"):
|
||||
"""
|
||||
Execute the node and return the list of selected prompts.
|
||||
|
||||
Args:
|
||||
selected_indices: JSON string containing list of selected indices
|
||||
|
||||
Returns:
|
||||
Tuple containing list of selected angle prompts
|
||||
"""
|
||||
# Parse selected indices
|
||||
try:
|
||||
indices = json.loads(selected_indices)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
indices = []
|
||||
|
||||
if not isinstance(indices, list):
|
||||
indices = []
|
||||
|
||||
# Clamp indices to valid range
|
||||
clamped_indices = []
|
||||
for idx in indices:
|
||||
if isinstance(idx, int):
|
||||
clamped_indices.append(max(0, min(idx, len(CAMERA_ANGLES) - 1)))
|
||||
|
||||
# Build <sks> ... prompts from clamped indices
|
||||
selected_prompts = []
|
||||
for idx in clamped_indices:
|
||||
selected_prompts.append(CAMERA_ANGLES[idx]["prompt"])
|
||||
|
||||
return (selected_prompts,)
|
||||
|
||||
|
||||
NODE_CLASS_MAPPINGS = {
|
||||
"CameraAngleSelector": CameraAngleSelector,
|
||||
}
|
||||
|
||||
NODE_DISPLAY_NAME_MAPPINGS = {
|
||||
"CameraAngleSelector": "Camera Angle Selector",
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user