WebGL - Текстурированная местность с картой высот

Я пытаюсь создать 3D-ландшафт с помощью WebGL. У меня есть jpg с текстурой для местности, а другой jpg с значениями высоты (от -1 до 1).

Я просмотрел различные библиотеки-обертки (например, SpiderGL и Three.js), но я не могу найти пример с расширением sutable, и если я это сделаю (например, в Three.js), код не документирован, t выяснить, как это сделать.

Может ли кто-нибудь дать мне хороший учебник или пример?

Есть пример в Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html, который я почти что хочу. Проблема в том, что они создают цвет гор и значения высоты произвольно. Я хочу прочитать эти значения из двух разных файлов изображений.

Любая помощь будет назначена. Благодаря

Ответ 1

Проверьте этот пост на GitHub:

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

Пример, связанный с florianf, помог мне сделать это.

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;
}

Демо: http://oos.moxiecode.com/js_webgl/terrain/index.html

Ответ 2

Два метода, о которых я могу думать:

Создайте свои ландшафтные вершины как плоскую сетку. Используйте Vertex Texture Lookups для запроса вашей карты высот и модуляции высоты (возможно, вашего компонента Y) каждой точки. Это, вероятно, было бы самым простым, но я не думаю, что поддержка браузера для него очень хороша прямо сейчас. (На самом деле я не могу найти примеров)
Загрузите изображение, отрините его на холст и используйте его для чтения значений высоты. На основе этого создайте статическую сетку. Скорее всего, это будет быстрее, поскольку шейдеры делают меньше работы. Однако требуется больше кода для сборки сетки.

Для примера чтения данных изображения вы можете проверить этот вопрос SO.

Ответ 3

Возможно, вас заинтересует мое сообщение в блоге на тему: http://www.pheelicks.com/2014/03/rendering-large-terrains/

Я сосредотачиваюсь на том, как эффективно создавать геометрию ландшафта, чтобы вы получили адекватный уровень детализации в ближнем поле, а также далеко.

Вы можете просмотреть демо-результат здесь: http://felixpalmer.github.io/lod-terrain/ и весь код включен в github: https://github.com/felixpalmer/lod-terrain

Чтобы применить текстуру к местности, вам нужно выполнить поиск текстуры в шейдере фрагмента, сопоставляя местоположение в пространстве с положением в вашей текстуре. Например.

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

Ответ 4

В зависимости от ваших навыков GLSL вы можете написать вершинный шейдер GLSL, назначить текстуру одному из ваших каналов текстуры и прочитать значение в вершинном шейдере (я считаю, вам нужна современная карта для чтения текстур в вершинном шейдере но это может быть просто показ моего возраста: P)

В вершинном шейдере переведите значение z вершины на основе значения, считанного с текстуры.

Ответ 5

Babylon.js делает это чрезвычайно простым в реализации. Вы можете увидеть пример: Платформа высоты карты

Они даже реализовали с ним физический движок Cannon.js, поэтому вы можете обрабатывать конфликты: Карта высот с конфликтами

Примечание: начиная с этой записи он работает только с платиновым плагином cannon.js, а трение не работает (должно быть установлено в 0). Кроме того, убедитесь, что вы установили местоположение сетки/самозванца до того, как вы установили физическое состояние, или вы получите странное поведение.