WebGL Custom Shader Fluid on Image

Question

현재 THREE.js를 사용하여 WebGL 쉐이더에 관한 주제로 들어가려고합니다. 누군가 다음과 같은 시나리오에 대한 출발점을 줄 수 있다면 고맙겠습니다 :

유동체와 같은 물질을 만들고 싶습니다. 유동체와 같은 물질을 만들고 싶습니다. 나는 색상이«액체 소스»어디 그들이 처음에 있습니다에 표시되는 측면에서 출발점 역할을하는, 그것을 배경 이미지를 전달하고자이 http://cake23.de/turing-fluid.html

같은 작은. 이렇게 말하면 : 나는 초기 이미지를 정의한다. 그 다음 이미지는 흐르는 자기에 의해 그리고 사용자 상호 작용에 의해서 변형된다.

내가 진행 것이 어떻게 내 제한된 지식 :

나는 질감으로 원하는 이미지와 함께 비행기를 만들 수 있습니다. 위에서 (이미지와 카메라 사이에) 새로운 메쉬 (평면도?)를 만들고이 메쉬에 적용된 사용자 정의 정점 및 조각 셰이더가 있습니다. 그 쉐이더는 어쨌든 (이미지에서) 뒤에서 색상을 가져 와서 몇 가지 물리적 규칙을 따라 그 꼭지점을 움직여야합니다 ...

위의 예제는 코드가 축소되어 있지만 실제로는 너무 많은 것을 알고 있습니다. 나는 그것을 완전히 이해할 수있는 단순한 용어로 분해 할 수는 없다. 누군가가 나를위한 출발점 역할을하는 좀 더 단순한 개념을 줄 수 있다면 정말로 감사 할 것입니다. 이 같은 일을 해결

더 많은 페이지 : 당신이 원하는 모든 기본 개념 또는 아무것도에 대한 모든 링크 또는 참조에 대한

http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm

어쨌든

https://29a.ch/sandbox/2012/fluidwebgl/

https://haxiomic.github.io/GPU-Fluid-Experiments/html5/

음, 감사 공유 할 수 있습니다.

건배

편집 : 비슷한 결과를 (시각)이 이미지는 좋은 것처럼 얻기는 :

Answer 1

나는 비슷한 일을 달성하기 위해 노력하고있어. 나는 웹 서핑을 많이하고있다. 내가 사용할 수있는 힌트를 찾고 있습니다. 지금까지, 내 ​​결론은 다음과 같습니다

• 시도가

• three.js를 마법을 사용하여 자신을 지원하는 정말 쉐이더에서, 그것은 좋은 일이 이해하기 시작하는 방법이 될 수 대부분 조각 쉐이더에 그들을 쓰고 그들이 일하는 방법. 이 링크는 좋은 시작입니다. shader tutorial

• 유체의 동적 (자연/실제) 거동을 이해하는 것이 중요 할 수 있습니다. (방정식)

• 어쩌면 이것 역시 도움이 될 것입니다. Raindrop simulation

자세한 내용을 알고 싶으면 알려주십시오.

이미 생성 된 쉐이더를 발견했습니다. 어쩌면, 그들 중 누구라도 당신에게 많은 것을 배우지 않고 당신을 도울 수 있습니다. splash shaders

행운을 빌어 요.