WebGL - 높이 맵이있는 지형이 터야합니다.

Question

WebGL을 사용하여 3D 지형을 만들려고합니다. 나는 지형에 대한 텍스처와 jpg를 가지고 있고, 높이 값 (-1 : 1)을 가진 또 다른 JPG가 있습니다.

다양한 래퍼 라이브러리 (예 : SpiderGL 및 Three.js)를 보았습니다.하지만 sutable 예제를 찾을 수 없으며 (Three.js에서와 같이) 코드가 문서화되지 않았고 그것을하는 방법을 알아낼 수 없습니다.

누구나 나에게 좋은 자습서 또는 예제를 제공 할 수 있습니까?

예를 들어, Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html에 제가 원했던 것이 있습니다. 문제는 산의 색상과 높이 값을 무작위로 생성한다는 것입니다. 두 개의 다른 이미지 파일에서이 값을 읽고 싶습니다.

도움이 될 것입니다. 덕분에 내가 생각할 수있는

Answer 1

두 가지 방법 :

1. 평평한 그리드로 풍경의 정점을 만듭니다. Vertex Texture Lookups를 사용하여 하이트 맵을 조회하고 각 점의 높이 (아마 Y 구성 요소)를 변조하십시오. 이것은 아마도 가장 쉬운 방법 일 것이지만, 브라우저 지원이 현재로서는 매우 좋다고 생각하지 않습니다. (실제로 어떤 예제도 찾을 수 없습니다.)
2. 이미지를로드하고 캔버스로 렌더링 한 다음이를 사용하여 높이 값을 다시 읽습니다. 정적 메쉬를 기반으로 빌드하십시오. 셰이더의 작업량이 적기 때문에 렌더링 속도가 빨라집니다. 그러나 메쉬를 작성하는 데 더 많은 코드가 필요합니다.
이미지 데이터를 읽기의 예를 들어

, 당신은이 GitHub의에 이상 게시 this SO question.

Answer 2

체크 아웃 확인하실 수 있습니다 :

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

Answer 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) 

Answer 4

당신의 GLSL 능력에 따라, 당신은 당신의 질감 채널 중 하나에 질감을 부여하는 GLSL 정점 셰이더를 작성할 수, 나는 당신이 텍스처를 읽을 현대 카드가 필요합니다 생각 (버텍스 쉐이더의 값을 읽어 버텍스 쉐이더에서는 단지 내 나이를 나타낼 수 있습니다 : P)

버텍스 쉐이더에서는 텍스처에서 읽은 값을 기반으로 버텍스의 z 값을 변환합니다.

Answer 5

Babylon.js는 이것을 매우 쉽게 구현합니다. 그들은 심지어 그와 함께 Cannon.js 물리 엔진을 구현했습니다 Heightmap Playground

, 그래서 당신은 충돌을 처리 할 수 ​​있습니다 : 당신은에 예를 볼 수 있습니다 Heightmap with collisions

참고 : 그것을 쓰는 것은 단지 대포와 함께 작동이의로 .js 물리 플러그인 및 마찰이 작동하지 않습니다 (0으로 설정해야 함). 또한 물리 상태를 설정하기 전에 메쉬/사기꾼의 위치를 ​​설정해야합니다. 그렇지 않으면 이상한 동작이 발생할 수 있습니다.