WEBGL로 액체 효과를 만드는 방법

Feb 5, 2026
어떻게
Liquid effect Creative Bloq logo

많은 웹 디자이너들이 사이트 디자인에 큰 영향을 미치는 방법을 찾아야하므로 사용자의주의를 끌 수 있습니다. 헤더 그래픽을 사용하여 방문 페이지 메뉴 아래에 슬라이드 쇼를 배치하고 이제는 대다수의 사이트의 대다수 가이 같은 형식을 따르기 위해 수년 동안 진화 해 왔습니다. 웹 사이트 빌더 짐마자

오늘날 다른 웹상 사이트에서 '하루의 사이트'를이기는 디자인은 일반적으로 조금 더 독특한 것입니다. WebGL은 이것을 위해 훌륭합니다. 대화 형 요소를 추가하면 사용자의 관심을 끌 수 있으며 이것이 방금 방문한 다른 사이트와 동일하지 않다는 것을 보여줄 수 있습니다. 그것은 거대한 슬라이드 쇼를 가진 것보다 훨씬 더 흥미로운 사이트를 만듭니다. 시차 스크롤 ...에 복잡한 요구가있는 사이트가있는 경우 웹 호스팅 서비스가 켜져 있습니다.

  • 14 훌륭한 방문 페이지 디자인

이 튜토리얼에서 스플래시 효과를 얻으려면 액체, 반사 표면이 추가되며, 이로 인해 카메라쪽으로 애니메이션이 앞으로 이동합니다. 모습과 느낌을 완성하기 위해 앞으로 나아가는 입자도있을 것입니다. 센터에서 사이트 로고가 있으며 전체 장면은 사용자의 마우스 이동에 반응하여 콘텐츠가 이동하고 3D가 실제로 눈에 띄게됩니다.

그만큼 로고 디자인 투명한 PNG로 렌더링됩니다 (안전 유지 클라우드 스토리지 ), 그래서 이것은 자신의 디자인으로 쉽게 맞춤 설정할 수 있습니다. 조명은 또한 색상이 궤도를 궤도하고 장면 내의 다른 파도를 강조하도록 움직일 것입니다.

파일을 다운로드하십시오 이 자습서의 경우.

01. 초기 변수를 추가하십시오

프로젝트 파일에서 시작 폴더를 열고 코드 편집기로 드래그하십시오. 열다 ' index.html. '그리고 자바 스크립트 라이브러리가 이미 연결되어 있음을 알 수 있습니다. 빈 스크립트 태그 내부에는 코드가 이동할 수 있습니다. 여기서 WebGL이 프로젝트를 실행할 수 있는지 확인하기 위해 탐지되면 장면에서 사용되는 전체 범위의 변수가 추가됩니다. 

 if (! repector.webgl) repector.AddgetWebGlMessage ();
var screen_width = window.innerWidth;
var screen_height = window.innerHeight;
var 렌더러, 카메라, 장면, movergroup, floorgeometry, floormaterial, pointlight, pointlight2, pgeometry;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100;

02. 더 많은 변수를 만듭니다

변수의 다음 블록은 워터 플로어가 얼마나 큰지와 초기 마우스 위치와 함께 움직이는 속도를 처리합니다. 화면의 중심이 작동 중이며 개선 된 잡음 라이브러리가 물의 표면을 만드는 데 사용됩니다. 

 var floor_width = 3600;
var floor_depth = 4800;
var move_spd = 1.9;
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerWidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = 새로운 개선 된 ();
var textureLoader = new three.textureLoader ();

03. 마우스를 계산하십시오

일부 최종 변수는 장면의 사후 처리 효과에 추가됩니다. 마우스 이동을 확인하는 이벤트 리스너가 추가됩니다. 장면이 디스플레이 포트에서 이동하여 마우스 이동에 반응합니다. 여기에 추가 된 함수는 허용되는 움직임의 양을 사용할 수 있습니다.

04. 사후 처리 설정을 변경합니다

그 ' 매개 변수 '함수는 사후 처리 효과의 모든 설정이 저장됩니다. 당신이 무엇이든 바꿔야 할 필요가 있다면, 이것은 그것을 할 수있는 장소입니다. 틸트 시프트 블러는 처음 네 줄로 덮여 있으며, 필름은 나머지 선에서 통과합니다. 이것은 주로 화면 강도 및 소음 강도를위한 것입니다.

05. 최종 매개 변수를 설정하십시오

마지막 매개 변수는 화면 가장자리 주위의 어두운 비 네트를위한 것입니다. 그 ' init. '그리고' 생명 있는 '함수가 실행되도록 호출됩니다. 그 ' 생명 있는 '기능은 튜토리얼에서 훨씬 늦게 생성되지만' init. '기능이 여기에 생성됩니다. 카메라와 장면은 3D 콘텐츠를 볼 수 있도록 설정됩니다. 

 EffectVignette.uniforms [ "offset"]. 값 = 1.0;
  EffectVignette.uniforms [ "어둠"].value = 1.3;
}
init ();
생명 있는();
함수 init () {
  카메라 = 새로운 3.PerspectiveCamera (70, window.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  장면 = 새로운 3.scene ();
  scene.fog = New three.FogExp2 (0x1c3c4a, 0.00045);

06. 빛을 내리십시오

장면의 내용을 보려면 4 개의 표시등이 배치됩니다. 첫 번째는 장면의 기본적인 분위기를 얻는 것만으로 사용되는 반구 빛입니다. 다음으로 장면의 한가운데에 밝은 푸른 빛을 추가하는 중심 빛입니다. 이것은 전체 장면에 빛을주기 위해 한쪽으로 설정됩니다. 

 VAR HEMISPHERELIGHT = NEW 3.HEMISPHERELIGHT (0xE3FEFF, 0xE6DDC8, 0.7);
Scene.add (Hemispherelight);
hemispherelight.position.y = 300;
var centerlight = 새로운 3.Spotlight (0xB7F9FF, 1);
Scene.add (가운데 라이트);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
CenterLight.Decay = 5;

07. 애니메이션 조명

다음 두 개의 표시등이 추가됩니다. ' 포인트 라이트 '그리고' Pointlight2. '컬러 조명이 장면 주위의 반대 방향으로 동그라미가 있으므로 빛이 끊임없이 변화합니다. 첫 번째는 분홍색 빛이고 두 번째는 오렌지색 빛입니다. 반사 이미지의 경로 및 형식은 마지막 두 줄에 설정됩니다. 

 Pointlight = New 3. 포인트 라이트 (0xE07BFF, 1.5);
pointlight.position.z = 200;
Scene.add (Pointlight);
Pointlight2 = New 3. 포인트 라이트 (0xFF4E00, 1.2);
pointlight2.position.z = 200;
Scene.add (Pointlight2);
var path = "img /";
var format = '.jpg';

08. 반짝이는 표면

액체 표면은 반사, 반짝이 표면을 가지며 리플렉션 큐브를 만들어 이루어집니다. 이것은 액체의 표면에 반사 될 360도 스카이 박스가있는 큐브입니다. 그 ' urls. '배열은로드 할 이미지가 들어 있으며, 자료가 설정됩니다.

09. 일부 그룹을 설정하십시오

발동기 그룹에는 나중에 첨가 될 약간의 입자가 포함되어 있으며, 바닥 그룹은 액체의 표면을 포함합니다. 새로운 3D 객체가 생성되어 그 표면을 유지합니다. 2 개의 액체 표면이있을 것입니다. 하나는 반사 재료를 가지며 두 번째는 와이어 프레임을 가질 것입니다. 플로시 재료 '여기에 정의 된대로. 

 MoverGroup = New 3.Object3D ();
Scene.add (MoverGroup);
var floorgroup = new three.Object3D ();
var Floormaterial = New 3. ^ 폰밀도 ({
색상 : 0xeeeeee, Side : Three.Douribeide, 블렌딩 : 3.AdditiveBlending, 와이어 프레임 : True
});
Floorgeometry = New 3.PlaneGineGeplineGeometry (floor_width + 1200, floor_depth, floor_res, floor_res);

10. 표면을 만드십시오

Create liquid effects: make the surface

첫 번째 액체 표면이 추가되면 이것에 대한 반사 맵이 매우 명백하고 안개는 배경과 표면을 함께 혼합시키는 데 도움이됩니다.

두 액체 표면이 여기에 " 플로어 메쉬 '그리고' Floormesh2. ' 그들은 ' 바닥 그룹 '그런 다음 카메라 앞에서 좋은 시야각으로 회전했습니다. 이것은 직접 평평하지는 않지만 그런 것처럼 보이는 것처럼 약간 각진되었습니다. 

 var Floormesh = New 3.Mesh (Floorgeometry, Cubematerial);
var Floormesh2 = New three.Mesh (Floorgeometry, Floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
floorgroup.add (Floormesh);
floorGroup.add (Floormesh2);
Scene.add (floorgroup);
floormesh.rotation.x = math.pi / 1.65;
floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180;

11. 부유 한 입자를 추가하십시오

Create liquid effects: add floating particles

부동 입자가 장면을 채우고이 모든 것이 렌더링 기능에 애니메이션되면 카메라쪽으로 움직임 감각이 나타납니다.

여기서 코드 섹션은 빈 기하학 객체를 생성 한 다음 입자로 작동하는 2,000 개의 정점을 2,000 정점으로 만듭니다. 이들은 X, Y 및 Z 축의 임의 위치에 분산됩니다. 이들은 액체 바닥의 표면 바로 위에 떠올 수 있습니다. 

 pgeometry = New 3.Geometry ();
Sprite = TextureLoader.load ( "img / sprite.png");
for (i = 0; I <2000; i ++) {
  var vertex = new three.Vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometry.vertices.push (정점);
}

12. Look을 만드십시오

여기에 정의 된 재료는 입자가 어떻게 보이는지를 설정합니다. 이전 단계에서 이미지를로드하고 재료가 생성되면 각 입자의 이미지로 사용됩니다. 이는 모든 입자에 대한 각 지오메트리의 각 지점에 적용됩니다. 그런 다음이 다음 장면에 추가됩니다.

13. 로고를 추가하십시오

Create liquid effects: add the logo

투명한 PNG 이미지 인 로고에 추가하면 장면의 중앙에 놓고 나중에 자신의 로고로 교체 할 수 있습니다.

로고가 화면 중앙에 놓이고 카메라에 직면 할 평평한 평면에 추가됩니다. 로고는 약간 투명하게 만들어졌으며 첨가물 블렌드가 주어 졌으므로 라이터 객체가 뒤에서 숨겨져있을 때 더 많이 볼 수 있습니다. 이것은 위치에 있고 장면에 배치됩니다. 

 스프라이트 = TextureLoader.load ( "img / logo.png");
Geometry = new 3.PlanePlaneBufferGeometry (500, 640, 1);
재질 = 새로운 3.meshlambertmaterial ({
  투명 : 사실, 불투명도 : 0.8, 블렌딩 : 3.AdditiveBlending, Map : Sprite, Side : Three.Dourleside
});
var plane = new three.mesh (기하학, 재료);
plane.position.set (0, 70, 1800);
Scene.add (비행기);

14. 렌더링 설정을 추가하십시오

렌더러는 부드럽고 앨리어리싱 된 가장자리가 부드럽고 이제는 배경색이 설정됩니다. 이것은 장면이 HTML 페이지에 있도록 문서 본문에 추가됩니다. 사후 처리 효과는 다양한 렌더링 및 셰이더 패스가 초기화되어 설정되어 설정됩니다.

15. 패스를 만드십시오

필름과 글리치 패스가 추가되면 모든 패스를 함께 작성하는 효과 작성기가 생성됩니다. 이들은 하나씩 하나씩 작곡가에게 추가되며 결국 잠재 고객 디스플레이를위한 화면으로 렌더링됩니다.

16. 'init'기능을 닫으십시오

장면의 초기화에는 마지막 몇 가지 설정이 추가됩니다. 사후 처리를위한 매개 변수가 설정되면 파도의 설정이 호출되고 브라우저의 크기가 조정될 때마다 이벤트 수신기가 추가됩니다. 이렇게하면 디스플레이가 새 차원에 맞게 업데이트 될 수 있습니다.

17. 파도를 설치하십시오

이제는 액체의 표면에 파도가 생성됩니다. 이는 X 및 Z 축의 바닥 기하학의 각 꼭지점을 이동하여 Y 축에서 위쪽으로 이동시켜 수행됩니다. 이 단계에서 ' ...에 대한 '루프는 x 및 z 축을 위해 생성됩니다. 

 함수 setwaves () {
  stepcount ++;
  movergroup.position.z = -move_spd;
  var i, ipos;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  (i = 0; i & lt; floor_res + 1; i ++) {
  를 위해 (varj = 0; j & lt; floor_res + 1; j ++) {
  ipos = i + offset;

18. 파도를 만드십시오

모든 정점이 같은 방식으로 위쪽으로 확장되지 않습니다. 카메라에서 가장 멀리 떨어져있는 멀리 떨어져 있으면 옆구리가 약간 덜 될 것이며, 카메라에 가장 가까운 카메라가 가장 적은 것으로 확장됩니다. 이것은 뒤쪽과 측면을 약간 더 흥미롭게 만듭니다.

IF ((i & gt; 30) || (j & lt; 12) || (j & gt; 48)) { floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * floor_ht; } else (i & gt; 25 & amp; & amp; i & lt; 30) { floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 1.2); } else { floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (iPO / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 2); } } } floorgeometry.verticeNeedUpdate = true; }

19. 크기 조정 및 애니메이션

창이 크기가 조정되면 여기의 함수는 16 단계에서 설정된 리스너에서 호출됩니다. 카메라, 렌더러 및 작곡가는 모두 브라우저 창의 새 차원과 일치하도록 여기에서 재설정됩니다. 애니메이션 함수는 60fps에서 스스로 설정하여 렌더링 함수를 호출하여 디스플레이를 업데이트합니다. 

 기능 onWindowResize () {
  camera.aspect = window.nnerWidth / window.innerHeight;
  camera.updateProjectionMatrix ();
  renderer.setsize (window.innerWidth, window.innerHeight);
  composer.setsize (window.innerWidth, window.innerHeight);
}
기능 애니메이트 () {
  requestanimationFrame (애니메이션);
  세우다();
}

20. 모든 조치 프레임을 설정하십시오

렌더링 함수는 모든 프레임이라고합니다. 점등은 장면에서 궤도를 궤도로 설정하고 카메라는 마우스 이동에 따라 위치에 있으며 조금 완화되어 점차적으로 움직 이도록 움직이게됩니다. 카메라는 항상 장면의 중심을 보게됩니다. 

함수 렌더링 () {
  var timer = -0.0002 * date.now ();
  pointlight.position.x = 2400 * math.cos (타이머);
  pointlight.position.z = 2400 * math.sin (타이머);
  pointlight2.position.x = 1800 * math.cos (-timer * 1.5);
  pointlight2.position.z = 1800 * math.sin (-timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  camera.position.y + = (-mousey - camera.position.y) * .05;
Camera.LookAt (scene.position);

21. 장면을 렌더링하십시오

Create liquid effect: render the scene

자주 사후 처리 효과 중 하나가 정상으로 돌아 가기 전에 화면을 유행하고 왜곡하는 것만으로 인해 화면에 글리치 효과가 발생합니다.

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com&nbsp;

웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 www.generateconf.com.

최종 단계에서 입자는 개별 정점에서 앞으로 이동하고 카메라에 도착하면 거리에 다시 배치됩니다. 이것은 업데이트되고 ' setwaves ' 기능은 파도가 앞으로 롤백되도록 호출됩니다. 장면은 효과 작곡가에 의해 렌더링됩니다.

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 웹 디자이너를 구독하십시오 ...에

관련 기사:

  • Three.js를 사용하여 WebGL 시작하기
  • 더 나은 로고를 만드는 11 단계
  • 18 웹 디자인 YouTube 채널을 볼 수 있습니다

어떻게 - 가장 인기있는 기사

대응 사이트 및 앱을 테스트하는 방법

어떻게 Feb 5, 2026

(이미지 크레디트 : 미래) 반응을 테스트하는 방법을 알고 싶다면 적절한 장소에 있습니�..

관점을 그리는 방법

어떻게 Feb 5, 2026

관점을 그려야하는 방법을 배우는 것은 전체 드로잉 프로세스를 정확하게 변경할 수 있습니다. 전통적으로 연필과 종이로 그리는 지 여부 그래�..

오래된 학교 Anaglyph 효과를 만듭니다

어떻게 Feb 5, 2026

(이미지 크레디트 : 트래비스 기사) anaglyph 효과는 콘텐츠를 감상하기 위해 빨간색과 파�..

Google reCAPTCHA로 봇을 중지

어떻게 Feb 5, 2026

(이미지 크레디트 : 미래) 봇을 지키는 것은 항상 숫자 게임입니다. 슬프게도, 사용하기 �..

단순한 색상 차트 만들기

어떻게 Feb 5, 2026

그립과 함께 [삼] 색 이론 수학이나 과학을 배우는 것처럼 조금 너무 많이 보일 수 있습니다. 당신은 당신이 만드는 것이 창조적이고 �..

Anatomy MasterClass : 당신의 수치가 완벽합니다

어떻게 Feb 5, 2026

이 마스터 클래스에서는 배우기 위해 따라야하는 기본 단계를 드러냅니다. 그림을 그리는 �..

오프라인으로 작동하는 앱을 빌드

어떻게 Feb 5, 2026

오랜 시간 동안 오프라인 기능, 배경 동기화 및 푸시 알림은 웹 대응 파트에서 기본 앱을 차별화�..

InDesign으로 혼합 잉크 생성

어떻게 Feb 5, 2026

페이지 1 / 2 : 혼합 잉크 견본을 만드십시오 혼합 잉크 �..

카테고리