Share
Les graphiques 3D dans le navigateur sont un sujet d’intérêt depuis son introduction. Toutefois, si vous deviez créer vos applications à l'aide de l'ancien WebGL, cela prendrait des siècles. Récemment, certaines bibliothèques vraiment utiles sont devenues disponibles. Three.js est l’un des plus populaires. Dans cette série, je vais vous montrer comment en tirer le meilleur parti afin de créer de superbes expériences 3D pour vos utilisateurs..
Je m'attends à ce que vous ayez une connaissance de base de l'espace 3D avant de commencer à lire ce tutoriel, car je ne vais pas expliquer des choses telles que des coordonnées, des vecteurs, etc..
Si vous savez déjà ce que sont les shaders, vous pouvez ignorer cette étape. Les shaders sont essentiellement des programmes écrits en GLSL (Graphics Layer Scripting Language), exécutés sur le GPU. Cela les rend extrêmement utiles, car nous pouvons utiliser du processeur et le placer sur le GPU pour améliorer les performances. Il en existe deux sortes: les shaders de vertex et de fragment. Les vertex shaders sont utilisés pour modifier la structure de l'objet (déplacer les sommets), et les fragment shaders modifient les pixels dessinés..
Nous allons commencer par le plus simple. Ce shader modifiera le placement des vecteurs dans le maillage, ce qui entraînera le déplacement des faces. Insérer ce code dans de votre application:
le type L'attribut de ce script ne sera pas compris par le navigateur, il ne sera donc pas exécuté (nous transmettrons son contenu au matériel Three.js plus tard). Dans les deux premières lignes, nous définissons deux variables. Le premier est uniforme temps de flottaison. Les uniformes sont transmis aux shaders de vertex et de fragment. Ensuite, il y a divers vec2 vUv. Les variations sont l'interface entre le sommet et le fragment shader. temps tiendra le temps en millisecondes depuis le démarrage de l'application, que nous utiliserons pour calculer de nouvelles positions de sommets. Dans vUv nous allons stocker les UV (vecteur de texture) de chaque sommet, afin de pouvoir les utiliser dans le fragment shader.
Ensuite, il y a le void main () déclaration. Tous les shaders doivent avoir cette fonction. Ici, nous passons l’UV du sommet à notre vUv et calculer la nouvelle position du sommet. Enfin, nous définissons la gl_Position, qui définit en fait la position du sommet. Mais aussi, nous devons multiplier la position calculée précédemment par le projectionMatrix et modelViewMatrix, deux matrices que Three.js nous fournit. Cela est nécessaire car si nous ne le faisons pas, le processeur graphique ne considérera pas le point à partir duquel nous examinons le sommet. Passons maintenant au fragment shader.
Maintenant, c'est l'endroit où toute la magie se produit. Les shaders de fragments sont responsables de tous ces beaux jeux. Celui que nous allons utiliser est assez simple, alors ne vous attendez pas à voir une scène de Crysis 3 après l'avoir utilisée. Insérez le code suivant sous votre vertex shader:
Comme vous pouvez le voir au sommet du shader, il y a encore nos deux variables. N'oubliez pas que toutes les variables que vous utilisez (à l'exception de celles de Three.js) doivent être définies dans chaque shader dans lequel elles sont utilisées..
dans le void main () fonction, nous calculons les couleurs en fonction du temps et de l’UV du fragment (les shaders de fragment opèrent sur des fragments composés de sommets, de sorte que les valeurs de variant les variables sont interpolées dans le fragment shader). N'hésitez pas à jouer avec ces chiffres et fonctions (rappelez-vous simplement que les valeurs de couleur doivent être positives).
Enfin, nous mettons la gl_FragColor variable qui définit la couleur du fragment.
Si vous ouvrez votre navigateur maintenant, rien ne changera, car nous devons changer le matériau de l'objet pour qu'il utilise des shaders..
Ce matériau spécial est utilisé chaque fois que nous devons utiliser des shaders. Changeons le matériau de l'objet que nous avons attaché à notre modèle dans la partie précédente de cette série. Tout d’abord, définissez le les uniformes tableau qui sera utilisé pour passer des variables aux shaders:
Accentsconagua
var uniforms = heure: type: "f", valeur: 0, résolution: type: "v2", valeur: nouveau THREE.Vector2, texture: type: "t", valeur: THREE.ImageUtils. loadTexture ('./ box.png'); Ensuite, dans le loader.load définir les articleLe matériel et l'utilise:
var itemMaterial = new THREE.ShaderMaterial (uniformes: uniformes, vertexShader: document.getElementById ('cubeVertexShader'). innerHTML, fragmentShader: document.getEgetById ('cubeFragmentShader'). innerHTML; item = new THREE.Mesh (nouveau THREE.CubeGeometry (100, 10, 10), itemMaterial); Maintenant, si vous ouvrez le navigateur, vous devriez voir que le faisceau rouge a changé de couleur:
Mais les couleurs ne changent pas et le maillage n'est pas animé non plus. Pour changer cela, nous devons mettre à jour le temps variable dans les shaders chaque fois qu'un cadre est dessiné. Aller au rendre fonction et ajouter cette ligne après la clock.getDelta () appel:
uniforms.time.value + = delta * 10;
Maintenant, si vous ouvrez le navigateur, vous devriez voir un objet joliment animé et coloré:
Si nous devions créer un tel effet de texture en utilisant, par exemple, HTML5 Canvas, le processus prendrait trop de cycles du processeur, ce qui entraînerait des retards. Mais tous les shaders sont exécutés sur le GPU, optimisé pour toutes les opérations sur les graphiques et concentré. seulement sur eux. La séparation des calculs graphiques et non graphiques est la clé d'une application performante.
Si vous souhaitez créer quelque chose de réel à l'aide de WebGL, permettez-moi de vous assurer que vous devrez déplacer le plus de travail possible sur le GPU afin de rendre votre application fluide et réactive..
Comme vous pouvez le constater, l’utilisation de Three.js nous permet de créer très facilement des graphiques 3D dans le navigateur, et les résultats sont en fait plutôt bons. Mais, ils peuvent être encore mieux, jetez un oeil à ces exemples sur le site de Three.js:
Avec suffisamment de temps, un esprit créatif et Three.js, vous pouvez créer des applications étonnantes comme celles-là aussi. Je serai plus qu'heureux de voir vos créations Three.js. Merci d'avoir lu.
