JavaScript 단순 / 펄린 노이즈

Question

JavaScript에서 다음과 유사한 결과를 제공하는 perlin / simplex / value noise 함수를 만들려고합니다.

(참고 :이 이미지에는 이미 임계 값이 적용되어 있습니다. 임계 값없이 원합니다.)

이제 이틀 동안 인터넷을 통해 검색했습니다. 노이즈와 많은 코드를 설명하는 링크는 많지만 JavaScript에는 없습니다. 변환하려고 할 때마다 이상한 결과가 나타납니다. 내 시도 중 일부는 다음과 같습니다.

• http://jsfiddle.net/GZCye/
• http://jsfiddle.net/Lk56f/ (이를 기반으로 )
• http://pastebin.com/nMA40SrL (어떤 이유로 Fiddle에서 실행되지 않음, 이를 기반으로

  문제의 일부는 숫자 유형을 적용하기 어려운 JavaScript의 비트 연산자 사용에서 비롯된 것 같습니다.

  내가 찾고있는 것은 작동하는 자바 스크립트 노이즈 (유형에 관계없이)의 예입니다.

  또한 내가 게시 한 이미지 (임계 값 이전)와 유사한 패턴으로 이어질 수있는 매개 변수와 관련된 모든 정보 또는 빠른 실행을 위해 필요한 최적화 팁에 대해 현상금을 기꺼이 제공 할 것입니다. 가능한 한 (하지만 JavaScript에서).

Answer 1

이 요지 에있는 코드를 사용하겠습니다.

Answer 2

오랜만에 이와 같은 작업을했지만 중간 변위를 사용했습니다.무슨 일이 일어나고 있는지 알아낼 수 있다면 도움이 될 것입니다.

http://www.somethinghitme.com/projects/canvasterrain/

또한 여기

https://github.com/loktar00/Javascript-Canvas-Terrain-Generator

여기에 멋진 조명으로 구현 된 노이즈 부분 만있는 바이올린이 있습니다.

http://jsfiddle.net/loktar/4qAxZ/

행운을 빕니다 :).

Answer 3

이것은 꽤 오래되었지만 다른 사람에게 여전히 유용 할 수 있습니다. Perlin 및 Simplex 노이즈를 HTML5 캔버스에 렌더링하는 자바 스크립트 앱을 만들었습니다. 여기에서 확인하세요. http : //lencinhaus.github.com/canvas-noise

이 앱을 사용하면 노이즈 계산 및 렌더링과 관련된 모든 매개 변수를 조정하고 결과 텍스처를 저장할 수 있습니다. 또한 공유 할 수 있도록 URL에 매개 변수를 추가합니다. 예 : 이 구성 은 귀하가 보여준 것과 매우 유사한 텍스처를 생성합니다.

도움이되기를 바랍니다.

Answer 4

다음은 2D / 3D Perlin 노이즈에 대한 코드입니다.RequireJS의 AMD 모듈 구문을 사용하지만 AMD 로더를 사용하지 않는 경우 제거 할 수 있습니다. 라코 디스

Answer 5

내 사용 사례에 대해 더 나은 결과를 제공하는이 솔루션을 찾았습니다.

http://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html

큰 순열 행렬을 사용하고 있습니다. 라코 디스

사용 방법 : 라코 디스