J'essaye de faire une scène THREE.JS avec des shaders GLSL appliqués, mais j'ai du mal à trouver comment charger mes shaders. La scène semble fonctionner, mais les shaders ne font pas ce qu'ils sont censés faire. J'utilise une fonction shader loader que j'ai trouvé qui utilise THREE.JS pur au lieu de AJAX ou Jquery.Charger des shaders externes en utilisant THREE.JS
Voici le javascript principal pour ma scène.
var container,
\t renderer,
\t scene,
\t camera,
\t light,
\t mesh,
\t controls,
\t start = Date.now(),
\t fov = 30;
window.addEventListener('load', function() {
\t container = document.getElementById("container");
\t if(!Detector.webgl) {
\t \t Detector.addGetWebGLMessage(container);
\t \t return;
\t }
\t //get the width and height
\t var WIDTH = window.innerWidth,
\t \t HEIGHT = window.innerHeight;
\t //sphere params
\t var radius = 20,
\t \t segments = 4,
\t \t rotation = 6;
\t scene = new THREE.Scene();
\t // \t \t \t \t \t \t \t \t \t \t \t ASPECT RATIO
\t camera = new THREE.PerspectiveCamera(fov, WIDTH/HEIGHT, 1, 10000);
\t camera.position.z = 100;
\t scene.add(new THREE.AmbientLight(0x333333));
\t light = new THREE.DirectionalLight(0xffffff, 1);
\t light.position.set(100, 3, 5);
\t scene.add(light);
\t ;
\t
\t ShaderLoader('./shaders/vertex.vert', './shaders/fragment.frag')
\t
\t material = new THREE.ShaderMaterial({
\t \t \t uniforms: {
\t \t \t \t tExplosion: {
\t \t \t \t \t type: "t",
\t \t \t \t \t value: THREE.ImageUtils.loadTexture('images/explosion.png')
\t \t \t \t },
\t \t \t \t time: { \t //float initialized to 0
\t \t \t \t \t type: "f",
\t \t \t \t \t value: 0.0
\t \t \t \t }
\t \t \t },
\t \t \t vertexShader: ShaderLoader.vertex_text,
\t \t \t fragmentShader: ShaderLoader.fragment_text
\t });
\t mesh = new THREE.Mesh(
\t \t new THREE.IcosahedronGeometry(radius, segments),
\t \t material
\t \t);
\t scene.add(mesh);
\t renderer = new THREE.WebGLRenderer();
\t renderer.setSize(WIDTH, HEIGHT);
\t renderer.setPixelRatio(window.devicePixelRatio);
\t
\t //update renderer size, aspect ratio, and projectionmatrix, on resize
\t window.addEventListener('resize', function() {
\t \t var WIDTH = window.innerWidth,
\t \t \t HEIGHT = window.innerHeight;
\t \t renderer.setSize(WIDTH, HEIGHT);
\t \t camera.aspect = WIDTH/HEIGHT;
\t \t camera.updateProjectionMatrix();
\t });
\t
\t controls = new THREE.TrackballControls(camera);
\t container.appendChild(renderer.domElement);
\t render();
});
function render() { \t
\t \t material.uniforms[ 'time' ].value = .00025 * (Date.now() - start);
\t \t controls.update();
\t \t requestAnimationFrame(render);
\t \t renderer.render(scene, camera);
}
// This is a basic asyncronous shader loader for THREE.js.
function ShaderLoader(vertex_url, fragment_url, onLoad, onProgress, onError) {
var vertex_loader = new THREE.XHRLoader(THREE.DefaultLoadingManager);
vertex_loader.setResponseType('text');
vertex_loader.load(vertex_url, function (vertex_text) {
var fragment_loader = new THREE.XHRLoader(THREE.DefaultLoadingManager);
fragment_loader.setResponseType('text');
fragment_loader.load(fragment_url, function (fragment_text) {
onLoad(vertex_text, fragment_text);
});
}, onProgress, onError);
}
\tMais quand mes charges de la scène, il est juste une sphère rouge sans éclairage ou ... Qu'est-ce que les shaders appliqués que je fais mal? Je suis nouveau à tout cela donc c'est probablement quelque chose de facilement perceptible pour quelqu'un de plus expérimenté, mais j'ai cherché et cherché et expérimenté et ne peux pas le comprendre.
Merci!
Oui J'inclue toutes les bibliothèques nécessaires, car le chargeur de shader n'utilise que trois.js. tout le reste fonctionne, ne chargeant pas les shaders correctement. La scène ne ressemble pas à la fonction de bruit que j'ai dans mon vertex shader – shitwithcolors