cool-retro-term-renderer 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +106 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
# cool-retro-term-
|
|
1
|
+
# cool-retro-term-renderer
|
|
2
2
|
|
|
3
3
|
A WebGL-based CRT terminal renderer for XTerm.js. This library provides authentic retro CRT visual effects for terminal applications, including screen curvature, phosphor glow, scanlines, and more.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/cool-retro-term-renderer)
|
|
6
|
+
|
|
6
7
|
[](https://www.gnu.org/licenses/gpl-3.0)
|
|
7
8
|
|
|
8
9
|
## Preview
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
|
|
11
12
|
|
|
12
13
|
Live demo available at https://remojansen.github.io/
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
16
17
|
```bash
|
|
17
|
-
npm install cool-retro-term-
|
|
18
|
+
npm install cool-retro-term-renderer
|
|
18
19
|
```
|
|
19
20
|
|
|
20
21
|
### Peer Dependencies
|
|
@@ -28,7 +29,7 @@ npm install three @xterm/xterm
|
|
|
28
29
|
## Quick Start
|
|
29
30
|
|
|
30
31
|
```typescript
|
|
31
|
-
import { CRTTerminal } from 'cool-retro-term-
|
|
32
|
+
import { CRTTerminal } from 'cool-retro-term-renderer';
|
|
32
33
|
import { Terminal } from '@xterm/xterm';
|
|
33
34
|
|
|
34
35
|
// Create a container element
|
|
@@ -59,6 +60,106 @@ xterm.write('Hello, CRT World!\r\n');
|
|
|
59
60
|
xterm.write('$ ');
|
|
60
61
|
```
|
|
61
62
|
|
|
63
|
+
## Advanced Usage (Low-Level API)
|
|
64
|
+
|
|
65
|
+
For more control over the rendering pipeline (e.g., custom Three.js scenes, audio integration, or custom terminal adapters), you can use the lower-level components directly:
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
import * as THREE from 'three';
|
|
69
|
+
import { TerminalFrame, TerminalText } from 'cool-retro-term-renderer';
|
|
70
|
+
import { Terminal } from '@xterm/xterm';
|
|
71
|
+
|
|
72
|
+
const container = document.getElementById('terminal')!;
|
|
73
|
+
|
|
74
|
+
// Create your own Three.js scene
|
|
75
|
+
const scene = new THREE.Scene();
|
|
76
|
+
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
|
|
77
|
+
camera.position.z = 1;
|
|
78
|
+
|
|
79
|
+
// Create the renderer
|
|
80
|
+
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
81
|
+
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
82
|
+
renderer.setPixelRatio(window.devicePixelRatio);
|
|
83
|
+
renderer.setClearColor(0x000000);
|
|
84
|
+
container.appendChild(renderer.domElement);
|
|
85
|
+
|
|
86
|
+
// Create the terminal text renderer (handles character rendering and effects)
|
|
87
|
+
const terminalText = new TerminalText(window.innerWidth, window.innerHeight);
|
|
88
|
+
terminalText.mesh.position.z = 0;
|
|
89
|
+
scene.add(terminalText.mesh);
|
|
90
|
+
|
|
91
|
+
// Create the terminal frame (CRT bezel/border)
|
|
92
|
+
const terminalFrame = new TerminalFrame(window.innerWidth, window.innerHeight);
|
|
93
|
+
terminalFrame.mesh.position.z = 0.1;
|
|
94
|
+
scene.add(terminalFrame.mesh);
|
|
95
|
+
|
|
96
|
+
// Create XTerm instance (hidden, used as input handler)
|
|
97
|
+
const xterm = new Terminal({ cols: 80, rows: 24 });
|
|
98
|
+
const hiddenContainer = document.createElement('div');
|
|
99
|
+
hiddenContainer.style.position = 'absolute';
|
|
100
|
+
hiddenContainer.style.left = '-9999px';
|
|
101
|
+
document.body.appendChild(hiddenContainer);
|
|
102
|
+
xterm.open(hiddenContainer);
|
|
103
|
+
|
|
104
|
+
// Sync XTerm dimensions with the calculated terminal grid size
|
|
105
|
+
const gridSize = terminalText.getGridSize();
|
|
106
|
+
if (gridSize.cols > 0 && gridSize.rows > 0) {
|
|
107
|
+
xterm.resize(gridSize.cols, gridSize.rows);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Listen for grid size changes and resize XTerm
|
|
111
|
+
terminalText.onGridSizeChange((cols, rows) => {
|
|
112
|
+
if (cols > 0 && rows > 0) {
|
|
113
|
+
xterm.resize(cols, rows);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// Handle window resize
|
|
118
|
+
window.addEventListener('resize', () => {
|
|
119
|
+
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
120
|
+
terminalFrame.updateSize(window.innerWidth, window.innerHeight);
|
|
121
|
+
terminalText.updateSize(window.innerWidth, window.innerHeight);
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
// Animation loop
|
|
125
|
+
function animate() {
|
|
126
|
+
terminalText.updateTime(performance.now());
|
|
127
|
+
terminalText.renderStaticPass(renderer);
|
|
128
|
+
requestAnimationFrame(animate);
|
|
129
|
+
renderer.render(scene, camera);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
animate();
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Low-Level Components
|
|
136
|
+
|
|
137
|
+
| Export | Description |
|
|
138
|
+
|--------|-------------|
|
|
139
|
+
| `TerminalText` | Renders terminal characters with CRT effects (shaders, bloom, etc.) |
|
|
140
|
+
| `TerminalFrame` | Renders the CRT monitor bezel/frame |
|
|
141
|
+
| `XTermConnector` | Syncs an XTerm.js buffer to `TerminalText` (optional helper) |
|
|
142
|
+
|
|
143
|
+
### TerminalText Methods
|
|
144
|
+
|
|
145
|
+
| Method | Description |
|
|
146
|
+
|--------|-------------|
|
|
147
|
+
| `getGridSize()` | Get terminal dimensions `{ cols, rows }` |
|
|
148
|
+
| `onGridSizeChange(callback)` | Register callback for grid size changes |
|
|
149
|
+
| `updateSize(width, height)` | Update renderer dimensions |
|
|
150
|
+
| `updateTime(time)` | Update time uniform for animated effects |
|
|
151
|
+
| `renderStaticPass(renderer)` | Render effects that don't change per-frame |
|
|
152
|
+
| `setFontColor(color)` | Set font color (hex string) |
|
|
153
|
+
| `setBackgroundColor(color)` | Set background color (hex string) |
|
|
154
|
+
| `setScreenCurvature(value)` | Set screen curvature (0-1) |
|
|
155
|
+
| `setBloom(value)` | Set bloom intensity (0-1) |
|
|
156
|
+
| `setBrightness(value)` | Set brightness (0-1) |
|
|
157
|
+
| `setFlickering(value)` | Set flickering intensity (0-1) |
|
|
158
|
+
| `setStaticNoise(value)` | Set static noise (0-1) |
|
|
159
|
+
| `setBurnIn(value)` | Set burn-in persistence (0-1) |
|
|
160
|
+
| `setRasterizationMode(mode)` | Set scanline mode (0-3) |
|
|
161
|
+
| `dispose()` | Clean up resources |
|
|
162
|
+
|
|
62
163
|
## API Reference
|
|
63
164
|
|
|
64
165
|
### `CRTTerminal`
|