와우 뿐인 30 개의 WebGL 실험!

보라, 위대한 약속을 지닌 위대한 도구가 눈에 들어와있다. 그것은 빠르고 부드럽습니다. 3D를 렌더링하고 통합하면 애니메이션이되고 그것이 무엇인지 추측 할 수 있습니까? HTML5? CSS3? 아니요. WebGL은 자바 스크립트의 기능을 확장하여 대화식 3D 그래픽을 생성하는 소프트웨어 라이브러리입니다. 예, 플러그인 없이도 가능합니다.!

이 쇼케이스에서 우리는 당신에게 평범한 것을 보여주고 싶지 않습니다. 우리는 당신에게 보여주고 싶다. 30 WebGL 실험WebGL의 진정한 힘을 목격하기 위해 전문 개발자가 신중하게 만들었지 만 영감을주는 것뿐만 아니라 웹의 미래가 어떻게 생겼는지에 대해 알 수 있습니다. 클릭 후 미래로 뛰어 오르십시오.!

최신 버전의 Google 크롬 개발자 버전을 사용하여이 데모를보실 것을 적극 권장합니다. 대부분의 데모는 Firefox, Google 크롬, Safari의 최신 버전을 지원합니다..

3 꿈의 흑인

Google 데이터 아트 팀에서 제작 한 3 Dreams of Black은 풍부한 양방향 2D 그림과 대화 형 3D 시퀀스로 짜여진 애니메이션을 결합하여 만든 3 개의 꿈의 세계로 여러분을 안내합니다. 멋진 경험을위한 경이로움을 확인하십시오.!

애니메이션 볼륨 입자

이것은 정말 예술적입니다 - 플로트 텍스처와 프레임 버퍼 객체를 사용하여 3D 입자로 구성된 애니메이션 동물입니다. 마우스를 움직이면 더 놀라운 일이 생깁니다.!

수족관

수중 환경을 시뮬레이트 하시겠습니까? WebGL에서는 문제가되지 않습니다. 이 데모는 고품질 텍스처, 장면 애니메이션, 픽셀 쉐이더 애니메이션, 반사, 굴절 및 부식 등의 3D 모델을 특징으로하며 현실적인 수중 장면을 구현하기위한 모든 것!

아자 티오 프린

아마도 가장 장엄한 WebGL 데모 일 것입니다. 저자 Jochen Wilhelmy에게 모자 팁.

여행자 여행

3D를 경험하고 싶다면 마누엘의 호팔 롱 (Hopalong) 공식을 사용하여 WebGL에서 생성 된 그래픽의 굉장한 아름다움을 숙고하십시오..

해파리

“Side FX Houdini를 사용한 절차 모델링. 파이썬 수출업자와 함께 json 형식으로 내 보냅니다. Autodesk Mudbox를 사용하여 그린 텍스처. 버텍스 쉐이더로 애니메이션.”

크리 사오라

이것은 일반적인 애니메이션 데모는 아니지만 동적으로 시뮬레이트 된 스켈레톤, WebSocket, 카메라에 접하는 파티클 시스템, 용적 조명 효과 및 블라디미르 부 키치에 비치의 mjs 행렬 라이브러리와의 부분적 서버 측 시뮬레이션 및 동기화가 특징입니다. 간단히 말해서, 복잡한 작품에 대한 놀라운 실험.

HelloRacer

HelloEnjoy만의 하이 엔드 인터랙티브 카 시뮬레이션을 소개합니다..

재료 : 자동차

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50, Chevrolet Camaro 등이 있습니다. 타고 타고보기를 즐기십시오. 지옥, 너는 그들의 색깔을 선택할조차 수있다.

WebGL Cars

니드포 스피드 시리즈의 미래는 웹 브라우저에서 이루어질 것입니다. 너무 야심적? 물론 동적 큐브 맵, 그림자 맵 및 후 처리 효과로 렌더링 된 차량을 방문한 경우는 아닙니다..

내 로봇 국가

글쎄, 인물이 좋아하는 사람이 아니라면 시원하고 매력적인 로봇을 만들고 친구에게 과시하십시오! 실제 거래를하기 위해 돈을 쓸 수도 있습니다..

Pacmaze

3D Pac-Man 게임은 어떻습니까? 그래픽 및 게임 플레이는 훌륭하고 재미있게 진행됩니다.!

빨간 슈팅 후드

이제 귀여운 하나 또는 피 묻은 것이 있습니다. 이것은 WebGL이 톱 다운 슈터 게임으로 개발 될 때 WebGL의 기능을 보여주는 재미있는 게임 일뿐입니다. 재미있게 재미있는.

탱크 월드

당신은 무기를 가지고 즐겁게 사용할 수있는 탱크 슈팅 게임을 사용하고 탐험하기 위해지도를 만들고, 일부 레벨에서는 헬리콥터를 타고 세계를 탐험 할 수도 있습니다. 진정으로 단순한 게임 이상의 의미를 지니고 있으며 그래픽이 편안해 보입니다.!

풀포

가장 간단한 예가 그래픽과 애니메이션이 사람들에게 깊은 인상을 줄 수있는 좋은 예.

표면

Paul Lewis가 만든 우아하고 고무적인 실험 인 Surface를 확인하십시오. 데모에서 크기, 탄성, 자동 궤도, 와이어 프레임 및 빗방울을 변경할 수있을뿐만 아니라 자신의 이미지를 드래그 앤 드롭하여 효과를 다르게 느낄 수 있습니다.

사진 입자

좋아하는 이미지를이 데모에 넣고 그것을보고 엄청난 입자로 폭발하여 어떤 형태의 자력과 상호 작용하십시오. 이 실험은 HTML5 드래그 앤 드롭, 파일 API, Canvas 및 WebGL의 네 가지 기술을 조합 한 것입니다..

Rutt-Etra-Izer

Rutt-Etra-Izer는 고전적인 Rutt-Etra 비디오 신디사이저의 WebGL 에뮬레이션입니다. 데모에서는 자신의 이미지를 내부에 넣고 조작 할 수 있습니다. 이 소재로 2D 이미지는 3D처럼 보일 수도 있습니다.!

흔들 흔들 춤

이방성 라이트 쉐이더와 워블 버텍스 변형을 사용하여 WebGL이 얼마나 액체인지를 보여주는 간단하면서도 주목할만한 데모.

극자

WebGL의 잠재력을 보여주는 또 하나의 훌륭한 실험. Nouvelle Vague는 Twitter를 기반으로 한 시적이며 상호 작용이 가능한 실시간 3D 경험을 제공하며,보고있는 것은 다른 비행 물체로 수행되는 트윗 일 것입니다. 분명히 짹짹을 즐기는 예술적 방법.

우울한 원숭이

“이번에는 자바 스크립트에서 직접 업데이트 할 수있는 꼭지점 위치와 법선 수를 테스트하고 싶었습니다. 2,000은 밝다. 나는 또한 약간의 환경 매핑을 추가했다. 그리고 이상한. 항상 이상 함을 추가하십시오..”

비디오 FX

Happy Feet 2 예고편에 여러 개의 동시 후 처리 효과를 적용 할 수있는 Daniel Pettersson의 인상적인 앱입니다. 재미있게 놀아 라.!

복셀 액체

고전 2D 물 효과 알고리즘의 3D 표현은 또한 대화식 WebGL이 어떤지 보여줍니다..

WebGL 책장

Google 데이터 아트 팀에서 개발 한 WebGL 책장으로 10,000 권 이상의 책 표지를 살펴보십시오. 주제별로 검색하고 각 모델을 클릭하여 3D 모델을 열고 QR 코드로 휴대 전화로 책을 다운로드 할 수도 있습니다..

WebGL Globe

아름답고 우아하며 미래 지향적 인 데이터 시각화로 미래의 기분을 느낄 수있는 멋진 Google 팀 실험.

월드 항공편

주요 항공사의 비행 경로를 시각화하여 시각적으로 매력적인 데이터 시각화 앱이 유망 해 보인다.!

WebGL 이미지 필터

WebGL을 사용한 그래픽 편집기 응용 프로그램? 불가능한 일이 아닙니다. 무엇보다도 빠른 속도와 부드러움!

WebGL 물

“반사, 굴절, 가성 및 주변 폐색으로 렌더링 된 물 풀입니다. 풀은 높이 필드로 시뮬레이션되고 물의 표면과 상호 작용할 수있는 구체를 포함합니다..”

반사

WebGL이 직면 한 가장 큰 문제는 아마도 보안 문제 일 것입니다. Wikipedia에 따르면 미국 컴퓨터 응급 준비 팀 (US-CERT)은 WebGL에 임의의 코드 실행, 서비스 거부 및 교차 도메인 공격을 유발할 수있는 여러 가지 가능한 보안 문제가 포함되어 있다는 경고를 발표했습니다. 이것은 웹 사이트의 소유자에게 매우 의미심장합니다..

그러나 Khronos Group은 Mozilla와 Google을 포함하여 가능한 보안 위협으로부터 보안을 강화하기위한 가능한 솔루션과 향후 개발 방법을 제안 해 왔습니다. WebGL에 재능 있고 전문적인 개발자가 보여준 많은 가능성이 있기 때문에 문제가 줄어들거나 미래에도 해결 될 수 있기를 바랍니다.!

어떤 실험이 당신을 가장 놀라게하는지 알려주고, 물론 당신이 가지고 있다면 우리에게 과시하십시오.!

더 많은 관련 게시물 :

HTML5 웹 사이트 : 48 건의 플래시 킬링 데모
HTML5 웹 사이트 : 15 가지 추가 실험
감동적인 CSS3 애니메이션 데모