셰이더를 사용하여 웹 디자인에서 사실적인 특수 효과 만들기

WebGL은 웹에서 가능한 것의 한계를 실험하고 테스트하는 주제가 되었습니다. 거의 매일 우리는 그것에 의해 구동되는 장대한 솔루션을 우연히 발견합니다. 증거로 우리는 이미 많은 실제 프로젝트를 조사했습니다.

오늘 우리는 셰이더 사용의 이점을 보여주는 몇 가지 개념을 탐구할 것입니다. 우리는 GLSL에 집중할 것입니다.

GLSL은 그래픽 라이브러리 셰이더 언어를 나타냅니다. 이것은 WebGL의 필수적인 부분이며 우리가 야생에서 볼 수 있는 놀라운 솔루션의 대부분을 담당합니다. 이름에 걸맞게 개발자에게 그래픽을 직관적으로 조작할 수 있는 도구를 제공합니다. 올바른 손에는 거의 모든 아이디어를 실현할 수 있습니다.

Codepen은 이미 셰이더의 도움으로 생성된 매혹적인 프로젝트로 가득 차 있습니다. 그러나 사실적인 효과를 보여주는 것이 가장 인상적이고 감동적입니다. 그리고 우리는 이것을 오늘의 컬렉션에서 증명할 것입니다. 뛰어들어봅시다.

Stefan Weck의 Waterdroplet WebGL 셰이더

Stefan Werk는 그의 걸작으로 요약을 시작하여 고급 기술이 진정한 마술임을 모든 사람에게 증명합니다. 그는 창문(또는 우리의 경우 스크린)에 떨어지는 비를 재현했습니다. 빗방울의 행동과 구현은 너무 리얼해서 만지고 싶어집니다. 여기서 JavaScript는 비 시뮬레이션 뒤에 있는 반면 WebGL 셰이더는 끈적거리는 효과와 굴절을 담당합니다.

Jonathan Blair의 Three js 워터 셰이더 / David Hartley의 ShaderToy 편집

아마도 다음 두 프로젝트는 우리 컬렉션에서 셰이더를 사용한 가장 인상적인 예일 것입니다. 각각은 뒤에서 일어나는 모든 일에 대처하기 위해 컴퓨터를 최대 용량으로 작동하도록 강요하지만 그럼에도 불구하고 그만한 가치가 있습니다. 잔물결, 크고 작은 파도, 변화하는 색상과 함께 각 개념은 믿을 수 없을 정도로 사실적이고 매우 영감을 줍니다.

Jonathan Blair가 수면만 재현한 반면, David Hartley는 수면에 구형을 부여하여 능숙하게 지구를 모방함으로써 사물을 약간 흥미롭게 만들었습니다. 두 프로젝트 모두 감동적입니다.

Omar Shehata의 Pixijs.v3 셰이더 예제

Pixi.js로 구동되는 Omar Shehata의 이 매혹적인 개념은 안개 효과에 대한 매우 상세한 시뮬레이션으로 당신을 놀라게 할 것입니다. 아름다운 자줏빛 색상과 어두운 배경으로 장식된 이 연기 구름은 믿을 수 없을 정도로 사실적으로 보입니다. 그 행동은 잘 생각한 것입니다. 컨셉은 그냥 황홀합니다.

Boris Šehovac의 Snowfall WebGL 셰이더

이 개념은 그 이름에 걸맞게 살아 있습니다. 매우 현실적입니다. Boris Sehovac은 깊이를 재현하기 위해 다양한 크기의 눈송이, 다양한 수준의 흐릿함 및 다양한 속도를 사용했습니다. 게다가 그는 구성이 왼쪽에서 오른쪽으로 또는 그 반대로 방향을 바꾸도록 강제하여 바람을 시뮬레이션하려고 시도했습니다. 그 결과, 우리는 일종의 작은 눈 폭풍을 목격할 수 있습니다. 기본 WebGL 셰이더는 이 아름다움 뒤에 있습니다.

아난드 다바수렌의 개념

이전 예가 좋은 인상을 남겼다면 Anand Davaasuren의 개념은 의심할 여지 없이 눈을 즐겁게 할 것입니다. 솔루션은 동일한 아이디어를 기반으로 합니다. 떨어지는 눈 효과는 한 가지 예외가 있지만 그 중심에 있습니다. 이 예에서는 눈송이 대신 하트를 사용합니다. 그 결과 저항하기 힘든 러블리한 분위기를 자아냈다. 잔인할 정도로 현실적이지 않을 수도 있지만, 떨어지는 효과와 하트의 행동은 놀라울 정도로 세련되었습니다.

David Hartley의 Cloud Shader

이것은 David Hartley가 만든 또 다른 걸작입니다. 이번에는 작가가 구름과 구름의 떠 다니는 행동에 대한 자신의 견해를 보여줍니다. 다시 말하지만, Pixi.js는 이 장대한 프로젝트 뒤에 있습니다. 여기에서 카메라는 구름을 뚫고 지나가므로 아이디어의 전체 아름다움을 느낄 수 있습니다. 그러나 다윗에게는 그것으로 충분하지 않았습니다. 그는 또한 커서를 이리저리 움직여서 장면을 탐색할 수 있는 기회를 제공했습니다. 정말 놀랍습니다.

14islands의 파이어 셰이더

얼어붙은 눈보라와 차갑고 푹신한 구름에서 뜨거운 물질에 이르기까지 성공적인 화재 시뮬레이션 시도가 있습니다. 14islands의 팀은 이 아이디어를 실현하기 위해 많은 파티클과 커스텀 셰이더를 사용합니다. 결과적으로 우리는 모든면에서 따뜻함을 발산하는 연기와 함께 작은 모닥불을 볼 수 있습니다.

GLSL: Liam Egan의 Chrome

Liam Egan의 Chrome은 밀도가 높은 액체가 특징입니다. 이 프로젝트는 사악한 T-1000이 그의 액체 금속 구성을 보여줬던 서사시 터미네이터 2의 한 장면을 약간 연상시킵니다. 개념은 의심의 여지없이 인공적으로 느껴집니다. 그러나 행동과 광택있는 표면은 믿을 수 없을만큼 실물처럼 보입니다. 또한 마우스를 위아래로 움직여 부드럽게 매개변수를 변경할 수 있습니다.

Martin Laxenaire의 파급 효과

Martin Laxenaire의 이 프로젝트는 실제로 적용된 셰이더의 완벽한 예입니다. 여기에서 저자는 마우스를 가져가면 이미지가 커튼처럼 움직이는 실제 파급 효과를 끌어냈습니다. Curtains.js는 이 개념을 뒷받침합니다. 유일한 단점은 저사양 컴퓨터가 "소화"하기에는 여전히 너무 무겁기 때문에 웹사이트의 모든 이미지에 이 효과를 제공하기에는 너무 이르다는 것입니다.

파비앙 모트의 반짝이는 반딧불이

Fabien Motte의 프로젝트에는 실용적인 솔루션도 있습니다. 그러나 수직축을 중심으로 무질서하게 움직이는 이 밝은 반딧불이를 의미하는 것은 아닙니다. 우리는 때때로 화면에 충돌하는 글리치 효과에 대해 이야기하고 있습니다. 정말 놀랍습니다. 그리고 요즘 유행하기 때문에 이 개념은 실험을 위한 완벽한 기초가 될 수 있습니다.

약간의 그늘을 던져라

셰이더는 강력한 도구입니다. 이 기사에서 현실적인 솔루션에 중점을 두었지만 더 인공적으로 보이는 놀라운 개념이 많이 있습니다. 완전히 다른 장면과 구성을 만들 수 있습니다. 바로 여기에서 상상력을 마음껏 펼칠 수 있습니다.

그러나 큰 힘에는 큰 책임이 따른다. 이 전체 셰이더에 뛰어들기 전에 고려해야 할 몇 가지 문제가 있습니다.

첫째, 브라우저 호환성 문제가 있습니다. 모든 사람이 그 아름다움을 즐길 수 있는 것은 아닙니다. 둘째, 모든 컴퓨터가 장애 없이 처리할 수 있는 것은 아닙니다. 이것은 셰이더가 적어도 아직까지는 보편적인 도구가 아니라는 것을 의미합니다.