Univers de Instructables dans Three.js (6 / 13 étapes)

Étape 6: Three.js : systèmes de particules

WebGL et ThreeJS par extension, sont parfaits pour l’affichage des mailles de large et détaillées dans l’espace 3. C’est ce que beaucoup de modèles 3D se composent de, et même si les modèles sont autres choses (« solides » ou « NURBs ») ils sont finalement rendus à votre écran d’ordinateur par tout d’abord transformés en soi-disant « render meshes ».

« Points » ne sont pas vraiment une chose.

Systèmes de particules sont essentiellement un moyen pour gérer la géométrie de maille 3D où vous ne se souciez les bords. Si vous oubliez les arêtes d’un maillage, rendre invisible et puis donnez une sorte de matérialité ponctuelles à l’intersection, vous avez un système de particules. Systèmes de particules permettent de vous déplacer tous les points d’un maillage autour de manière indépendante et peuvent être idéal pour les effets sont généralement rendus sous forme de particules. Oui, vous pourriez modéliser un sablier de cette façon comme des particules individuelles de sable flux passé entre eux, mais vous pourriez aussi faire quelque chose comme les nuages, neige, Oui, stars, auto-organisation folleou un sacré gâchis. Les sommets sont trop puissants par d’autres moyens. Si vous êtes prêt à écrire vous-même un nuanceur vertex, c’est assez rapide pour obtenir une boule chromée agréable.

En fait, je n’utilise des systèmes de particules pendant une bonne partie, mais threejs le rend facile à appliquer des matériaux vertex uniquement à particlesystems. Systèmes de particules vont main dans la main avec des matériaux de système de particules. Ainsi, au lieu de cubegeometry + matériel = cube (d’en haut), nous pouvons dire particleSystem + particleSystemMaterial = Object3D et l’ajouter à la scène. Pour plus de détails sur cette version de base, je recommande le tutoriel de Aerotwist sur les particules. J’ai fini par aller de manière légèrement différente : mes propres shaders de vertex et le fragment laminées sur la coutume.

Le JavaScript est assez simple :

Mais les éléments « vertexshader » et « fragmentshader » mentionnés sont WebGL code d’une planète inconnue :

Écrire ce code shader a été pénible pour moi, parce que je ne sais WebGL et n’ai toujours pas. Ce que j’ai appris sur le chemin, en plus de quelques menus détails qui ne sont pas utiles à partager, était un fait intéressant. Je ne savais pas pourquoi un GPU a été utile. Bien sûr, il est bon d’avoir un deuxième processeur. Mais pourquoi pas deux CPU ? Tout simplement parce qu’un GPU est moins cher ?

La différence est le traitement en parallèle. Pour l’architecture d’un CPU à peindre chaque pixel à l’écran, il a essentiellement à suivre le code qui effectue chaque pixel dans l’ordre :

Le code GPU est différent parce que le GPU pixel en parallèle, pas de séquence. Vous appliquez un effet à la totalité de l’écran à la fois et les effets de calque à l’autre. Cela vous permet de faire des trucs vraiment passionnant avec très peu de code. Voir post-traitement plus tard pour le goûter.

Articles Liés

Charger votre Instructables dans Galerie de style google images avec PHP

Charger votre Instructables dans Galerie de style google images avec PHP

Vous avez toujours voulu afficher votre instructables de manière élégante dans une galerie, (y compris les photos de plusieurs étapes dans les galeries minis) - pendant le chargement de tout le contenu de votre alimentation si vous n'avez pas au mett
Instructable-dans-un-Tweet : Comment ignorer complètement la limite de caractères de Twitter

Instructable-dans-un-Tweet : Comment ignorer complètement la limite de caractères de Twitter

parfois, vous voulez dire quelque chose qui dépasse la limite de caractères 140 de Twitter.Vous pourriez poster en ligne quelque part et inclure un lien ou diviser le texte en un nombre de tweets distincts, mais les deux options risquent un manque de
Comment faire votre instructable dans le style manga

Comment faire votre instructable dans le style manga

Il s'agit d'un dessin de style bricolage instructable (nommée INSA-2011) du manga. Maintenant la règle majeure de dessin manga est de commencer avec un schéma de base de la figurine que vous souhaitez dessiner. Hiérarchique est et fait partie intégra
Mettez un ensemble instructable dans un unique fichier pdf.

Mettez un ensemble instructable dans un unique fichier pdf.

Un fichier pdf peut contenir plus de texte et des images. Instructable contiennent souvent des films, des fichiers pdf supplémentaire, etc.. Il est parfois commode de mettre toutes les ressources dans un fichier pdf unique.Etape 1: Film logiciel Cett
Robot jouet - Instructables dans Tinkerplay

Robot jouet - Instructables dans Tinkerplay

Autodesk Tinkerplay est une application gratuite qui vous permet de concevoir et de personnaliser vos propres créatures et personnages sur votre appareil mobile et de rendre réel à l'aide d'une imprimante 3D. Nous concevons Instructables robot.Étape
Comment entrer dans le défi de portefeuille Instructables

Comment entrer dans le défi de portefeuille Instructables

vous nous avez dit encore et encore, et nous avons finalement obtenu le message : DIY portefeuilles sont chauds.Porte-monnaie fabriqué à partir d'un clavier d'ordinateurPochette papierportefeuille de qualité duct tapele portefeuille de bande de condu
Conversion : Instructables tablier dans le sachet

Conversion : Instructables tablier dans le sachet

Un seul mot qui me décrit avec justesse : pratique.Ainsi, alors que j'étais heureux de recevoir un tablier Instructables dans le cadre d'un package, mon esprit flashé à la quantité minime de cuisson (ayant été proclamé un danger dans la cuisine dès s
Vue instructable comme un utilisateur pro avec des fonctionnalités supplémentaires (toutes les étapes dans une page + enregistrer).

Vue instructable comme un utilisateur pro avec des fonctionnalités supplémentaires (toutes les étapes dans une page + enregistrer).

Il s'agit de mon premier instructable. Si vous avez des suggestions, s'il vous plaît laissez-moi savoir. Espérons que vous apprécierez ce. Avez-vous déjà pensé à la visualisation de toutes les étapes d'une instructable dans une page et en l'enregistr
Plasma dans un tube à essai

Plasma dans un tube à essai

Salut tout le monde !Il s'agit de mon deuxième Instructable et anglais n'est pas ma langue maternelle, donc je vous les gars demande peu de patience pour les EVENTUELLES inexactitudes formelles.J'ai décidé d'entrer dans ce Instructable dans le enseig
Comment créer un compte de Instructables

Comment créer un compte de Instructables

comment faire pour rejoindre la plus grande chose depuis l'invention des verres T.V.!!Et tout ce dont vous avez besoin :[] Un ordinateur avec une connexion internet (vous utilisez l'un dès maintenant.)[] A la version récente de Java (recommandé mais
Tirez ensemble de postes de clôture en bois dans le béton avec pas creuser !

Tirez ensemble de postes de clôture en bois dans le béton avec pas creuser !

J'ai voulu faire ce post pour peut-être aider quelqu'un à sauver un peu de temps s'ils ont jamais besoin de remplacer une clôture, qui a des poteaux de bois qui sont définies dans le béton, ne veulent pas avoir à creuser à la main.Voici l'histoire.Ma
Chroma - lumière dans une boîte de

Chroma - lumière dans une boîte de

Chroma.lumière dans une boîte.Chroma est une simple boîte. Il s'allume quand vous le souhaitez. Quelle que soit la couleur que vous voulez, quand vous le voulez.Chroma est une boîte de double bord allumé app contrôlée ; rendue possible par les capaci
Comment intégrer une vidéo sur Instructables

Comment intégrer une vidéo sur Instructables

parfois la meilleure façon de transmettre une idée dans une Instructable doit montrer une vidéo.  Ce tutoriel vous guidera dans le processus de recherche de que code d'intégration de votre vidéo et coller au bon endroit dans votre Instructable.Vous p
Comment écrire une Instructable

Comment écrire une Instructable

Instructables sont la raison pour laquelle que ce site existe.Il existe plusieurs façons de présenter votre travail ici et tout le monde trouve son propre style, mais il y a des choses que bons instructables ont en commun, et c'est le but de ce Instr