転載、加筆・修正したものです。---------3Dの表現のなかでわりと好きなトゥーンシェーディングをThree.jsで実装してみました。DEMOトゥーンシェーディングの主な特徴は・エッジがはっきりと縁取られている・陰影がはっきりしているです。アニメっぽい表現のシェーディングです。アニメキャラが登場するゲームでよく使われる手法です。最近だと以下のミュージックビデオコンテンツもWebGLのトゥーンシェーディングっぽい表現で作られていました。popcorn_10'swww.dennis.video今回のデモは、缶の3Dモデル(objファイル)をThree.jsで読み込み、テクスチャを適用して表示しています。3Dデータは以下のサイトでフリーのものをダウンロードしました。blwww.turbosquid.comダウンロードしたデータをblenderでインポートし、テクスチャをつくるためにUV展開図なるものを生成しました。要は缶の展開図なのですが、この形に合わせてテクスチャを作れば、3Dモデルに綺麗に貼り付けてくれます。このUV展開図に合わせてつくったテクスチャが以下のものです。側面と上の方を青くしたいだけなので、その部分を青で塗りつぶし、それ以外の領域はグレーにしています。実際は以下の画像はテクスチャとして使用していませんが、UV展開図とテクスチャを重ねると、どの部分を青くしてるのかわかりやすいかと思います。トゥーンシェーディングに加え、金属光沢を再現するために、3D空間上の点光源が反射しているような表現と、凹凸感を表現をするためのバンプマップ(法線マップ)という手法をGLSLで実装しています。バンプマップ用の法線マップ画像はなんとphotoshopのフィルタ機能で作ることができました。この画像を使用して、GLSLでゴニョゴニョっとやってあげるだけで、凹凸感を実現できます。缶側面のgithubのロゴの部分がへこんだように見えるかと思いますが、これは3Dモデルが実際にへこんだ形になっているのではなく、擬似的にそう見えるように計算して表示させる技法です。※上記の表現技法の実装は正直手前実装は難しいので、以下の記事を参考にしています。QiitaThree.jsのShaderMaterialを使って、自分で書いたシェーダを適用させたときのメモ。トゥーンシェーダqiita.comソースコードは以下のリンクから。Three.jsでトゥーンシェーディングgithub.com主な処理はすべてhttps://github.com/takumi0125/E-Can/blob/master/gulp/src/assets/js/index.coffeeに記述されています。実装した頂点シェーダ・フラグメントシェーダを以下に記載します。(THREE.ShaderMaterialクラス)を使用しており、GLSLの組み込み変数に加えてThree.js独自の組み込み変数も存在します。}}縁取りを実現する方法はいくつかあるようですが、今回は頂点シェーダで頂点の位置を頂点法線ベクトルの方向に少しだけ位置を移動し、指定の単色で塗りつぶしたたオブジェクトを、ポリゴンの裏側だけ描画することによって実現しています。ポリゴンの裏側だけをレンダリングするには、shaderMaterialのsideプロパティをTHREE.BackSideにセットします。THREE.BackSide;同じオブジェクトを本体と縁取りの分、2回レンダリングしているのですが、2回のレンダリングは同じシェーダを使用しています。(厳密には太さの割合)、edgeColorに縁取りの色を渡します。頂点シェーダでは、カメラの位置と光源の位置を用いて、頂点の色を決定するための各種ベクトルを計算しています。視線とカメラのベクトルを接平面に変換して云々かんぬん・・・というけっこう難しい話なのですが、こちらの記事に詳しく記載されています。こちらのブログを執筆している方は相当賢いのではないか。簡単な3D表現であればCSSでも実現できますが、WebGLを使うと表現の幅が一気に広がりますね。(要はmodelMatrixで変形すると)、意図した見た目にならないですね。頂点シェーダにmodelMatrixの逆行列を渡して、カメラやライトの位置をモデルの空間に合わせてあげる必要があります。そのへんの説明は以下の記事に記載されています。doxas先生様々です。平行光源(ディレクショナルライト)を用いたライティングwgld.orgダウンロード#Web#JavaScript#3D#CreativeCoding#WebGL#GLSL#Shader#threejsこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートいただければ、レッドブルを飲んでより頑張れると思います。サポートをする「スキ」を押してクリエイターを応援しよう!ありがとうございます!あなたの「スキ」が力になります。(unshift)東京でフリーランスのdeveloperをやっています。即席!スヴェルチョク導入ガイド2nbngポートフォリオサイトを公開しました。Effects未経験者向け!Lottieで再生できるアプリU...108はんざわさきありがとうございます!あなたの「スキ」が力になります。