Unity의 Trrain처럼 그레이 스케일을 높이로 대체하는 방법을 사용하면,
2D의 지형도도 간단하게 만들 수 있을 것이다.

이것을 WebGL과 셰이더로 만들어 보았다.
[DEMO]ㅡㅡㅡ//나의 거짓말. xy · 마 p 겐 /

즉…

이것을,

이렇게......

이렇게!

셰이더 설명

#define R_LUMINANCE 0.298912
#define G_LUMINANCE 0.586611
#define B_LUMINANCE 0.114478

precision mediump float;
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;
uniform sampler2D uSampler;
uniform sampler2D uTex;

const vec3 monochromeScale = vec3(R_LUMINANCE, G_LUMINANCE, B_LUMINANCE);

void main(void) {
  vec4 color = texture2D(uSampler, vTextureCoord);
  float grayColor = dot(color.rgb, monochromeScale);

  vec4 color2 = texture2D(uTex, vec2(grayColor, 0.5));
  gl_FragColor = color2;
}

거의 템플리 그레이 스케일 변환 셰이더.

괴롭힌 것은 이 부분만.

  vec4 color2 = texture2D(uTex, vec2(grayColor, 0.5));
  gl_FragColor = color2;

그레이 스케일 값 = X 축의 값으로,
고도 컬러용의 텍스처 화상으로부터, 출력 컬러를 추출하고 있다.


목표대로 왼쪽 이미지에이 셰이더로 필터를 걸면,
지도(지형도) 형태로 그려졌다.

편집 도구화의 길

셰이더 부분은 시원하게 끝났지만, 이것을 편집 툴화하는 과정에서 몇 가지 고민했다.

캔버스를 2개 겹치고 있다

기본 회색조 이미지를 편집하는 방법은
흑백 브러시 이미지를 준비하고 베이스에 겹쳐서 그려가면 간단하게 끝난다.

다만, 이 편집중의 canvas에 쉐이더를 반영하는 방법을 모르고, 결국,
canvasA로 편집 → canbasB에 텍스처로서 읽는 방법을 취하고 있다.

지금의 캔버스가 2개 있는 상태는, 아무래도 무딘 냄새라고 생각하고 있는데, 그런데 어떻게 한 것인가.

브러시 반영이 느림

canvasA로 편집, canvasB에 텍스처 읽기,라는 흐름이 되어 있기 때문에,
브러시 드래그시 연속 업데이트가 canvasB에 반영되는 것이 느립니다.
느리기 때문에 지금은 드래그 종료시 canvasB에 반영되도록 제한하고 있다.
canvasA를 표시해 보면, 매끄럽게 브러시가 그려지고 있는 것이지만.

베이스가 되는 노이즈 화상의 자동 생성을 포기했다

지도용으로 원하는 것은 Photoshop의 "구름 모양"으로 만드는 이미지.


펄린 노이즈를 사용하면, 이런 노이즈 화상을 만들 수 있는 것 같지만,
요구하고 있는 화상을 생성할 수 없었기 때문에, 일단 포기했다.
(뱀이 찍은 것 같은 이미지가 된다)

대신 Photoshop의 배치 처리로 30장 정도 이미지를 준비했다.

Three.js를 포기하고 Pixi.js로

셰이더를 만들 때 고도 컬러용 텍스처 이미지를 시전하는 부분이 잘되지 않고,
어쩔 수 없이 Pixi.js로 환승했다.
어땠어?

소스 코드

소스 코드 세트, 이미지도 포함하고 있습니다.
htps : // 기주 b. 코 m / 나의 소 / 그 te r-ma p

MIT 라이센스라고 하기로 하고 있으므로, 좋아하게 사용해 주세요.

어쩌면 이번에 가장 어려웠던 것은 코드를 작성하는 것보다
높이용 컬러라든지, 딱 좋은 브러쉬 이미지를 만드는데 시행착오하는 것이었다고 생각하기 때문에.