본문 바로가기
剛 244

[도모토 쯔요시] 5/31 WebGL 전문 사이트「WebGL総本山」 tsuyoshi.in (ENDRECHERI) 소개

by 자오딩 2017. 6. 8.

https://webgl.souhonzan.org/entry/?v=0984


doxas : 2017-05-31 13:27:10


WebGL で美しいクリスタルを描画! とある芸能人の公式サイトがリニューアル

WebGL로 아름다운 크리스탈을 묘화! 어떤 연예인 공식 사이트가 리뉴얼




■ リニューアル直後にはアクセスが殺到!

■ 리뉴얼 직후에는 접속이 폭주!


今回ご紹介するのは、とある芸能人のウェブサイトです。

이번 소개할 것은 어떤 연예인 웹 사이트입니다.

その芸能人の方は、タレントといいますか、アイドルといいますか……様々な顔を持つ個性的なキャラクターで人気の、堂本剛さんです。

연예인은 탤런트라고 할까요, 아이돌이라고 할까요여러 얼굴을 가진 개성적인 캐릭터로 인기인 도모토 쯔요시상입니다.

彼のウェブサイトは、実はリニューアルする前から WebGL を使っていたのですが、今回リニューアルされたことで、より美しく華麗な CG による表現へとパワーアップした感じですね。

그의 웹 사이트는 사실 리뉴얼하기 전부터 WebGL을 사용하고 있었습니다만 이번 리뉴얼면서 아름답고 화려한 CG 의한 표현으로 파워 업한 느낌이네요.

インタラクティブに表情を変えるそのサイトのビジュアルは、彼自身の才能の多彩さを表現しているかのようで、非常にかっこよく仕上がっています。

터랙티브하게 표정을 바꾸는 그 사이트의 비쥬얼은 그 자신의 재능의 채로움을 표현하는 것과 같이 상당히 멋지게 완성되어 있습니다.




マウスボタンのホールドにより一変する世界

마우스 버튼 홀드에 의해 일변하는 세계


今回のサイトは、全体にクリスタルのような表現を用いた CG が特徴となっています。

이번 사이트는 전체적으로 크리스탈 같은 표현을 이용한 CG 특징입니다.

最初にサイトにアクセスした際に、マウスをクリックしたままホールドするように促すアイコン等が出てくるのですが、このホールド操作によって次々と表情を変えていく、そんな面白い演出が組み込まれています。

처음에 사이트에 접속했을 때 마우스를 클릭한 채 홀드를 촉구하는 아이콘 등이 나오는데, 이 홀드 조작에 의해 차례로 표정을 바꾸어 가는 그런 재미 있는 연출이 포함되어 있습니다.

描かれるクリスタルの質感も素晴らしくて、思わず見入ってしまうようなビジュアルです。

그려지는 크리스탈의 질감도 훌륭해서 무심코 바라보고 말 법한 비쥬얼 입니다.





マウスボタンをホールドすると、クリスタルが振動するような演出のあと、砕けて散らばり、上の画像にあるように粉々の状態になります。

마우스 버튼을 홀드 하면 크리스탈이 진동하는 듯한 연출 다음 바스라져 흩어지며 위의 사진에 있는 것처럼 산산조각 상태가 됩니다.

実はこれは演出の途中の状態で、ここからさらにシーンが自動的にアニメーションして進んでいきます。

사실 이것은 연출의 중간 상태로, 여기에서 더욱 더 씬이 자동적으로 애니메이션해 진행되어 갑니다.

そのまま眺めていると、今度は一度散らばったクリスタルたちがひとつに集まるように画面の中心に収束していきます。

그대로 바라보고 있자 이번엔 한 번 흩어진 크리스탈들이 하나로 모이듯 화면 중심에 수습됩니다.

一度、白く強く光ったような演出があり、新しい姿となってド派手なエフェクトと共に現れてくるのですがここがとてもかっこいいですね。

한번 하얗고 강하게 빛나는 듯한 연출이 있고, 새로운 모습이 되어 매우 화려한 효과와 함께 나타나는데 여기가 아주 멋있네요.




激しくオーラのようなものを撒き散らしながら別の姿に!

격렬한 기운 같은 것을 내뿜으며 다른 모습으로!



この時のクリスタルの形状変化にはたくさんのパターンが用意されているようで、ランダムに、いくつかの形状に変化するようです。

이때의 크리스탈 형상 변화에는 많은 패턴이 준비되어 있어서, 랜덤으로 몇 개인가의 형상으로 변화하는 것 같습니다.

中には、キャプチャ画像こそ撮っていませんが、ある生物のような形になるものなどもあって、とても凝っていますね。

그 중에는 캡처 사진 지 않았습니다만 어느 생물과 같은 형태가 되는 것 등도 있어서 정말 열중하게 되네요.

CG として見た場合に興味深いのは、質感が微妙にことなるクリスタルが生成されることがある点でしょうか。紫色っぽいものや青色っぽいものなど、ことなるマテリアルが適用されたクリスタルはどれも非常に美しく描かれます。

CG로서 보았을 경우에 흥미로운 것은 질감이 미묘하게 다른 크리스탈이 생성되는 경우가 있다는 점이려나요. 보라색 같은 것이나 파란색 같은 양한 소재가 적용된 크리스털은 모두 매우 아름답게 그려집니다..







このクリスタルの形状変化は、基本的に何度でも行えるので、一度クリスタルの形が収束したら、再度マウスボタンのホールド操作で、何度もその変化を楽しむことができます。

크리스탈 형상 변화는 기본적으로 몇 번이라도 할 수 있기 때문에 한 번 크리스탈 형태가 수습되 다시 마우스 버튼 홀드 조작으로 몇 번이나 변화를 즐길 수 있습니다.

ちなみに、マウスのホールド操作以外にも、普通にドラッグしてシーンを回転させたりもできるので、自分の好きな角度から、様々に光の当たり方などが変化するクリスタルの様子を眺めてみるというのもいいでしょう。

참고로, 마우스 홀드 조작 이외에도 평범이 드래그해서 씬을 회전하거나도 할 수 있기 때문에 자신이 좋아하는 각도에서 다양하게 빛 방향 등 변화하는 크리스탈 모습을 바라봐보는 것도 좋겠네요.


演出面も見事ですが、その質感表現も、じっくりと観察してみる価値があると思います。

연출도 훌륭하지만 질감 표현도 차분히 관찰해 볼 가치가 있다고 생각합니다



.

芸能人のウェブサイトでありながら、本人の写真などは見当たらず、CG が表現のメインに据えられている興味深いサイトだなと感じました。

연예인 웹 사이트이면서도 자신의 사진 은 보이지 않고 CG 표현 주축이고 있는 흥미로운 사이트라고 느꼈습니다.


私のような普段から WebGL のことばかり考えている人間ならまだしも、普段テレビなどのメディアを通じて芸能人に興味を持っているユーザー層のひとたちからすると、今回のようなサイトはとてもインパクトのある体験になるんじゃないでしょうか。

저 같이 평소 WebGL에 대한 생각만 하는 사람이라면 몰라도 평소 방송 등 매체를 통해 연예인에 관심 갖고 있는 사용자층 사람들 입장에서는 이번과 같은 사이트는 아주 획기적인 체험이 되지 않을까요.

これからは日本のウェブサイトにも、こういったビジュアルに特化した作りのものが徐々に増えていくのかもしれません。

앞으로는 일본의 웹 사이트에도 이러한 비쥬얼로 특화된 제작물이 점차 늘어갈지도 모릅니다.

派手さが、そのままイコールでウェブの進化ということではないと思いますが、こういったサイトはやっぱり見ていて楽しいですよね。

화려함 그대로 곧 의 진화라는 것은 아니라고 생각합니다만, 이러한 사이트는 역시 고 있으면 즐겁네요.

ぜひチェックしてみてください。

체크해 보세요.







WebGL 란?

WebGL (Web Graphics Library) 은 웹 기반의 그래픽 라이브러리이다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공된다.
WebGL은 플러그인의 사용 없이 3차원 컴퓨터 그래픽스 API를 제공하는 캔버스 HTML 요소의 일부분이다. 2011년 3월 3일에 세부 사양이 버전 1.0으로 출시되었다. WebGL은 비영리 단체인 크로노스 그룹에 의해서 관리되고 있다.







비쥬얼 뿐만이 아니라 왜 크리스탈인지, 그 생물체가 무엇인지, 타이틀의 의미는 뭔지도 알면 더 재미있을 거에요 ^^