123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- <!DOCTYPE html><html lang="fr"><head>
- <meta charset="utf-8">
- <title>Design réactif et </title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – Design réactif et ">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>Design réactif</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>Ceci est le second article dans une série traitant de Three.js.
- Le premier traitait <a href="fundamentals.html">des principes de base</a>.
- Si vous ne l'avez pas encore lu, vous devriez peut-être commencer par là.</p>
- <p>Cet article explique comment rendre votre application Three.js adaptable
- à n'importe quelle situation. Rendre une page web adaptable (<em>responsive</em>)
- se réfère généralement à faire en sorte que la page s'affiche de manière
- appropriée sur des écrans de taille différente, des ordinateurs de bureau
- aux <em>smart-phones</em>, en passant par les tablettes.</p>
- <p>Concernant Three.js, il y a d'ailleurs davantage de situations à traiter.
- Par exemple, un éditeur 3D avec des contrôles à gauche, droite, en haut ou
- en bas est quelque chose que nous voudrions gérer. Un schéma interactif
- au milieu d'un document en est un autre exemple.</p>
- <p>Le dernier exemple que nous avions utilisé est un canvas sans CSS et
- sans taille :</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><canvas id="c"></canvas>
- </pre>
- <p>Ce canvas a, par défaut, une taille de 300x150 pixels.
- Dans le navigateur, la manière recommandée de fixer la taille
- de quelque chose est d'utiliser CSS.</p>
- <p>Paramétrons le canvas pour occuper complètement la page en ajoutant
- du CSS :</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><style>
- html, body {
- margin: 0;
- height: 100%;
- }
- #c {
- width: 100%;
- height: 100%;
- display: block;
- }
- </style>
- </pre>
- <p>En HTML, la balise <em>body</em> a une marge fixée à 5 pixels par défaut donc
- la changer à 0 la retire. Modifier la hauteur de <em>html</em> et <em>body</em> à 100%
- leur fait occuper toute la fenêtre. Sinon, ils sont seulement aussi large
- que le contenu qu'ils contiennent.</p>
- <p>Ensuite, nous faisons en sorte que l'élément <code class="notranslate" translate="no">id=c</code> fasse
- 100% de la taille de son conteneur qui est, dans ce cas, la balise body.</p>
- <p>Finalement, nous passons le mode <code class="notranslate" translate="no">display</code> à <code class="notranslate" translate="no">block</code>.
- Le mode d'affichage par défaut d'un canvas est <code class="notranslate" translate="no">inline</code>, ce qui implique
- que des espaces peuvent être ajoutés à l'affichage.
- En passant le canvas à <code class="notranslate" translate="no">block</code>, ce problème est supprimé.</p>
- <p>Voici le résultat :</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-no-resize.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive-no-resize.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>Le canvas, comme nous le voyons, remplit maintenant la page mais il y a deux
- problèmes. Tout d'abord, nos cubes sont étirés et ressemblent à des boîtes trop
- hautes et trop larges. Ouvrez l'exemple dans sa propre fenêtre et
- redimensionnez la, vous verrez comment les cubes s'en trouvent déformés
- en hauteur et en largeur.</p>
- <p><img src="../resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center nobg"></p>
- <p>Le second problème est qu'ils semblent affichés en basse résolution ou
- à la fois flous et pixellisés. Si vous étirez beaucoup la fenêtre, vous verrez
- pleinement le problème.</p>
- <p><img src="../resources/images/resize-low-res.png" class="threejs_center nobg"></p>
- <p>Tout d'abord, nous allons résoudre le problème d'étirement.
- Pour cela, nous devons calquer le ratio de la caméra sur celui
- de la taille d'affichage du canvas. Nous pouvons le faire
- en utilisant les propriétés <code class="notranslate" translate="no">clientWidth</code> et <code class="notranslate" translate="no">clientHeight</code> du canvas.</p>
- <p>Nous mettons alors notre boucle de rendu comme cela :</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- time *= 0.001;
- + const canvas = renderer.domElement;
- + camera.aspect = canvas.clientWidth / canvas.clientHeight;
- + camera.updateProjectionMatrix();
- ...
- </pre>
- <p>A présent les cubes ne devraient plus être déformés.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-update-camera.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive-update-camera.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>Ouvrez l'exemple dans une fenêtre séparée et redimensionnez la.
- Vous devriez voir que les cubes ne sont plus étirés, que ce soit
- en hauteur ou en largeur.
- Ils restent corrects quelque soit l'aspect de la taille de la fenêtre.</p>
- <p><img src="../resources/images/resize-correct-aspect.png" width="407" class="threejs_center nobg"></p>
- <p>Maintenant résolvons le problème de la pixellisation.</p>
- <p>Les éléments de type <em>canvas</em> ont deux tailles. La première
- est celle du canvas affiché dans la page. C'est ce que nous paramétrons avec le CSS.
- L'autre taille est le nombre de pixels dont est constitué le canvas lui-même.
- Ceci n'est pas différent d'une image.
- Par exemple, nous pouvons avoir une image de taille 128x64 et, en utilisant le CSS,
- nous pouvons l'afficher avec une taille de 400x200.</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><img src="some128x64image.jpg" style="width:400px; height:200px">
- </pre>
- <p>La taille interne d'un canvas, sa résolution, est souvent appelée sa taille de tampon
- de dessin (<em>drawingbuffer</em>). Dans Three.js, nous pouvons ajuster la taille
- du canvas en appelant <code class="notranslate" translate="no">renderer.setSize</code>.
- Quelle taille devons nous choisir ? La réponse la plus évidente est "la même taille que
- celle du canvas". A nouveau, pour le faire, nous pouvons recourir
- aux propriétés <code class="notranslate" translate="no">clientWidth</code> et <code class="notranslate" translate="no">clientHeight</code>.</p>
- <p>Ecrivons une fonction qui vérifie si le rendu du canvas a la bonne taille et l'ajuste en conséquence.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function resizeRendererToDisplaySize(renderer) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- if (needResize) {
- renderer.setSize(width, height, false);
- }
- return needResize;
- }
- </pre>
- <p>Remarquez que nous vérifions si le canvas a réellement besoin d'être redimensionné.
- Le redimensionnement est une partie intéressante de la spécification du canvas
- et il est mieux de ne pas lui donner à nouveau la même taille s'il est déjà
- à la dimension que nous voulons.</p>
- <p>Une fois que nous savons si le redimensionnement est nécessaire ou non, nous
- appelons <code class="notranslate" translate="no">renderer.setSize</code> et lui passons les nouvelles largeur et hauteur.
- Il est important de passer <code class="notranslate" translate="no">false</code> en troisième.
- <code class="notranslate" translate="no">render.setSize</code> modifie par défaut la taille du canvas dans le CSS, mais ce n'est
- pas ce que nous voulons. Nous souhaitons que le navigateur continue à fonctionner
- comme pour les autres éléments, en utilisant le CSS pour déterminer la
- taille d'affichage d'un élément. Nous ne voulons pas que les canvas utilisés
- par Three.js aient un comportement différent des autres éléments.</p>
- <p>Remarquez que notre fonction renvoie <em>true</em> si le canvas a été redimensionné.
- Nous pouvons l'utiliser pour vérifier si d'autre choses doivent être mises à jour.
- Modifions à présent notre boucle de rendu pour utiliser la nouvelle fonction :</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- time *= 0.001;
- + if (resizeRendererToDisplaySize(renderer)) {
- + const canvas = renderer.domElement;
- + camera.aspect = canvas.clientWidth / canvas.clientHeight;
- + camera.updateProjectionMatrix();
- + }
- ...
- </pre>
- <p>Puisque l'aspect ne change que si la taille d'affichage du canvas change,
- nous ne modifions l'aspect de la caméra que si <code class="notranslate" translate="no">resizeRendererToDisplaySize</code>
- retourne <code class="notranslate" translate="no">true</code>.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>Le rendu devrait à présent avoir une résolution correspondant à
- la taille d'affichage du canvas.</p>
- <p>Afin de comprendre pourquoi il faut laisser le CSS gérer le redimensionnement,
- prenons notre code et mettons le dans un <a href="../examples/threejs-responsive.js">fichier <code class="notranslate" translate="no">.js</code> séparé</a>. Voici donc quelques autres exemples où nous avons laissé le CSS choisir la taille et remarquez que nous n'avons
- eu aucun code à modifier pour qu'ils fonctionnent.</p>
- <p>Mettons nos cubes au milieu d'un paragraphe de texte.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-paragraph.html&startPane=html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive-paragraph.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>et voici notre même code utilisé dans un éditeur où la zone de contrôle à droite peut être redimensionnée.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-editor.html&startPane=html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive-editor.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>Le point important à remarquer est que le code n'est pas modifié, seulement
- le HTML et le CSS.</p>
- <h2 id="g-rer-les-affichages-hd-dpi">Gérer les affichages HD-DPI</h2>
- <p>HD-DPI est l'acronyme pour <em>high-density dot per inch</em>,
- autrement dit, les écrans à haute densité d'affichage.
- C'est le cas de la plupart des Macs, des machines sous Windows
- ainsi que des smartphones.</p>
- <p>La façon dont cela fonctionne dans le navigateur est
- qu'il utilise les pixels CSS pour mettre à jour la taille
- qui est supposée être la même quelque soit la résolution de
- l'affichage. Le navigateur effectue le rendu du texte avec davantage
- de détails mais la même taille physique.</p>
- <p>Il y a plusieurs façons de gérer les HD-DPI avec Three.js.</p>
- <p>La première façon est de ne rien faire de spécial. Cela
- est, de manière discutable, le plus commun. Effectuer le
- rendu de graphismes 3D réclame beaucoup de puissance de calcul au GPU
- (<em>Graphics Processing Units</em>, les processeurs dédiés de carte graphique).
- Les GPUs des smartphones ont moins de puissance que ceux des ordinateurs de bureau,
- du moins en 2018, et pourtant les téléphones mobiles ont des affichages
- haute résolution. Le haut de gamme actuel pour les smartphones a un ratio
- HD-DPI de 3x, ce qui signifie que pour chaque pixel d'un affichage non HD-DPI,
- ces téléphones ont 9 pixels. Il y a donc 9 fois plus de travail
- pour le rendu.</p>
- <p>Calculer pour 9 pixels nécessite des ressources. Donc, si
- nous laissons le code comme cela, nous calculerons pour 1 pixel
- et le navigateur le dessinera avec 3 fois sa taille (3 x 3 = 9 pixels).</p>
- <p>Pour toute application Three.js lourde, c'est probablement ce que vous
- voulez sinon vous risquez d'avoir un taux de rafraîchissement faible (<em>framerate</em>).</p>
- <p>Ceci étant dit, si vous préférez effectuer le rendu à la résolution de l'appareil,
- voici quelques façons de le faire en Three.js.</p>
- <p>La première est d'indiquer à Three.js le facteur de multiplication de la résolution
- en utilisant <code class="notranslate" translate="no">renderer.setPixelRatio</code>. Nous pouvons demander au navigateur ce
- facteur entre les pixels CSS et les pixels du périphérique et les passer à Three.js</p>
- <pre class="prettyprint showlinemods notranslate notranslate" translate="no"> renderer.setPixelRatio(window.devicePixelRatio);
- </pre><p>Après cela, tout appel à <code class="notranslate" translate="no">renderer.setSize</code> va automatiquement
- utiliser la taille que vous avez demandé, multiplié par le
- ratio que vous avez demandé.
- <strong>Ceci est fortement DÉCONSEILLÉ</strong>. Voir ci-dessous.</p>
- <p>L'autre façon est de le faire par soi-même quand on redimensionne le canvas.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no"> function resizeRendererToDisplaySize(renderer) {
- const canvas = renderer.domElement;
- const pixelRatio = window.devicePixelRatio;
- const width = Math.floor( canvas.clientWidth * pixelRatio );
- const height = Math.floor( canvas.clientHeight * pixelRatio );
- const needResize = canvas.width !== width || canvas.height !== height;
- if (needResize) {
- renderer.setSize(width, height, false);
- }
- return needResize;
- }
- </pre>
- <p>Cette seconde façon est objectivement meilleure. Pourquoi ? Parce que cela signifie
- que nous avons ce que nous avons demandé. Il y a plusieurs cas où,
- quand on utilise Three.js, nous avons besoin de connaître la taille effective
- du tampon d'affichage du canvas. Par exemple, quand on réalise un filtre de
- post-processing, ou si nous faisons un <em>shader</em> qui accède à <code class="notranslate" translate="no">gl_FragCoord</code>,
- si nous sommes en train de faire une capture d'écran, ou en train de lire les pixels
- pour une sélection par GPU, pour dessiner dans un canvas 2D, etc...
- Il y a plusieurs cas où, si nous utilisons <code class="notranslate" translate="no">setPixelRatio</code> alors notre
- taille effective est différente de la taille que nous avons demandé et nous
- aurons alors à deviner quand utiliser la taille demandée ou la taille utilisée
- par Three.js.
- En le faisant par soi-même, nous savons toujours que la taille utilisée
- est celle que nous avons demandé. Il n'y a aucun cas où cela se fait tout
- seul autrement.</p>
- <p>Voici un exemple utilisant le code vu plus haut.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-hd-dpi.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/responsive-hd-dpi.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
- </div>
- <p></p>
- <p>Il vous est peut-être difficile de voir la différence, mais si vous avez
- un affichage HD-DPI et que vous comparez cet exemple aux autres plus
- haut, vous devriez remarquer que les arêtes sont plus vives.</p>
- <p>Cet article a couvert un sujet très basique mais fondamental.
- Dans l'article suivant, nous allons rapidement
- <a href="primitives.html">passer en revue les primitives de base proposées par Three.js</a>.</p>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|