Skip to content

Commit 2dfbcc2

Browse files
committed
fixed folders
1 parent 3735cd2 commit 2dfbcc2

File tree

2 files changed

+96
-96
lines changed

2 files changed

+96
-96
lines changed

post-cartoon-iv/post.js

Lines changed: 9 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ import {
77
RepeatWrapping,
88
HalfFloatType,
99
RGBAFormat,
10-
UnsignedByteType,
11-
Vector2,
1210
} from "../third_party/three.module.js";
1311
import { ShaderPass } from "../js/ShaderPass.js";
14-
import { ShaderPingPongPass } from "../js/ShaderPingPongPass.js";
1512
import { getFBO } from "../js/FBO.js";
1613
import { shader as orthoVs } from "../shaders/ortho-vs.js";
1714
import { shader as sobel } from "../shaders/sobel.js";
@@ -20,7 +17,6 @@ import { shader as luma } from "../shaders/luma.js";
2017
import { generateParams as generatePaperParams } from "../js/paper.js";
2118
import { shader as darken } from "../shaders/blend-darken.js";
2219
import { shader as screen } from "../shaders/blend-screen.js";
23-
import { blur5 } from "../shaders/fast-separable-gaussian-blur.js";
2420

2521
import {
2622
Material as ColorMaterial,
@@ -34,23 +30,6 @@ const loader = new TextureLoader();
3430
const noiseTexture = loader.load("../assets/noise1.png");
3531
noiseTexture.wrapS = noiseTexture.wrapT = RepeatWrapping;
3632

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-
5433
const componentFragmentShader = `#version 300 es
5534
precision highp float;
5635
@@ -309,7 +288,7 @@ void main() {
309288
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., border*.25 * shade);
310289
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., darkIntensity * (1.-shadeHatch));
311290
fragColor.rgb = blendScreen(fragColor.rgb, brightInk/255., brightIntensity * whiteHatch);
312-
291+
313292
fragColor.a = 1.;
314293
}
315294
`;
@@ -323,15 +302,14 @@ class Post {
323302
this.params = {
324303
roughness: 0.2,
325304
metalness: 0.1,
326-
colorScale: 0.07,
305+
colorScale: 0.25,
327306
colorOffset: 0.25,
328307
colorWidth: 0.5,
329308
scale: 0.32,
330309
angle: 0,
331310
thickness: 0.7,
332311
noisiness: 0.003,
333312
contour: 2,
334-
blur: 2,
335313
border: 0.5,
336314
fill: 1,
337315
stroke: 1,
@@ -340,7 +318,7 @@ class Post {
340318
yellow: 0.6,
341319
black: 0.1,
342320
darkIntensity: 0.75,
343-
brightIntensity: 1,
321+
brightIntensity: 0.25,
344322
darkInk: new Color(30, 30, 30),
345323
brightInk: new Color(230, 230, 230),
346324
};
@@ -358,7 +336,6 @@ class Post {
358336
thickness: { value: this.params.thickness },
359337
contour: { value: this.params.contour },
360338
border: { value: this.params.border },
361-
blur: { value: this.params.blur },
362339
stroke: { value: this.params.stroke },
363340
fill: { value: this.params.fill },
364341
darkIntensity: { value: this.params.darkIntensity },
@@ -369,26 +346,10 @@ class Post {
369346
vertexShader: orthoVs,
370347
fragmentShader,
371348
});
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-
});
388349
this.renderPass = new ShaderPass(renderer, shader);
389350
const componentShader = new RawShaderMaterial({
390351
uniforms: {
391-
colorTexture: { value: null },
352+
colorTexture: { value: this.colorFBO.texture },
392353
cyan: { value: this.params.cyan },
393354
magenta: { value: this.params.magenta },
394355
yellow: { value: this.params.yellow },
@@ -410,8 +371,6 @@ class Post {
410371
this.shadeFBO.setSize(w, h);
411372
this.renderPass.setSize(w, h);
412373
this.componentPass.setSize(w, h);
413-
this.blurPass.setSize(w, h);
414-
this.blurShadePass.setSize(w, h);
415374
}
416375

417376
render(scene, camera) {
@@ -431,46 +390,6 @@ class Post {
431390
this.renderer.setRenderTarget(null);
432391
scene.overrideMaterial = null;
433392

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-
474393
this.componentPass.render();
475394
this.renderPass.render(true);
476395
}
@@ -492,7 +411,11 @@ class Post {
492411
.onChange(async (v) => {
493412
colorMat.uniforms.width.value = v;
494413
});
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+
// });
496419
controllers["scale"] = gui
497420
.add(this.params, "scale", 0.1, 1)
498421
.onChange(async (v) => {
@@ -503,7 +426,6 @@ class Post {
503426
.onChange(async (v) => {
504427
this.renderPass.shader.uniforms.thickness.value = v;
505428
});
506-
controllers["blur"] = gui.add(this.params, "blur", 0, 7);
507429
controllers["contour"] = gui
508430
.add(this.params, "contour", 0, 5)
509431
.onChange(async (v) => {

post-cartoon-v/post.js

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ import {
77
RepeatWrapping,
88
HalfFloatType,
99
RGBAFormat,
10+
UnsignedByteType,
11+
Vector2,
1012
} from "../third_party/three.module.js";
1113
import { ShaderPass } from "../js/ShaderPass.js";
14+
import { ShaderPingPongPass } from "../js/ShaderPingPongPass.js";
1215
import { getFBO } from "../js/FBO.js";
1316
import { shader as orthoVs } from "../shaders/ortho-vs.js";
1417
import { shader as sobel } from "../shaders/sobel.js";
@@ -17,6 +20,7 @@ import { shader as luma } from "../shaders/luma.js";
1720
import { generateParams as generatePaperParams } from "../js/paper.js";
1821
import { shader as darken } from "../shaders/blend-darken.js";
1922
import { shader as screen } from "../shaders/blend-screen.js";
23+
import { blur5 } from "../shaders/fast-separable-gaussian-blur.js";
2024

2125
import {
2226
Material as ColorMaterial,
@@ -30,6 +34,23 @@ const loader = new TextureLoader();
3034
const noiseTexture = loader.load("../assets/noise1.png");
3135
noiseTexture.wrapS = noiseTexture.wrapT = RepeatWrapping;
3236

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+
3354
const componentFragmentShader = `#version 300 es
3455
precision highp float;
3556
@@ -288,7 +309,7 @@ void main() {
288309
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., border*.25 * shade);
289310
fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., darkIntensity * (1.-shadeHatch));
290311
fragColor.rgb = blendScreen(fragColor.rgb, brightInk/255., brightIntensity * whiteHatch);
291-
312+
292313
fragColor.a = 1.;
293314
}
294315
`;
@@ -302,14 +323,15 @@ class Post {
302323
this.params = {
303324
roughness: 0.2,
304325
metalness: 0.1,
305-
colorScale: 0.25,
326+
colorScale: 0.07,
306327
colorOffset: 0.25,
307328
colorWidth: 0.5,
308329
scale: 0.32,
309330
angle: 0,
310331
thickness: 0.7,
311332
noisiness: 0.003,
312333
contour: 2,
334+
blur: 2,
313335
border: 0.5,
314336
fill: 1,
315337
stroke: 1,
@@ -318,7 +340,7 @@ class Post {
318340
yellow: 0.6,
319341
black: 0.1,
320342
darkIntensity: 0.75,
321-
brightIntensity: 0.25,
343+
brightIntensity: 1,
322344
darkInk: new Color(30, 30, 30),
323345
brightInk: new Color(230, 230, 230),
324346
};
@@ -336,6 +358,7 @@ class Post {
336358
thickness: { value: this.params.thickness },
337359
contour: { value: this.params.contour },
338360
border: { value: this.params.border },
361+
blur: { value: this.params.blur },
339362
stroke: { value: this.params.stroke },
340363
fill: { value: this.params.fill },
341364
darkIntensity: { value: this.params.darkIntensity },
@@ -346,10 +369,26 @@ class Post {
346369
vertexShader: orthoVs,
347370
fragmentShader,
348371
});
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+
});
349388
this.renderPass = new ShaderPass(renderer, shader);
350389
const componentShader = new RawShaderMaterial({
351390
uniforms: {
352-
colorTexture: { value: this.colorFBO.texture },
391+
colorTexture: { value: null },
353392
cyan: { value: this.params.cyan },
354393
magenta: { value: this.params.magenta },
355394
yellow: { value: this.params.yellow },
@@ -371,6 +410,8 @@ class Post {
371410
this.shadeFBO.setSize(w, h);
372411
this.renderPass.setSize(w, h);
373412
this.componentPass.setSize(w, h);
413+
this.blurPass.setSize(w, h);
414+
this.blurShadePass.setSize(w, h);
374415
}
375416

376417
render(scene, camera) {
@@ -390,6 +431,46 @@ class Post {
390431
this.renderer.setRenderTarget(null);
391432
scene.overrideMaterial = null;
392433

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+
393474
this.componentPass.render();
394475
this.renderPass.render(true);
395476
}
@@ -411,11 +492,7 @@ class Post {
411492
.onChange(async (v) => {
412493
colorMat.uniforms.width.value = v;
413494
});
414-
// controllers["metalness"] = gui
415-
// .add(this.params, "metalness", 0., 1)
416-
// .onChange(async (v) => {
417-
// this.renderPass.shader.uniforms.metalness.value = v;
418-
// });
495+
419496
controllers["scale"] = gui
420497
.add(this.params, "scale", 0.1, 1)
421498
.onChange(async (v) => {
@@ -426,6 +503,7 @@ class Post {
426503
.onChange(async (v) => {
427504
this.renderPass.shader.uniforms.thickness.value = v;
428505
});
506+
controllers["blur"] = gui.add(this.params, "blur", 0, 7);
429507
controllers["contour"] = gui
430508
.add(this.params, "contour", 0, 5)
431509
.onChange(async (v) => {

0 commit comments

Comments
 (0)