Apprentissage de WebGL et three.js [fermé]

143

Je suis nouveau et commence à en apprendre davantage sur l'infographie 3D dans les navigateurs Web. Je suis intéressé par la création de jeux 3D dans un navigateur. Pour tous ceux qui ont appris à la fois WebGL et three.js ...

  1. La connaissance de WebGL est-elle nécessaire pour utiliser three.js?

  2. Quels sont les avantages de l'utilisation de three.js par rapport à WebGL?

r1nzler
la source
10
Utilisez Three.js. Période. C'est exactement ce que dit West ci-dessous, bien que simple en théorie, écrire WebGL à partir de zéro est une douleur. Il y a tellement de choses que presque toutes les applications WebGL auront besoin / voudront faire. Ces choses peuvent vous être abstraites. En outre, Three.js est devenu une bibliothèque incroyable. Si vous vérifiez Google Trends ou le nombre de questions SO ici, vous verrez qu'il a pris une longueur d'avance sur la concurrence.
theblang
4
@GeorgeStocker En fait, les réponses à cette question ne sont pas basées principalement sur des opinions, mais sur des faits, des références et une expertise spécifique. Ce message a été précieux pour la communauté there.js, et la partie (2) de la question est certainement acceptable. Comment recommanderiez-vous de la reformuler pour qu'elle soit acceptable pour vous, c'est-à-dire sans changer le sens / l'intention de la question?
WestLangley
@WestLangley Je n'ai entendu que des opinions dans les réponses données; sans oublier que «les avantages et les inconvénients de l'utilisation de [bibliothèque]» est un peu trop large pour Stack Overflow.
George Stocker
2
@GeorgeStocker Votre réponse est elle-même une opinion, et je ne suis pas du tout d'accord avec elle. Comment recommanderiez-vous de reformuler le message pour qu'il soit acceptable pour vous?
WestLangley
1
Peut-être que les questions pourraient être reformulées pour demander comment l'apprentissage de WebGL est bénéfique à l'utilisation de Three.js. La réponse à cette question serait étayée par des faits, des références et une expertise.
zz85

Réponses:

203

Puisque vous avez de grandes ambitions, vous devez investir du temps pour apprendre les fondamentaux. Ce n'est pas une question de ce que vous apprenez en premier - vous pouvez les apprendre simultanément si vous le souhaitez. (C'est ce que j'ai fait.)

Cela signifie que vous devez comprendre:

  1. Concepts WebGL
  2. Three.js
  3. Les concepts mathématiques sous-jacents

Three.js. Three.js fait un excellent travail d'abstraction de nombreux détails de WebGL, donc personnellement, je vous suggère d'utiliser Three.js pour votre projet. Mais rappelez-vous, Three.js est en alpha , et il change fréquemment, vous devez donc vous y préparer. La plupart des gens apprennent Three.js en étudiant les exemples. Évitez les livres et les didacticiels obsolètes, et évitez les exemples du net qui renvoient aux anciennes versions de la bibliothèque.

WebGL. Si vous utilisez Three.js, vous n'avez pas besoin de savoir programmer en WebGL, vous avez juste besoin de comprendre les concepts WebGL. Cela signifie que vous avez juste besoin de pouvoir lire le code WebGL de quelqu'un d'autre et de comprendre ce que vous lisez. C'est beaucoup plus facile que prévu d'écrire vous-même un programme WebGL à partir de zéro. Vous pouvez apprendre suffisamment bien les concepts WebGL en utilisant l'un des didacticiels sur le net, tels que le didacticiel pour débutants sur WebGLFundamentals.org et Learning WebGL .

Math. Encore une fois, vous devez au moins comprendre les concepts. Trois bons livres sont:

  1. Introduction aux mathématiques 3D pour le développement graphique et de jeux par Fletcher Dunn et Ian Parberry

  2. Mathématiques essentielles pour les jeux et les applications interactives: un guide du programmeur par James M. Van Verth et Lars M. Bishop

  3. Mathématiques pour la programmation de jeux 3D et l'infographie par Eric Lengyel

J'espère que cela vous aide. Bonne chance.

WestLangley
la source
quel est le meilleur site pour en savoir plus sur les concepts webgl du début à la fin en anglais facile. Ou du moins chaque fois que l'auteur utilise un «mot», il / elle le fait après l'avoir décrit une fois auparavant, alors construisez-le.
Muhammad Umer
Voir le lien vers le didacticiel Learning WebGL dans le corps de l'article.
WestLangley
22

Il existe un très bon cours en ligne - Graphiques 3D interactifs à https://www.udacity.com/course/cs291 sur THREE.js. Ce cours comprend également des devoirs pour acquérir une expérience pratique. Il couvre tous les concepts de base de Three.js et de l'infographie

Bhupendra
la source
13

Mes pensées personnelles sont les suivantes:

  • Si vous avez suffisamment de temps, vous pouvez apprendre les deux, mais notez que WebGL est bien inférieur à Three.js.
  • Pour un premier projet 3D, les experts suggèrent d'utiliser une bibliothèque comme Three.js afin de s'habituer aux termes et au modèle 3D général.
Dan D.
la source
3
Je suis d'accord avec ça. À ce stade, il semble que ce pourrait être une bonne chose d'avoir les deux dans votre ceinture à outils. Je commençais par apprendre Three.JS, puis je faisais quelques shaders avec GLSL et j'essayais toujours d'en savoir plus sur WebGL.
Cory Gross
11

Quelle que soit la direction dans laquelle vous choisissez d'aller, je vous suggère d'apprendre / de perfectionner vos compétences en algèbre linéaire . Ensuite, apprenez ou affinez votre compréhension des dimensions MVP (Model View Projection) . Troisièmement, JS peut résumer une grande partie de cela, mais je pense qu'il est essentiel de bien comprendre ces concepts avant de se lancer sérieusement dans tout développement 3D.

J'ai écrit un article d'introduction sur MVP lorsque j'ai appris la programmation 3D avec OpenGL. J'ai réalisé que jusqu'à ce que je sois capable d'expliquer ce que sont ces matrices de transformation et comment elles se rapportent aux différentes dimensions / espaces, je ne connaissais vraiment aucune programmation 3D, même si je pouvais rendre des objets à l'écran.

Puisque votre objectif est de créer des jeux, je pense que vous bénéficierez beaucoup d'apprendre d'abord du WebGL brut, même si vous finissez par utiliser un framework comme Three.js pour vous aider à écrire votre code plus tard.

rodrigo-silveira
la source
10

"WebGL est une API 2D et non une API 3D"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Cet article décrit les différences fondamentales entre les bibliothèques WebGL et 3D comme three.js.
Ce qui a fait de mon choix entre WebGL ou Three.js une évidence.

Bob Fanger
la source
La citation ne provient pas du texte principal de la page liée. J'accepte partiellement les arguments énoncés dans la page liée, cependant. Il ne s'agit pas d'être une API 2D, mais d'être une API de rastérisation (qui convient aux graphiques 2D et 3D).
Elias Hasle
6

Je venais d'un milieu Unity3D ainsi que Papervision3D à l'époque, donc j'avais une bonne compréhension de la façon de gérer l'espace 3D. Three.js est la voie à suivre pour votre premier saut dans l'apprentissage de la gestion des projets WebGL. L'API est très bonne, elle est très puissante et si vous venez d'une autre technologie 3D, vous serez opérationnel en très peu de temps.

J'ai passé beaucoup de temps avec les exemples de Threejs.org - il y en a une tonne et ils sont très bons pour vous faire partir et courir dans la bonne direction. Les documents sont assez décents, surtout si vous les comparez à d'autres API webGL 3D.

Vous pouvez également envisager d'obtenir la version gratuite de Unity3D et l'exportateur gratuit collada (était gratuit quand je l'ai eu) à partir de leur boutique d'applications (Fenêtre> App Store). J'ai trouvé assez facile de configurer ma scène dans Unity et de l'exporter vers Collada pour l'utiliser avec Three.js.

De plus, j'ai posté cette classe que j'utilise avec Three.js appelée neo ( http://rockonflash.com/webGL/three/neo.js ). Ajoutez-le simplement à votre projet, puis appelez Neo.JackIntoThree () et il ajoutera les méthodes / propriétés à Object3D à utiliser dans votre projet. Des choses comme DrawAllAxis () sont inestimables lors du débogage de votre scène, etc.

Cependant, Three.js est une excellente façon de procéder - il est suffisamment flexible pour vous permettre d'écrire vos propres shaders / objets, etc., et assez puissant dès la sortie de la boîte pour vous aider à atteindre vos objectifs.

neoRiley
la source
3

J'ai choisi three.js, mais j'ai également sauté dans GLSL et j'ai beaucoup expérimenté avec three.js shaderMaterial. Une façon de procéder - three.js résume encore beaucoup de choses pour vous, mais il vous donne également un accès très propre et de bas niveau à toutes les capacités de rendu (projection, animation).

De cette façon, vous pouvez suivre même quelque chose comme ce super tutoriel open-gl . Vous n'avez pas à configurer les matrices, les tableaux typés, car trois le configurent déjà pour vous, les mettant à jour si nécessaire. Le shader cependant, vous pouvez écrire à partir de zéro - un simple rendu des couleurs serait deux lignes de GLSL. Il existe également un plug-in de post-traitement pour three.js qui configure tous les tampons, les quads plein écran et tout ce dont vous avez besoin pour faire les effets, mais le shader peut être très simple pour commencer.

Puisque les shaders programmables sont l'essence même du graphisme 3D moderne, j'espère que ma réponse ne manque pas le point :) Tôt ou tard, quiconque fait cela doit au moins comprendre ce qui se passe sous le capot, c'est la nature de la bête. De plus, la compréhension de la 4ème dimension dans un espace homogène est probablement également importante.

Ce livre est bon pour WebGL.

tête de seau
la source
2

Je viens d'apprendre un peu des deux et je pense que comprendre les bases de webgl, je pense qu'une introduction sur webgl est suffisante et ensuite sauter dans trois js. Ce sera assez facile une fois que vous aurez compris les concepts sous-jacents de WebGL. Liens utiles:

  1. Meilleure introduction que j'ai lue: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. Tutoriels complets: http://www.johannes-raida.de/tutorials.htm
Raj
la source