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); |
Partager