@@ -7,11 +7,8 @@ import {
7
7
RepeatWrapping ,
8
8
HalfFloatType ,
9
9
RGBAFormat ,
10
- UnsignedByteType ,
11
- Vector2 ,
12
10
} from "../third_party/three.module.js" ;
13
11
import { ShaderPass } from "../js/ShaderPass.js" ;
14
- import { ShaderPingPongPass } from "../js/ShaderPingPongPass.js" ;
15
12
import { getFBO } from "../js/FBO.js" ;
16
13
import { shader as orthoVs } from "../shaders/ortho-vs.js" ;
17
14
import { shader as sobel } from "../shaders/sobel.js" ;
@@ -20,7 +17,6 @@ import { shader as luma } from "../shaders/luma.js";
20
17
import { generateParams as generatePaperParams } from "../js/paper.js" ;
21
18
import { shader as darken } from "../shaders/blend-darken.js" ;
22
19
import { shader as screen } from "../shaders/blend-screen.js" ;
23
- import { blur5 } from "../shaders/fast-separable-gaussian-blur.js" ;
24
20
25
21
import {
26
22
Material as ColorMaterial ,
@@ -34,23 +30,6 @@ const loader = new TextureLoader();
34
30
const noiseTexture = loader . load ( "../assets/noise1.png" ) ;
35
31
noiseTexture . wrapS = noiseTexture . wrapT = RepeatWrapping ;
36
32
37
- const blurFragmentShader = `#version 300 es
38
- precision highp float;
39
-
40
- uniform sampler2D inputTexture;
41
- uniform vec2 direction;
42
-
43
- ${ blur5 }
44
-
45
- in vec2 vUv;
46
- out vec4 fragColor;
47
-
48
- void main() {
49
- vec2 size = vec2(textureSize(inputTexture, 0));
50
- fragColor = blur5(inputTexture, vUv, size, direction);
51
- }
52
- ` ;
53
-
54
33
const componentFragmentShader = `#version 300 es
55
34
precision highp float;
56
35
@@ -309,7 +288,7 @@ void main() {
309
288
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., border*.25 * shade);
310
289
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., darkIntensity * (1.-shadeHatch));
311
290
fragColor.rgb = blendScreen(fragColor.rgb, brightInk/255., brightIntensity * whiteHatch);
312
-
291
+
313
292
fragColor.a = 1.;
314
293
}
315
294
` ;
@@ -323,15 +302,14 @@ class Post {
323
302
this . params = {
324
303
roughness : 0.2 ,
325
304
metalness : 0.1 ,
326
- colorScale : 0.07 ,
305
+ colorScale : 0.25 ,
327
306
colorOffset : 0.25 ,
328
307
colorWidth : 0.5 ,
329
308
scale : 0.32 ,
330
309
angle : 0 ,
331
310
thickness : 0.7 ,
332
311
noisiness : 0.003 ,
333
312
contour : 2 ,
334
- blur : 2 ,
335
313
border : 0.5 ,
336
314
fill : 1 ,
337
315
stroke : 1 ,
@@ -340,7 +318,7 @@ class Post {
340
318
yellow : 0.6 ,
341
319
black : 0.1 ,
342
320
darkIntensity : 0.75 ,
343
- brightIntensity : 1 ,
321
+ brightIntensity : 0.25 ,
344
322
darkInk : new Color ( 30 , 30 , 30 ) ,
345
323
brightInk : new Color ( 230 , 230 , 230 ) ,
346
324
} ;
@@ -358,7 +336,6 @@ class Post {
358
336
thickness : { value : this . params . thickness } ,
359
337
contour : { value : this . params . contour } ,
360
338
border : { value : this . params . border } ,
361
- blur : { value : this . params . blur } ,
362
339
stroke : { value : this . params . stroke } ,
363
340
fill : { value : this . params . fill } ,
364
341
darkIntensity : { value : this . params . darkIntensity } ,
@@ -369,26 +346,10 @@ class Post {
369
346
vertexShader : orthoVs ,
370
347
fragmentShader,
371
348
} ) ;
372
- const blurShader = new RawShaderMaterial ( {
373
- uniforms : {
374
- inputTexture : { value : this . colorFBO . texture } ,
375
- direction : { value : new Vector2 ( ) } ,
376
- } ,
377
- vertexShader : orthoVs ,
378
- fragmentShader : blurFragmentShader ,
379
- } ) ;
380
- this . blurPass = new ShaderPingPongPass ( renderer , blurShader , {
381
- format : RGBAFormat ,
382
- type : UnsignedByteType ,
383
- } ) ;
384
- this . blurShadePass = new ShaderPingPongPass ( renderer , blurShader , {
385
- format : RGBAFormat ,
386
- type : UnsignedByteType ,
387
- } ) ;
388
349
this . renderPass = new ShaderPass ( renderer , shader ) ;
389
350
const componentShader = new RawShaderMaterial ( {
390
351
uniforms : {
391
- colorTexture : { value : null } ,
352
+ colorTexture : { value : this . colorFBO . texture } ,
392
353
cyan : { value : this . params . cyan } ,
393
354
magenta : { value : this . params . magenta } ,
394
355
yellow : { value : this . params . yellow } ,
@@ -410,8 +371,6 @@ class Post {
410
371
this . shadeFBO . setSize ( w , h ) ;
411
372
this . renderPass . setSize ( w , h ) ;
412
373
this . componentPass . setSize ( w , h ) ;
413
- this . blurPass . setSize ( w , h ) ;
414
- this . blurShadePass . setSize ( w , h ) ;
415
374
}
416
375
417
376
render ( scene , camera ) {
@@ -431,46 +390,6 @@ class Post {
431
390
this . renderer . setRenderTarget ( null ) ;
432
391
scene . overrideMaterial = null ;
433
392
434
- this . blurPass . shader . uniforms . inputTexture . value = this . colorFBO . texture ;
435
- for ( let i = 0 ; i < 6 ; i ++ ) {
436
- if ( i < this . params . blur ) {
437
- var d = ( i + 1 ) * 2 ;
438
- this . blurPass . shader . uniforms . direction . value . set ( d , 0 ) ;
439
- this . blurPass . render ( ) ;
440
- this . blurPass . shader . uniforms . inputTexture . value = this . blurPass . fbos [
441
- this . blurPass . currentFBO
442
- ] . texture ;
443
- this . blurPass . shader . uniforms . direction . value . set ( 0 , d ) ;
444
- this . blurPass . render ( ) ;
445
- this . blurPass . shader . uniforms . inputTexture . value = this . blurPass . fbos [
446
- this . blurPass . currentFBO
447
- ] . texture ;
448
- }
449
- }
450
- this . componentPass . shader . uniforms . colorTexture . value = this . blurPass . shader . uniforms . inputTexture . value = this . blurPass . fbos [
451
- this . blurPass . currentFBO
452
- ] . texture ;
453
-
454
- this . blurShadePass . shader . uniforms . inputTexture . value = this . shadeFBO . texture ;
455
- for ( let i = 0 ; i < 6 ; i ++ ) {
456
- if ( i < this . params . blur ) {
457
- var d = ( i + 1 ) * 2 ;
458
- this . blurShadePass . shader . uniforms . direction . value . set ( d , 0 ) ;
459
- this . blurShadePass . render ( ) ;
460
- this . blurShadePass . shader . uniforms . inputTexture . value = this . blurShadePass . fbos [
461
- this . blurShadePass . currentFBO
462
- ] . texture ;
463
- this . blurShadePass . shader . uniforms . direction . value . set ( 0 , d ) ;
464
- this . blurShadePass . render ( ) ;
465
- this . blurShadePass . shader . uniforms . inputTexture . value = this . blurShadePass . fbos [
466
- this . blurShadePass . currentFBO
467
- ] . texture ;
468
- }
469
- }
470
- this . renderPass . shader . uniforms . shadeTexture . value = this . blurShadePass . shader . uniforms . inputTexture . value = this . blurShadePass . fbos [
471
- this . blurShadePass . currentFBO
472
- ] . texture ;
473
-
474
393
this . componentPass . render ( ) ;
475
394
this . renderPass . render ( true ) ;
476
395
}
@@ -492,7 +411,11 @@ class Post {
492
411
. onChange ( async ( v ) => {
493
412
colorMat . uniforms . width . value = v ;
494
413
} ) ;
495
-
414
+ // controllers["metalness"] = gui
415
+ // .add(this.params, "metalness", 0., 1)
416
+ // .onChange(async (v) => {
417
+ // this.renderPass.shader.uniforms.metalness.value = v;
418
+ // });
496
419
controllers [ "scale" ] = gui
497
420
. add ( this . params , "scale" , 0.1 , 1 )
498
421
. onChange ( async ( v ) => {
@@ -503,7 +426,6 @@ class Post {
503
426
. onChange ( async ( v ) => {
504
427
this . renderPass . shader . uniforms . thickness . value = v ;
505
428
} ) ;
506
- controllers [ "blur" ] = gui . add ( this . params , "blur" , 0 , 7 ) ;
507
429
controllers [ "contour" ] = gui
508
430
. add ( this . params , "contour" , 0 , 5 )
509
431
. onChange ( async ( v ) => {
0 commit comments