Skip to content

Commit 5189fec

Browse files
cabbibocabbibo
committed
a few more examples made
1 parent 69c916c commit 5189fec

29 files changed

+1970
-365
lines changed

‎TextParticles.js

Lines changed: 34 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
this.texture = this.font.texture;
1414

15-
this.letterWidth = params.letterWidth || .02;
15+
this.letterWidth = params.letterWidth || 2.;
1616
this.lineLength = params.lineLength || 50;
1717

1818
this.lineHeight = this.letterWidth * 2.4;
@@ -31,7 +31,6 @@
3131

3232
var particles = this.createParticles( string );
3333
var lookup = this.createLookupTexture( particles );
34-
// var textCoord = this.createTextCoordTexture( particles );
3534
var geometry = this.createGeometry( particles , true );
3635

3736
var material = this.createMaterial( lookup , params );
@@ -43,15 +42,8 @@
4342

4443
particleSystem.size = lookup.size;
4544
particleSystem.lookup = lookup;
46-
particleSystem.debug = new THREE.Mesh(
47-
new THREE.PlaneBufferGeometry( 1 , 1 ) ,
48-
new THREE.MeshBasicMaterial({
49-
map: lookup
50-
})
51-
);
52-
45+
5346
var lines = Math.ceil( particles.length / this.lineLength );
54-
5547

5648
particleSystem.totalWidth = this.width;
5749
particleSystem.totalHeight = lines * this.lineHeight;
@@ -100,7 +92,6 @@
10092
// Makes sure we don't go over line width
10193
var newL = counter[0] + l;
10294
if( newL > this.lineLength ){
103-
console.log( 'new line');
10495
counter[0] = 0;
10596
counter[1] ++;
10697
}
@@ -139,38 +130,22 @@
139130

140131
var data = new Float32Array( size * size * 4 );
141132

142-
console.log( this.letterWidth );
143-
144-
console.log( size );
145-
146-
for( var i = 0; i < particles.length; i++ ){
147-
var p1 = particles[i]
148-
for( var j = i+1; j < particles.length; j++ ){
149-
var p2 = particles[j];
150-
151-
if( p1[1] == p2[1] && p1[2] == p2[2] ){
152-
console.log( 'WTF' );
153-
console.log( p1 );
154-
console.log( p2 );
155-
}
156-
157-
}
158-
}
133+
159134
for( var i = 0; i < size * size; i++ ){
160135

161136
if( particles[i] ){
162137

163-
164-
data[ i * 4 + 0 ] = particles[i][1] * this.letterWidth * .8;
138+
data[ i * 4 + 0 ] = particles[i][1] * this.letterWidth;
165139
data[ i * 4 + 1 ] = -particles[i][2] * this.lineHeight;
166140

167-
data[ i * 4 + 2 ] = 0; // packing in textCoord
168-
data[ i * 4 + 3 ] = 0; // just cuz!
141+
data[ i * 4 + 2 ] = 0;
142+
data[ i * 4 + 3 ] = 0;
169143

170144
}
171145

172146
}
173147

148+
174149
var f = THREE.RGBAFormat;
175150
var t = THREE.FloatType;
176151

@@ -196,23 +171,20 @@
196171
var uvs = new Float32Array( particles.length * 3 * 2 * 2 );
197172
var ids = new Float32Array( particles.length * 3 * 2 * 1 );
198173
var textCoords = new Float32Array( particles.length * 3 * 2 * 4 );
199-
var textOffsets = new Float32Array( particles.length * 3 * 2 * 2 );
200174
var lookups = new Float32Array( particles.length * 3 * 2 * 2 );
201175

202176

203177
var uvA = new THREE.BufferAttribute( uvs , 2 );
204178
var idA = new THREE.BufferAttribute( ids , 1 );
205179
var posA = new THREE.BufferAttribute( positions , 3 );
206180
var coordA = new THREE.BufferAttribute( textCoords , 4 );
207-
var offsetA = new THREE.BufferAttribute( textOffsets , 2 );
208181
var lookupA = new THREE.BufferAttribute( lookups , 2 );
209182

210183
geometry.addAttribute( 'id' , idA );
211184
geometry.addAttribute( 'uv' , uvA );
212185
geometry.addAttribute( 'lookup' , lookupA );
213186
geometry.addAttribute( 'position' , posA );
214187
geometry.addAttribute( 'textCoord' , coordA );
215-
geometry.addAttribute( 'textOffset' , offsetA );
216188

217189
var lookupWidth = Math.ceil( Math.sqrt( particles.length ) );
218190

@@ -236,13 +208,6 @@
236208
// top is y offset + height
237209
var t = tc[5] ;
238210

239-
240-
241-
/*var l = -1 * .04;
242-
var r = 1 * .04;
243-
var t = 1 * .04;
244-
var b = -1 * .04;*/
245-
246211
ids[ index + 0 ] = i;
247212
ids[ index + 1 ] = i;
248213
ids[ index + 2 ] = i;
@@ -303,7 +268,6 @@
303268
x += .5;
304269
y += .5;
305270

306-
307271
lookups[ index * 2 + 0 ] = x / lookupWidth;
308272
lookups[ index * 2 + 1 ] = y / lookupWidth;
309273

@@ -354,25 +318,6 @@
354318
textCoords[ index * 4 + 22 ] = tc[2];
355319
textCoords[ index * 4 + 23 ] = tc[3];
356320

357-
358-
textOffsets[ index * 2 + 0 ] = tc[4];
359-
textOffsets[ index * 2 + 1 ] = tc[5];
360-
361-
textOffsets[ index * 2 + 2 ] = tc[4];
362-
textOffsets[ index * 2 + 3 ] = tc[5];
363-
364-
textOffsets[ index * 2 + 4 ] = tc[4];
365-
textOffsets[ index * 2 + 5 ] = tc[5];
366-
367-
textOffsets[ index * 2 + 6 ] = tc[4];
368-
textOffsets[ index * 2 + 7 ] = tc[5];
369-
370-
textOffsets[ index * 2 + 8 ] = tc[4];
371-
textOffsets[ index * 2 + 9 ] = tc[5];
372-
373-
textOffsets[ index * 2 + 10 ] = tc[4];
374-
textOffsets[ index * 2 + 11 ] = tc[5];
375-
376321
}
377322

378323
return geometry;
@@ -440,69 +385,70 @@
440385
*/
441386
TextParticles.prototype.createMaterial = function( lookup , params ){
442387

443-
var params = params || {};
444-
var dpr = window.devicePixelRatio || 1;
388+
var params = params || {};
445389

446390
var texture = params.texture || this.texture;
447391
var lookup = params.lookup || lookup;
448392
var color = params.color || this.color;
449-
var letterWidth = params.letterWidth || this.letterWidth ;
450393
var opacity = params.opacity || 1;
451-
var side = params.side || THREE.DoubleSide;
452394

453395
var attributes = {
396+
397+
id: { type:"f" , value: null },
398+
lookup: { type:"v2" , value: null },
454399
textCoord: { type:"v4" , value: null },
455-
textOffset: { type:"v2" , value: null },
456-
lookup: { type:"v2" , value: null },
457-
id: { type:"f" , value: null },
400+
458401
}
459402

460403

461404
var c = new THREE.Color( color );
462405

463-
var windowSize = new THREE.Vector2( window.innerWidth , window.innerHeight );
464-
465-
var glyphWidth = this.font.glyphWidth / 1024;
466-
var glyphHeight = this.font.glyphHeight / 1024;
467-
var glyphBelow = this.font.glyphBelow / 1024;
468406

469407
var uniforms = {
408+
409+
color: { type:"c" , value: c },
470410

471-
dpr: { type:"f" , value: dpr },
472411
t_lookup: { type:"t" , value: lookup },
473412
t_text: { type:"t" , value: texture },
474-
color: { type:"c" , value: c },
475-
textureSize: { type:"f" , value: lookup.size },
476-
windowSize: { type:"v2" , value: windowSize },
477-
letterWidth: { type:"f" , value: letterWidth },
478413
opacity: { type:"f" , value: opacity },
479-
glyphWidth: { type:"f" , value: glyphWidth },
480-
glyphHeight: { type:"f" , value: glyphHeight },
481-
glyphBelow: { type:"f" , value: glyphBelow },
482-
414+
415+
//time: { type:"f" ,value : 1}
416+
483417
}
418+
419+
420+
if( params.uniforms ){
421+
for( var propt in params.uniforms ){
422+
console.log( params.uniforms );
423+
uniforms[ propt ] = params.uniforms[ propt ];
424+
}
425+
}
426+
427+
console.log( uniforms );
428+
429+
var attr = attributes;
484430

485431
var vert = this.vertexShader;
486432
var frag = this.fragmentShader;
487-
var attr = attributes;
488433

489434
var blend = params.blending || THREE.AdditiveBlending;
490435
var depth = params.depthWrite || false;
491436
var trans = params.transparent || true;
437+
var side = params.side || THREE.DoubleSide;
492438

493-
material = new THREE.ShaderMaterial({
439+
var material = new THREE.ShaderMaterial({
440+
441+
attributes: attr,
494442

495443
uniforms: uniforms,
496-
attributes: attr,
444+
497445
vertexShader: vert,
498446
fragmentShader: frag,
499447

500448
transparent: trans,
501449
depthWrite: depth,
502450
blending: blend,
503451

504-
// side: side
505-
506452
});
507453

508454

‎shaders/.fs-text.glsl.swp renamed to ‎examples/fade/.index.html.swn

12 KB
Binary file not shown.

‎examples/fade/index.html

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<html>
2+
3+
<head>
4+
<style>
5+
body{ margin: 0px; }
6+
html{ overflow: hidden }
7+
</style>
8+
</head>
9+
10+
<body>
11+
12+
<script src="../../lib/three.min.js"> </script>
13+
<script src="../../lib/jquery.min.js"> </script>
14+
<script src="../../lib/ShaderLoader.js"> </script>
15+
16+
<script src="../../lib/ScrollControls.js"> </script>
17+
18+
<script src="../../fonts/PTMono.js"> </script>
19+
<script src="../../TextParticles.js"> </script>
20+
21+
<script src="../../passage.js"> </script>
22+
23+
<script>
24+
25+
var T = THREE;
26+
27+
28+
var camera, renderer, scene , controls , clock;
29+
30+
var textParticles;
31+
32+
33+
var time = { type:"f" , value: 1 }
34+
var shaders = new ShaderLoader( 'shaders' );
35+
36+
shaders.shaderSetLoaded = function(){
37+
init();
38+
animate();
39+
}
40+
41+
shaders.load( 'vs-text' , 'text' , 'vertex' );
42+
shaders.load( 'fs-text' , 'text' , 'fragment' );
43+
44+
function init(){
45+
46+
var w = window.innerWidth;
47+
var h = window.innerHeight;
48+
49+
camera = new THREE.PerspectiveCamera( 65 , w/h , .001 , 4 );
50+
camera.position.z = 1;
51+
52+
controls = new ScrollControls( camera );
53+
54+
clock = new THREE.Clock();
55+
56+
scene = new THREE.Scene();
57+
58+
59+
var dpr = window.devicePixelRatio || 1;
60+
renderer = new THREE.WebGLRenderer();
61+
renderer.setPixelRatio( dpr );
62+
renderer.setSize( window.innerWidth, window.innerHeight );
63+
64+
document.body.appendChild( renderer.domElement );
65+
66+
67+
68+
var font = PTMono( '../../fonts/PTMono.png' );
69+
70+
var vs = shaders.vertexShaders.text;
71+
var fs = shaders.fragmentShaders.text;
72+
73+
74+
title = new TextParticles( "Less Boring, But Still Boring" , font , vs , fs , {
75+
letterWidth: .05,
76+
lineLength: 29,
77+
uniforms:{
78+
time: time,
79+
}
80+
});
81+
82+
83+
title.position.x = -title.totalWidth / 2;
84+
// title.position.z = -.2;
85+
title.position.y = .3;
86+
87+
88+
89+
90+
// Passage comes from seperate file
91+
textParticles = new TextParticles( passage , font , vs , fs , {
92+
letterWidth: .02,
93+
lineLength: 80,
94+
uniforms:{
95+
time: time,
96+
}
97+
});
98+
99+
scene.add( textParticles );
100+
scene.add( title );
101+
102+
//textParticles.material.uniforms.time.value = 1.;
103+
104+
textParticles.position.x = - textParticles.totalWidth / 2;
105+
106+
controls.minPos = -textParticles.totalHeight * 1.8;
107+
controls.maxPos = 0;
108+
controls.multiplier = .000003 * textParticles.totalHeight;
109+
controls.dampening = .95;
110+
111+
window.addEventListener( 'resize', onWindowResize, false );
112+
113+
}
114+
115+
116+
function animate(){
117+
118+
requestAnimationFrame( animate );
119+
120+
time.value += clock.getDelta();
121+
122+
controls.update();
123+
renderer.render( scene , camera );
124+
125+
}
126+
127+
128+
function onWindowResize() {
129+
130+
camera.aspect = window.innerWidth / window.innerHeight;
131+
camera.updateProjectionMatrix();
132+
133+
renderer.setSize( window.innerWidth, window.innerHeight );
134+
135+
}
136+
137+
</script>
138+
139+
</body>
140+
</html>

‎examples/slide/shaders/.fs-text.glsl.swn renamed to ‎examples/fade/shaders/.fs-text.glsl.swn

12 KB
Binary file not shown.

‎shaders/.vs-text.glsl.swp renamed to ‎examples/fade/shaders/.vs-text.glsl.swn

12 KB
Binary file not shown.

0 commit comments

Comments
 (0)