WebGL - Terrain texturé avec heightmap

Je suis en train de créer un terrain en 3D à l'aide de WebGL. J'ai un jpg avec la texture du terrain, et un autre jpg avec les valeurs de hauteur (de -1 à 1).

J'ai regardé divers wrapper bibliothèques (comme SpiderGL et Three.js), mais je ne peux pas trouver un sutable exemple, et si je le fais (comme dans Three.js le code n'est pas documentée et je ne peux pas comprendre comment le faire.

Quelqu'un peut me donner un bon tutoriel ou un exemple?

Il est un exemple à Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html qui est presque ce que je veux. Le problème est que la couleur de la montagne et de la hauteur des valeurs au hasard. Je veux lire ces valeurs à partir de 2 différents fichiers image.

Toute aide serait appriciated.
Grâce

source d'informationauteur goocreations

  1. 12

    Découvrez ce post plus sur GitHub:

    https://github.com/mrdoob/three.js/issues/1003

    L'exemple lié par florianf m'a aidé à être en mesure de le faire.

    function getHeightData(img) {
    var canvas = document.createElement( 'canvas' );
    canvas.width = 128;
    canvas.height = 128;
    var context = canvas.getContext( '2d' );

    var size = 128 * 128, data = new Float32Array( size );

    context.drawImage(img,0,0);

    for ( var i = 0; i < size; i ++ ) {
        data[i] = 0
    }

    var imgd = context.getImageData(0, 0, 128, 128);
    var pix = imgd.data;

    var j=0;
    for (var i = 0, n = pix.length; i < n; i += (4)) {
        var all = pix[i]+pix[i+1]+pix[i+2];
        data[j++] = all/30;
    }

    return data;
}

    Démo: http://oos.moxiecode.com/js_webgl/terrain/index.html

  2. 5

    Deux méthodes que je peux penser:

    1. Créez votre paysage de sommets comme une grille plane. Utiliser les Vertex Texture des Recherches pour interroger votre heightmap et de moduler la hauteur (probablement votre composant Y) de chaque point. Ce serait probablement la méthode la plus simple, mais je ne pense pas prise en charge du navigateur car il est très bon pour le moment. (En fait, je ne trouve pas d'exemples)
    2. La charge de l'image, la rendre à une toile, et l'utiliser pour lire les valeurs de hauteur. Construire un static mesh sur cette base. Ce sera probablement plus rapide à calculer, puisque les shaders sont en train de faire moins de travail. Il nécessite plus de code pour construire le maillage, cependant.

    Pour un exemple de lecture de données d'image, vous pouvez consulter cette SORTE de question.

  3. 2

    Vous pouvez être intéressé par mon blog sur le thème: http://www.pheelicks.com/2014/03/rendering-large-terrains/

    Je me concentre sur la façon de créer efficacement votre terrain de géométrie tels que vous obtenez un niveau adéquat de détail dans le champ proche, ainsi que de loin.

    Vous pouvez voir une démo de la suite ici: http://felixpalmer.github.io/lod-terrain/ et tout le code est sur github: https://github.com/felixpalmer/lod-terrain

    Pour appliquer une texture sur le terrain, vous devez faire une texture de recherche dans le fragment shader, une cartographie de la localisation dans l'espace à un poste dans la texture de vos cheveux. E. g.

    vec2 st = vPosition.xy / 1024.0;
vec3 color = texture2D(uColorTexture, st)
  4. 0

    Selon votre GLSL compétences, vous pouvez écrire un vertex shader GLSL, affecter la texture à l'un de vos canaux de texture, et de lire la valeur dans le vertex shader (je crois que vous avez besoin d'un système moderne de carte pour lire les textures dans un vertex shader, mais c'est peut être juste me montrant mon âge 😛 )

    Dans le vertex shader, de traduire la valeur z du vertex basé sur la valeur lue à partir de la texture.

  5. 0

    Babylon.js rend extrêmement facile à mettre en œuvre. Vous pouvez voir un exemple à:
    Heightmap Aire De Jeux

    Ils ont même mis en place le Cannon.js moteur physique avec elle, de sorte que vous pouvez gérer les collisions: Heightmap avec les collisions

    Remarque: de cette écriture, il ne fonctionne qu'avec la cannon.js la physique plugin, et le frottement ne fonctionne pas (doit être mis à 0). Aussi, assurez-vous de définir l'emplacement d'une maille/imposteur AVANT de la physique de l'état, ou vous aurez le comportement bizarre.