[three.js] Mixer des filtres sur une image

Bonjour,
J'essaye d'appliquer de multiple filtre successif sur une image. La librairie que j'utilise pour le WebGL est Three.js

J'arrive bien à appliquer un seul filtre à la fois sur une image ( sepia, contrast, luminosité). mais je n'arrive pas à appliquer plusieurs filtre en même temps. Par exemple, sepia + luminosité.

Voici mon code actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
var Simply = Simply || {};
 
Simply.WebGlEffect = function() {
    this.FOV = 75, this.NEAR = 0.1, this.FAR = 1000;
    this.width;
    this.height;
 
    var scene = new THREE.Scene();
    var camera;
    var renderer;
    var composer;
    var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    document.body.appendChild( stats.domElement );
 
    this.getScene = function() {
        return scene;
    };
 
    this.getCamera = function() {
        return camera;
    };
 
    this.setCamera = function(newCamera) {
        camera = newCamera;
    };
 
    this.getRenderer = function() {
        return renderer;
    }
 
    this.setRenderer = function(newRenderer) {
        renderer = newRenderer;
    }
 
    this.getComposer = function() {
        return composer;
    }
 
    this.setComposer = function(newComposer) {
        composer = newComposer;
    }
 
    this.getStats = function() {
        return stats;
    }
};
 
/**
 * Initialise le renderer, la scene, la camera, charge une texture, un composer et lance l'affichage.
 * @param canvas Le canvas à manipuler.
 */
Simply.WebGlEffect.prototype.init = function(canvas) {
    this.width = canvas.width;
    this.height = canvas.height;
    this.setCamera(new THREE.PerspectiveCamera(
        this.FOV, 
        this.width/this.height,
        this.NEAR, 
        this.FAR
    ));
    this.getCamera().position.z = 100;
    this.setRenderer(new THREE.WebGLRenderer({
        'canvas' : canvas,
        'precision' : 'highp',
        'antialias' : true
    }));
 
    this.loadTexture("img/plage.jpeg");
    this.addComposer();
    this.draw();
};
 
/**
 * Effectue le rendu de la scene sur le canvas.
 */
Simply.WebGlEffect.prototype.draw = function() {
    requestAnimationFrame(this.draw.bind(this)); 
    this.getStats().update();
    this.getComposer().render();
};
 
/**
 * Charge une texture en fonction d'une image.
 * @param img L'url de l'image.
 */
Simply.WebGlEffect.prototype.loadTexture = function(img) {
    var backgroundTexture = new THREE.ImageUtils.loadTexture(img, undefined, this.textureOnLoad, this.textureOnError);
    var backgroundMaterial = new THREE.MeshBasicMaterial( { map: backgroundTexture, side: THREE.DoubleSide } );
    var backgroundGeometry = new THREE.PlaneGeometry(this.width, this.height, 1, 1);
    var background = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
    this.getScene().add(background);
};
 
/**
 * Controle du chargement de l'image.
 */
Simply.WebGlEffect.prototype.textureOnLoad = function() {
    console.log("load");
};
 
/**
 * Erreur lors du chargement de l'image.
 * @param error
 */
Simply.WebGlEffect.prototype.textureOnError = function(error) {
    console.log("Error :" + error);
};
 
/**
 * Ajoute un composer à la scene permettant d'appliquer des filtres.
 */
Simply.WebGlEffect.prototype.addComposer = function() {
    this.setComposer(new THREE.EffectComposer(this.getRenderer()));
    this.getComposer().addPass(new THREE.RenderPass(this.getScene(), this.getCamera()));
};
 
/**
 * Ajoute un filtre sepia au composer
 * @param intensity L'intensité du filtre sepia
 */
Simply.WebGlEffect.prototype.sepia = function(intensity) {
    var shaderSepia = THREE.SepiaShader;
    var effectSepia = new THREE.ShaderPass(shaderSepia);
    effectSepia.uniforms["amount"].value = intensity;
    effectSepia.renderToScreen = true;
    this.getComposer().addPass(effectSepia);
};
 
/**
 * Ajoute un filtre de luminosité au composer
 * @param intensity L'intensité voulu
 */
Simply.WebGlEffect.prototype.brightnessContrast = function(intensity) {
    var brightnessContrastSepia = THREE.BrightnessContrastShader;
    var effectBrightnessContrast = new THREE.ShaderPass(brightnessContrastSepia);
    effectBrightnessContrast.uniforms["brightness"].value = intensity;
    effectBrightnessContrast.renderToScreen = true;
    this.getComposer().addPass(effectBrightnessContrast);
};
 
 
var webGlEffect = new Simply.WebGlEffect();
webGlEffect.init(document.getElementById("canvas"));
webGlEffect.brightnessContrast(0.2);
webGlEffect.sepia(0.9);

Avec cela, j'obtiens un fond noir dans mon canvas quand je mixe les deux effets. Quelqu'un à une idée pour me dépanner?

[EDIT]: Je viens de trouver la solution. Le paramètre

Citation:

renderToScreen = true;

ne doit être appliquer qu'une seul fois et sur le dernier filtre appliqué.