Comment puis-je créer un grand fond d'espace qui se répète, d'une manière imperceptible

Comment puis-je créer un grand fond d'espace qui se répète pour un jeu rts. Je veux aussi avoir des nébuleuses complexes et des champs de poussière, mais comme les unités auront beaucoup d'espace à explorer, je ne peux pas avoir un jpeg 120000px par 1200000px, donc je veux que l'image se répète, mais pas de lignes de changement entre les segments.

J'utilise ceci avec le framework Babylon de Microsoft pour la toile Web GL

1. Utilisez le défilement de parallaxe. Avoir plusieurs couches d'arrière-plan qui défilent avec différentes fractions de la vitesse du point de vue principal. Plus le calque est bas, plus il défile lentement. Ce n'est pas seulement un excellent moyen de fournir une illusion de profondeur, cela rend également les arrière-plans moins répétitifs car les objets sur les différents calques apparaîtront dans des compositions différentes en raison du fait que les calques ne sont pas synchronisés.

2. créez vos arrière-plans de manière procédurale. Au lieu d'un énorme graphique d'arrière-plan, ayez plusieurs éléments plus petits et placez-les tous plusieurs fois au hasard dans le monde du jeu.

Et au fait: n'utilisez pas JPEG lorsque vous pouvez l'éviter. C'est un format avec perte qui perd plus de qualité chaque fois que vous le modifiez et l'enregistrez, il est fortement optimisé pour la photographie et ne prend pas en charge la transparence. Utilisez un format sans perte avec canal alpha comme PNG. La seule bonne raison serait que votre image source est uniquement disponible en JPEG (la NASA a publié beaucoup de belles photos d'astronomie qui sont toutes dans le domaine public) et que vous ne voulez apporter aucune modification à celles-ci.

Un moyen de créer un fond infini pour un jeu 2D est le suivant:

1. À l'aide d'un logiciel d'édition graphique (comme iDraw pour Mac), créez une image A qui représente une partie de votre arrière-plan. Cette image doit avoir une taille limitée.
2. Dupliquer A et le mettre en miroir sur l'axe Y, c'est B
3. Maintenant, collez (horizontalement) ensemble A et B, c'est AB .
4. Enfin importez l'image AB dans votre jeu et répétez-la horizontalement via le code autant de fois que vous le souhaitez.

J'espère que cela t'aides.

Les couches fonctionnent bien.

Voici quelques calculs:

Supposons que vous ayez une voie ferrée mal faite de telle sorte que __ __ remarquent l'écart entre eux. Lorsque la roue les roule, elle fait une petite encoche (petite encoche).

Si la longueur de la piste est let que la roue a un rayon, ralors 2pi rla circonférence de la roue,ration=l/(2pi r) si le rapport est de dire 10,25 alors la roue obtenir un cran chaque trimestre il monte un long.

C'est la façon la plus simple à laquelle je peux penser pour expliquer les espaces de couverture.

Supposons donc que vous ayez deux images, si l'une a ce rapport de quart, vous obtiendrez un motif en 4 phases, il se répétera après 4 tuiles. Supposons que vous ayez 1 arrière-plan principal et 2 superpositions, avec m et n phases. Ensuite, le motif se répétera après m * n tuiles.

Bien que cela ne compte pas beaucoup, le motif sera meilleur si les nombres sont co-premiers, c'est-à-dire que le plus grand diviseur commun est 1. Par exemple, supposons que nous ayons quelque chose de phase 6 et quelque chose de phase 4, toutes les autres phases, elles "s'alignent" "dans un sens.

Vous pouvez utiliser cette technique (en particulier avec des particules et des trucs) pour créer beaucoup de trucs "uniques" avec très peu d'effort.

De retour à la roue du train, si le rapport est irrationnel, les encoches couvriront la roue! Mais cela n'a pas vraiment d'importance.

Voici une autre idée qui semble manquer:

En cas d'arrière-plans à longue distance, comme les boîtes de ciel, les couches de parallaxe ne se sentent pas vraiment bien. Pensez aux étoiles par exemple, lorsque vous marchez sur terre, ou mieux encore toute la nuit, toutes les étoiles se déplacent ensemble, bien que nous sachions qu'elles sont à des centaines de pensées ou à des années-lumière les unes des autres. Le fait est qu'ils sont bien trop loin pour que nous puissions remarquer leurs distances. Cela dit, nous voulons toujours une très grande texture (disons 120k * 120k), à dessiner avec notre puissance de calcul limitée (qui peut gérer 8k * 8k au maximum). Comme pour l'utilisation de plusieurs couches de parallaxe, vous devez créer différentes textures, chacune avec différents types de détails. Par exemple, une représente des galaxies, une autre est un tas d'étoiles, etc. Mais cette fois au lieu de les déplacer à des vitesses différentes, elles devraient différer dans leurs tailles. Voici un exemple: pensez à utiliser 3 textures, l'un est 2048 * 2048, un autre est 729 * 729 et le troisième est 625 * 625. Étant donné que ces nombres sont coprimes les uns avec les autres, lors de la combinaison de ces 3 textures en 3 couches, il faut déplacer lcm (2048,729,625) = 764 millions de pixels de l'origine pour voir la même chose en cours de dessin, ce qui ressemble un peu à l'infini. En fait, vous pouvez ajouter d'autres couches ou changer la taille de chaque texture et vous obtiendrez toujours un résultat aussi grand quemultiple le plus commun des tailles de texture.

Cela semble être un travail pour un pixel shader procédural.

Les avantages par rapport à l'utilisation d'une image sont les suivants:

• Vous n'avez pas besoin de fournir d'énormes bitmaps
• Il est procédural, il n'a donc pas à répéter une image fixe (il peut varier à l'infini)
• Si vous voulez un effet paralax, vous pouvez simuler des milliers d'avions, ce qui ne serait pas pratique en utilisant des images
• Vous pouvez faire des effets très avancés, comme l'éclairage dynamique
• La plupart du traitement est effectué par votre GPU, laissant le CPU libre pour d'autres parties de votre jeu

Une simple recherche sur le Web fait apparaître ce shader http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html qui ressemble à ce que vous recherchez.

Je ne suis pas un expert de WebGL, mais selon cette page , il semble qu'il utilise le langage GLSL normal (c'est le langage C-Like utilisé par les cartes graphiques pour programmer les shaders). Cela signifie que vous n'aurez probablement pas ou peu de changements à faire pour que cela fonctionne.

Vous pouvez cependant essayer de commencer avec un shader plus basique pour comprendre comment cela fonctionne.

Cette page de blog répertorie toutes les étapes pour implémenter un shader dans WebGL. Cela semble un bon point de départ.

Https://www.shadertoy.com/ est un autre bon endroit pour trouver de merveilleux exemples de shaders.

Vous pouvez couper votre gros jpeg en petits segments et les placer (partie visible), vous n'avez même pas besoin de le stocker en mémoire tout le temps.

Et comme un vieux jeu, certaines «tuiles» peuvent se répéter. C'était une solution courante pour la console NES, c'était même supporté par le matériel.