Hugging Face's logo

Spaces:
victorqueiroz
/
webgl
Running

App Files Community
victorqueiroz commited on
Commit
18a13a8
·
verified ·
1 Parent(s): eff6660

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +300 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webgl
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: webgl
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,300 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WebGL Text Rendering</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ #glCanvas {
10
+ display: block;
11
+ background-color: #1a202c;
12
+ border-radius: 0.5rem;
13
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
14
+ }
15
+
16
+ .control-panel {
17
+ background-color: #2d3748;
18
+ border-radius: 0.5rem;
19
+ }
20
+
21
+ .text-input {
22
+ background-color: #4a5568;
23
+ color: white;
24
+ border: none;
25
+ border-radius: 0.25rem;
26
+ padding: 0.5rem;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-900 text-gray-200 min-h-screen p-8">
31
+ <div class="max-w-6xl mx-auto">
32
+ <header class="mb-8">
33
+ <h1 class="text-4xl font-bold text-blue-400 mb-2">WebGL Text Rendering</h1>
34
+ <p class="text-gray-400">Rendering text using pure WebGL</p>
35
+ </header>
36
+
37
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
38
+ <div class="lg:col-span-2">
39
+ <canvas id="glCanvas" width="800" height="500"></canvas>
40
+ </div>
41
+
42
+ <div class="control-panel p-6">
43
+ <h2 class="text-xl font-semibold mb-4 text-blue-300">Controls</h2>
44
+
45
+ <div class="space-y-4">
46
+ <div>
47
+ <label class="block text-sm font-medium mb-1" for="textInput">Text Content</label>
48
+ <input type="text" id="textInput" value="WebGL" class="text-input w-full">
49
+ </div>
50
+
51
+ <div>
52
+ <label class="block text-sm font-medium mb-1" for="fontSize">Font Size</label>
53
+ <input type="range" id="fontSize" min="10" max="200" value="72" class="w-full">
54
+ <span id="fontSizeValue" class="text-sm">72px</span>
55
+ </div>
56
+
57
+ <div>
58
+ <label class="block text-sm font-medium mb-1" for="textColor">Text Color</label>
59
+ <input type="color" id="textColor" value="#4299e1" class="w-full h-10">
60
+ </div>
61
+
62
+ <button id="resetBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors">
63
+ Reset Settings
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <script>
71
+ document.addEventListener('DOMContentLoaded', function() {
72
+ const canvas = document.getElementById('glCanvas');
73
+ const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
74
+
75
+ if (!gl) {
76
+ alert('WebGL not supported in your browser');
77
+ return;
78
+ }
79
+
80
+ // Set up controls
81
+ const textInput = document.getElementById('textInput');
82
+ const fontSize = document.getElementById('fontSize');
83
+ const fontSizeValue = document.getElementById('fontSizeValue');
84
+ const textColor = document.getElementById('textColor');
85
+ const resetBtn = document.getElementById('resetBtn');
86
+
87
+ fontSize.addEventListener('input', () => {
88
+ fontSizeValue.textContent = `${fontSize.value}px`;
89
+ updateText();
90
+ });
91
+
92
+ textInput.addEventListener('input', updateText);
93
+ textColor.addEventListener('input', updateUniforms);
94
+
95
+ resetBtn.addEventListener('click', () => {
96
+ textInput.value = 'WebGL';
97
+ fontSize.value = 72;
98
+ fontSizeValue.textContent = '72px';
99
+ textColor.value = '#4299e1';
100
+ updateText();
101
+ updateUniforms();
102
+ });
103
+
104
+ // Vertex shader
105
+ const vsSource = `
106
+ attribute vec2 a_position;
107
+ attribute vec2 a_texCoord;
108
+
109
+ varying vec2 v_texCoord;
110
+
111
+ void main() {
112
+ gl_Position = vec4(a_position, 0, 1);
113
+ v_texCoord = a_texCoord;
114
+ }
115
+ `;
116
+
117
+ // Fragment shader (simplified for basic text rendering)
118
+ const fsSource = `
119
+ precision mediump float;
120
+
121
+ uniform sampler2D u_texture;
122
+ uniform vec3 u_textColor;
123
+
124
+ varying vec2 v_texCoord;
125
+
126
+ void main() {
127
+ vec4 texColor = texture2D(u_texture, v_texCoord);
128
+ gl_FragColor = vec4(u_textColor, texColor.r);
129
+ }
130
+ `;
131
+
132
+ // Compile shader
133
+ function compileShader(gl, source, type) {
134
+ const shader = gl.createShader(type);
135
+ gl.shaderSource(shader, source);
136
+ gl.compileShader(shader);
137
+
138
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
139
+ console.error('Shader compile error:', gl.getShaderInfoLog(shader));
140
+ gl.deleteShader(shader);
141
+ return null;
142
+ }
143
+
144
+ return shader;
145
+ }
146
+
147
+ // Create shader program
148
+ const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
149
+ const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
150
+
151
+ const program = gl.createProgram();
152
+ gl.attachShader(program, vertexShader);
153
+ gl.attachShader(program, fragmentShader);
154
+ gl.linkProgram(program);
155
+
156
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
157
+ console.error('Program link error:', gl.getProgramInfoLog(program));
158
+ return;
159
+ }
160
+
161
+ gl.useProgram(program);
162
+
163
+ // Get attribute and uniform locations
164
+ const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
165
+ const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord');
166
+ const textureUniformLocation = gl.getUniformLocation(program, 'u_texture');
167
+ const textColorUniformLocation = gl.getUniformLocation(program, 'u_textColor');
168
+
169
+ // Create a texture
170
+ const texture = gl.createTexture();
171
+ gl.bindTexture(gl.TEXTURE_2D, texture);
172
+
173
+ // Set texture parameters
174
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
175
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
176
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
177
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
178
+
179
+ // Create buffers for a fullscreen quad
180
+ const positionBuffer = gl.createBuffer();
181
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
182
+
183
+ // Positions for a fullscreen quad
184
+ const positions = [
185
+ -1.0, -1.0,
186
+ 1.0, -1.0,
187
+ -1.0, 1.0,
188
+ 1.0, 1.0,
189
+ ];
190
+
191
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
192
+
193
+ // Texture coordinates buffer
194
+ const texCoordBuffer = gl.createBuffer();
195
+ gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
196
+
197
+ const texCoords = [
198
+ 0.0, 0.0,
199
+ 1.0, 0.0,
200
+ 0.0, 1.0,
201
+ 1.0, 1.0,
202
+ ];
203
+
204
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
205
+
206
+ // Create a temporary canvas for text rendering
207
+ const tempCanvas = document.createElement('canvas');
208
+ const tempCtx = tempCanvas.getContext('2d');
209
+
210
+ // Generate texture from text
211
+ function generateTextTexture(text, size) {
212
+ // Calculate canvas size based on text
213
+ tempCtx.font = `${size}px Arial`;
214
+ const metrics = tempCtx.measureText(text);
215
+ const width = Math.max(128, metrics.width + 20);
216
+ const height = size + 20;
217
+
218
+ tempCanvas.width = width;
219
+ tempCanvas.height = height;
220
+
221
+ // Clear and draw text
222
+ tempCtx.clearRect(0, 0, width, height);
223
+ tempCtx.font = `${size}px Arial`;
224
+ tempCtx.textAlign = 'center';
225
+ tempCtx.textBaseline = 'middle';
226
+ tempCtx.fillStyle = 'white';
227
+ tempCtx.fillText(text, width/2, height/2);
228
+
229
+ // Upload to WebGL texture
230
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tempCanvas);
231
+
232
+ return {
233
+ width: width,
234
+ height: height
235
+ };
236
+ }
237
+
238
+ // Update uniforms
239
+ function updateUniforms() {
240
+ const color = hexToRgb(textColor.value);
241
+ gl.uniform3f(textColorUniformLocation, color.r, color.g, color.b);
242
+ render();
243
+ }
244
+
245
+ // Hex to RGB conversion
246
+ function hexToRgb(hex) {
247
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
248
+ return result ? {
249
+ r: parseInt(result[1], 16) / 255,
250
+ g: parseInt(result[2], 16) / 255,
251
+ b: parseInt(result[3], 16) / 255
252
+ } : { r: 0, g: 0, b: 0 };
253
+ }
254
+
255
+ // Update text
256
+ function updateText() {
257
+ const text = textInput.value || ' ';
258
+ const size = parseInt(fontSize.value);
259
+ generateTextTexture(text, size);
260
+ updateUniforms();
261
+ }
262
+
263
+ // Render function
264
+ function render() {
265
+ gl.clearColor(0.1, 0.1, 0.1, 1.0);
266
+ gl.clear(gl.COLOR_BUFFER_BIT);
267
+
268
+ // Enable position attribute
269
+ gl.enableVertexAttribArray(positionAttributeLocation);
270
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
271
+ gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
272
+
273
+ // Enable texture coordinate attribute
274
+ gl.enableVertexAttribArray(texCoordAttributeLocation);
275
+ gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
276
+ gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);
277
+
278
+ // Draw
279
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
280
+ }
281
+
282
+ // Initial render
283
+ updateText();
284
+
285
+ // Handle window resize
286
+ window.addEventListener('resize', function() {
287
+ const displayWidth = canvas.clientWidth;
288
+ const displayHeight = canvas.clientHeight;
289
+
290
+ if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
291
+ canvas.width = displayWidth;
292
+ canvas.height = displayHeight;
293
+ gl.viewport(0, 0, canvas.width, canvas.height);
294
+ render();
295
+ }
296
+ });
297
+ });
298
+ </script>
299
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=victorqueiroz/webgl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
300
+ </html>
prompts.txt ADDED
File without changes