Webgl tileable non-repeating textures

Question

큰 영역을 다루는 WebGL (MrDoob의 Three.js 사용)에서 사용할 수있는 기법이 있습니까? 반복되는 것처럼 보이지 않는 임의의 질감을 가진 돌담이나 자갈 바닥. http://www.timeref.com/webgl_house_test2.html에 예가 있습니다. 이 작업을 수행하기 위해 셰이더를 사용할 수 있습니까?

Answer 1

우선 멋진 데모!

당신의 질문에 관해서 : 이것은 시간의 새벽부터 밤에 엔진 프로그래머를 지키고있는 무언가이다. :)

반복되는 텍스처의 가시성을 완화하기 위해 수행 할 수있는 몇 가지 작업이 있습니다. 처음이자 가장 명백한 것은 단순히 반복되는 텍스처를 사용하지 않는 것입니다! 가상 텍스처라고 불리는이 일반적인 경우에는 약간 까다 롭습니다 (RAGE의 Megatexture는 내가 아는 유일한 상용 구현 중 하나입니다). 그러나 풍경을 텍스처링하는 것과 같이 제한된 용도로 사용하면 좀 더 쉽게 만들 수 있습니다. 나는 그러한 접근이 대부분의 필요에 과잉이라고 생각한다.

상황을 돕는 몇 가지 간단한 방법이 있습니다. 셰이더에서 서페이스 디테일을 생성하는 경로 (비쌀 수 있음)를 원한다면 출력에 다양한 도형을 적용 할 때 많은 양의 마일리지를 얻을 수 있습니다. (만델 브로 세트와 같은 것을 생각해보십시오.)하지만 그것은 일반적으로 아티스트가 제어하기가 더 어렵습니다. 반복되는 텍스쳐를 반복적으로 보이게 만드는 방법에 관해서는 interesting resources이 있습니다. 그러나 벽돌이나 타일과 같이 매우 규칙적인 패턴으로 텍스처를 엉망으로 만드는 경향이 있습니다.

내가 아는 가장 예술가가 쉽게 접근 할 수있는 경로는 세부 텍스처를 사용하는 것일 것입니다. 이들은 두 가지 방법으로 작동 할 수 있습니다. 더 큰 반복 패턴에 fine grained detail을 추가하거나 반복 패턴 상단에 larger layer of variance을 추가하여 단조 로움을 없앨 수 있습니다. 두 가지 경우 모두 블렌드가 매우 간단하고 런타임에 많은 영향을 미치지 않습니다.

그 밖의 모든 것이 실패하면 반복 된 텍스처를 계속 사용할 수 있지만 기본 텍스처를 더 다양하게 만들 수 있습니다. In은 여전히 ​​멀리에서 재미있어 보일지 모르지만, 실제로 앱의 유형에 따라 다릅니다. 사용자가 첫 번째 사람의 관점에서 걸어 다닐 것이라는 의도라면 충분할 것입니다. 당신이 비행을하는 경우에, 더 쉽게 눈에 띄게 일 수 있었다. (하지만이 경우에는 예제와 같이 많은 반복이있는 작은 텍스처가 필요하지 않을 것입니다.) 물론 여기서는 더 많은 텍스처 메모리와 성능 히트를 사용합니다.

당신은 아마 지금까지이 문제에 대한 은색 총알 해결책이 없다는 것을 깨달았을 것입니다. 대부분의 경우 앱의 시각적 요구 사항과 실적 요구 사항의 균형을 맞추기위한 것이므로 모든 프로젝트에서 다르게 적용될 수 있습니다.