ネットワークデザインスタジオのブログ (original) (raw)

はじめに

こんにちは。B4の坂村です。

B4と語るのは2度目、昨年は休学をしてインターンシップに参加していたからです。

2024年6月から2025年2月にかけての8ヶ月間にわたるスロバキアでのインターンシップ生活、今回はその振り返りをしていこうと思います。

前半はインターンシップに行くまでの流れを、後半は現地での生活について書いていますので、興味のある箇所を読んでいただければと思います。

お城と街並み一望

インターンシップに行くまで

IAESTE・応募について

僕が今回参加したインターンシッププログラムは「IAESTE」という世界各国間で理系分野（STEM分野ともいうみたいですね）の学生にインターンシップの機会を提供する非営利団体の行うプログラム。

毎年4月と9月に募集を行なっており、去る2023年の9月、このプログラムに応募しました。

ひと口にIAESTEのインターンシッププログラムと行っても2種類の応募方法が用意されています。

それが「Global Internship」と「Exchange Internship」。字面だけ見ると違いが分かりにくいですが、違いは以下の通り。

以上に加えて応募時の要件はGlobal Internshipの方が厳し目です。

そして僕は後者のExchange Internshipに応募し、中央ヨーロッパ・スロバキアでのインターンシップの機会を得ました。 （1度他国でのインターンシップを提案されていました。都合があわず断念しかけましたが、交渉の末スロバキアのインターンシップを改めて得られたので、この辺の柔軟性・可能性はあるかもしれません。）

Exchange Internshipに応募した理由は、「自分で決められない偶発性に委ねた方がおもしろい」からです。

自分で選択できるGlobal Internshipを選んだ場合どうしても耳馴染みのある国を選んでしまったり、無難な選択をしてしまう気がして、どうせなら全く選べない方が楽しいじゃん！とノリと勢いでExchange Internshipに応募しました。

結果、スロバキアという「名前は聞いたことあるな...？」程度の認識の国でインターンシップを行うことになりました。いま振り返ると、この時の選択は間違っていなかったと嘘偽りなく言えます。 もしこの時これを選択していなかったら渡航先としてスロバキアなんて発想は出ないからです。

すっかり馴染んでしまったスロバキアの国旗

インターンシップ応募から渡航まで

以下は大雑把なインターンシップに行くまでの流れ。

インターンシップの提案を受けてからの流れが加速度的に早かったのを鮮明に覚えています。見ての通り受け入れが確定してから渡航まで1ヶ月と、僕の場合だけかもしれませんが、おそらく他のどのプログラムよりも慌ただしい展開だと思います。

わずかな準備期間には主に以下のことをしました。

IAESTEのインターンシップは基本が英語とのことでたかを括ってスロバキア語の勉強はゼロで挑みました。スロバキア語を勉強する余裕があるほど英語も自由でなかったからです... が、8ヶ月の滞在でスロバキア語が話せなくてピンチ！なことは無かったのでこの判断は正解でした。（英語はもっとできるようになってから行きたかった...）

直行便はないためウィーン国際空港を利用

現地での生活

国の印象

スロバキアは中央ヨーロッパのさらに中心、西にオーストリア、東にウクライナ、北にチェコ、南にハンガリーを隣国とする国。人口は540万人で東京都（1400万人）の約3分の1（2025/04現在）とこぢんまりとした国です。 首都であるブラチスラバは周辺国の首都と比べても小さめ。1日あれば主要な名所を見られるほどの小さな街で、ヨーロッパらしく古い街並みが今でも残っており、不思議と落ち着く街です。 真四角のお城とUFOと言われる橋、周辺国も貫くドナウ川が印象的。

ドナウ川とブラチスラバ城

言語

事前に仕事は英語で行われると聞いてはいたものの、実際に現地に行くまではヒヤヒヤでした。言語学習アプリに「スロバキア語」の文字はなく、わずかに本があるだけで学習を諦めていたからです。

実際に現地に行ってみると大半の人は英語を話し（30-40代以下の人はほとんど英語を話す）、バスやスーパーなどでは現地語のみ、という感じでした。 言語でコミュニケーションを取らないといけないシチュエーションでは英語を使えたので、つたない英語でなんとかやっていけ、定期券の購入やビザの取得などで現地語が必要な場合はIAESTEのメンバー（現地の大学生）の手を借りたりなどして乗り切っていました。

現地で数名の日本人と出会いましたが、数年滞在している人でもスロバキア語を話せず英語だけで生活している方もいたりと、公用語のような立ち位置として英語が使えるのだなぁと島国育ちの人間としては感心してしまいました。

結果8ヶ月の滞在で覚えたスロバキア語はあいさつのみ（Ahoj:やぁ、Dobrý den:こんにちは）と、恥ずべきバリエーションとなっています。

スーパーの文字は何も読めない

仕事

普段からWeb制作周りの技術を触っていたこともあって、現地ではECを主としたWebサイトの開発を行う会社でインターンシップをしていました。 この会社では毎年IAESTEを経由してインターン生を受け入れている会社で受け入れに対して慣れているようで、こちらとしてもやりやすく荷が軽かったです。

ヨーロッパの国々は日本と異なり一国の人口が少なくサービスを国内需要のみで維持することは難しいため、近隣諸国に対してもサービスを展開しています。メンバーやクライアントは周辺国の出身の人々も多く、社内公用語は英語で行われていました。必要に駆られているとはいえ、互いが異なるバックグラウンドを持ち、双方が歩みよってコミュニケーションをとっていくことが自然、という態度は学ぶべき姿勢だなと感じました。

同じプログラムを使ってドイツからもインターンが同僚として働いていたことも大きな影響がありました。留学と違い、同世代の仲間の少ないインターンシップという環境において、同い年の存在は光明です。第一言語でないにも関わらず当然のように流暢に英語を話す同い年の存在は絶大なもので、彼がインターンシップを始めてからの僕の英語の伸び率も上がりました。日々の雑談やフランクなコミュニケーションが一番の学習になるなと身をもって感じました。

職場の屋上からの景色

生活

はじめてのヨーロッパでの生活は刺激に溢れた日々でした。街並みから食事、交通事情まで、すべての事を一旦立ち止まって考えなければ事を運べない日々は新鮮です。 はじめは旅行者のような感覚で全てが新しく感じますが、旅行とは違って段々とその街の当事者になっていく感覚は特別なものがあります。

8ヶ月間滞在したアパートはシェアルームで、留学等で外国から来る若者が数ヶ月単位で入れ替わり立ち替わりメンバーを交代しながら住んでいました。家賃は一人あたり東京で1Kを借りるのと同じくらいの金額ですが、リビングなどの共用部がかなり広い3LDKをシェアしていたこともあって優雅な気分で生活を送っていました。

自室

食事に関して、スロバキアにはいくつか伝統料理はあります。内陸国のため基本的に魚料理はなく、基本的に肉とじゃがいもで構成されています。全体的に重めの食事が多く、現地の人々もこういった伝統料理はあまり頻繁には食べないといっていました。スロバキアは料理よりもむしろ、お酒、特にビールについて語らなければいけません。チェコと並んでビールの生産地として有名で、その種類は膨大でどのスーパーに行っても多くの種類の銘柄が並び、500mlでペットボトルの水よりも安いものもあります。（恩恵に預かって文字通り毎日ビールを飲んでいました。）

伝統料理ハルシュキ：小麦粉とチーズ

パブで提供される5Lのビール

物価は周辺国に比べて安いとはいえ外食の値段は日本の1.5-2倍ほどの価格なので基本的には自炊をしていました。見知らぬ食材で料理を創作してみたり、ルームメイトと自国の料理をシェアしあったりと楽しくサバイブしていました。

街並みはさすがヨーロッパ、特に旧市街と言われるエリアには多くの美しい昔からの建物が立ち並び、下を見ると石畳の道路、上を見るとオレンジ色の美しい屋根を見ることができます。ソ連との関係もあったことから、社会主義的な団地が広がるエリアもあったりと、小さい都市ながら歴史を一挙に感じられる良い街です。進行形で経済成長中なことから、多くの商業施設の計画や再開発が進められており、数年後にはみられないかもしれない景色も多くあるのかもしれません。

旧市街の景色

ソ連時代を想起させるアパート群

若者を中心に政治不信があることから滞在後期には毎週末のように政府に対する抗議活動が行われていました。人口が東京の約3分の1とは思えないほど多くの人が集まっており、つい30-40年前に独立を果たした過去や国境を接するウクライナ情勢が他人事でないという意識など、政治に対する当事者意識の高さをひしひしと感じました。

抗議活動の様子

周辺国への旅など

はじめにスロバキア行きが決まった時は想像していなかったこととして、中央ヨーロッパの小国という特性から多くの隣国に気楽に旅ができるという利点がありました。最も近いオーストリアは、首都であるウィーンまでバスで1時間、チェコのプラハまで電車で5時間、ハンガリーのブダペストまではバスで3時間と隣の県に行くようなノリで国境を超えることができます。他にも夜行バスを使えばイタリアをはじめとした人気の観光地に行くこともでき、滞在中に多くの国に観光に行くことができました。この話は追って記事を書こうと思っています。

旅で訪れたベネチア：スロバキアから夜行バスで10時間

さいごに

スロバキアという日本人にとってはあまり耳馴染みのない国に飛び込んでインターンシップをした経験は間違いなく僕の人生にとって大きな出来事になりました。

ランダムに選ばれた国で半年以上生活するという経験もなかなかにレアなものだと思いますが、何事も躊躇せずに飛び込んでみると面白い結果が待っているものです。

その場でどうにかする力、というものを確かに得られた8ヶ月間でした。

はじめに

こんにちは。ネットワークデザインスタジオB4の山上です。 3月になり、花粉に苦しんでいます。 今日は私の大学4年間を振り返ります。

アカペラサークルでの活動

高校生の頃、よく見ていたYouTuberがきっかけでアカペラを聴くようになりました。通学中や勉強中も聴くほどハマっていて、大学に入ったら絶対アカペラをやろうと決めていました。1年目はコロナ禍の影響もあり、あまり活動できませんでしたが、念願のアカペラはとても楽しかったです。

歌うのも好きでしたが、私が特にがんばったのは作譜です。作譜とは、原曲をアカペラ用に編曲することを指します。アカペラの楽譜は販売されているものもありますが、種類はそこまで豊富ではなく自分達で作るのが主流になっています。ピアノをやっていて音楽理論の知識はあったため、ソフトの使い方を先輩に習った後、作譜ができるようになりました。自分の頭の中の構成を形にして、みんなに歌ってもらうのが快感でした。大学祭や2月に開催する外部向けのライブで発表することができたのも楽しかったです。何よりサークルで仲の良い友達ができて嬉しかったです。

アルバイト

お金を自分で稼げることが嬉しくて、アルバイトをたくさんした4年間でした。職種は飲食店、本屋、ゲームセンターなど色々経験しました。人間関係の保ち方や集団にいる時の効率的な動き方だけでなく、お酒の種類や名前、ブックカバーの作り方、アニメの知識など様々なことを知ることができて楽しかったです。

特に印象に残っているのは雀荘のアルバイトです。麻雀に対するイメージは人それぞれだと思いますが、最初は雀荘で働いていることを他人に言うと心配されることがよくありました。ギャンブルや喫煙のイメージが強いからでしょうか。実際は思ったより綺麗で、お店の人や常連さんにもよくしていただき楽しく働くことができました。バイトを始めてから麻雀をする機会が激増し、自分の麻雀の腕はメキメキ伸びたと感じています。

麻雀は運要素が強いゲームです。運がいい時は、初心者でもプロからあがることができます。しかし、どれほど運があっても、数を重ねると徐々に実力が表れてプロの方が成績が良くなります。麻雀のいいところは、初心者でも楽しむことができるし、勉強すればきちんと実力が反映され突き詰める甲斐があるところだと思います。これからも趣味として楽しんでいきたいです。

まとめ

たくさんの出会いがあった4年間でした。自分自身はまだまだ子供だと思っているのですが、いつの間にか社会人になろうとしていて驚いています。振りかえってみると、色々な人と関わる中で少しずつ大人になっていたのだと気づきました。高校とは違い自由にできることが増え経験値は積めたけれど、肝心の学校の勉強は少々おろそかになってしまったと反省しています。社会人になっても学ぶことは多々あると思うので、そっちはおろそかにしないようにします。

ネットワークデザインスタジオB4の魚田です。編入してから2年が経ち、卒業することになったので、大学生活を振り返ってみます。

編入のきっかけ

元々は建築を学んでいましたが、もっと範囲の広いデザインについて学びたいと思い、編入先を探したときに、先生から紹介されたのがきっかけかなと思います。そして、決め手になったのは、以前から若いうちに住んでみたいと考えていた、東京に住むことができることでした。

試験の日は、お昼にペーパーテストと面接したのち、美術館に行ったり、友人とご飯を食べにいったことを今でも覚えています。 地元に戻って、高専で哲学の講義中に、結果を見たのも思い出深いです。

合格後は単位変換作業をクリアし、東京国際フォーラムでの式典後、日野でのキャンパスライフが始まりました。入学当初は、知り合いが少なく寂しいこともありましたが、運よく友人ができたので、かなり助かりました。

学べたこと

一番はコードを書いて、なにかを作ることです。編入前にはまったくそういった経験がなく、縁が無いものだと思っていました。

きっかけは、単位のためにとった講義の課題、Webタイポグラフィーを作るというのものでした。制作を始める前に紹介された先行作品は、平面的なものが多かったことが印象に残ったのを覚えています。そこで事例との差をつけるために、立体的にしてみようということで、月をモチーフにした作品を作りました。このWebでの立体表現というのは今でも取り組んでいます。

そのほか、いろいろな発表会に参加し、その空気感が楽しかったです。

八王子

プライベート？に関しては、大学に通うにあたって、はじめての一人暮らしを始めたことが一番の思い出になりました。朝起きて、家事をして、学校に行って、寝るという暮らしからは学べることが多かったです。家では、音楽を作る時間が長かった気がします。

山手線圏内からは遠いこと以外には特に文句のない街で、中央線と京王線にはとてもお世話になりました。駅前にはよく散歩しにいき、ピザ屋さんやパン屋さんに通いました。府中と立川にもお世話になりました。

最後に

大学にきて、なんだかんだ知り合いも増え、知らない世界を知ることもでき、楽しい生活だったと思います。 機会があれば大学院にも進むのもいいかもと考えています。

色々とお世話になりました。

ネットワークデザインスタジオB4の鈴木です。この4年間を通して良い環境や人に恵まれ、たくさん学び、遊び、趣味を持ち、自分にとって刺激的な日々だったと感じています。3月で東京都立大学を卒業するので、4年間を振り返ってみようと思います。

1.授業

インダストリアルアート学科の授業は課題制作が多く、グループワークや個人での制作を通して色々なことを学びました。特にグループワークでは、メンバーの得意なことを把握しながら計画的に作業を進める能力が身についたと感じています。インダストリアルアートの専門的な授業のみではなく、他学科の授業を多く受講できたのも総合大学である大きなメリットだったと感じています。 特に『産業と法規』という授業が印象に残っています。この授業は現役の弁護士の先生が担当の講義形式の授業で、システムデザイン学部専門科目の一つです。法や裁判の仕組みなどの基礎的な知識、知的財産権に焦点が置かれています。インダスの学生にとって縁遠そうな法律の授業ですが、社会人として役立つ内容が多く、面白かったです。

2.サークル

アカペラサークルに所属していました。学科同期にアカペラサークルに興味のある友人が多く、歌は未経験でしたが中学と高校で音楽経験があったので、つられて所属することになりました。 結果としてたくさんの人と知り合うことができ、様々な経験が得られました。 中でも印象に残っているのは、私が幹事となって企画した夏合宿です。3泊4日の旅程計画やコロナ対策などを通して、たくさんのことを学びました。自分が主導となって物事を進めることや、想定外の出来事に対応することなど、今後に役立つ経験ができました。

3.アルバイト

大学1年生の春からリサイクルショップのアルバイトを始め、約4年間勤務しました。通常の小売業と異なり、スタッフが品物の査定や商品の加工をする点に特色があります。そのため扱う商品についての知識を身につけなければなりません。中でも着物や食器について学ぶことが多く、ここで働いていなければ知ることがなかった知識を得られました。また接客に臨機応変さが求められるため、知らない人と話す自信が身につきました。一緒に働く人にも恵まれ、同じ大学の中では出会えない色々な背景や経験を持つ人達との会話は得ることが非常に多かったと感じます。

おわりに

この4年間の生活は決して楽しいことばかりではなく、課題や就職活動では自分の将来の方向性を探すのに苦労した時間も多くありました。しかし何よりもこの4年で得られたものは大きく、私を支えてくれるたくさんの人の温かさに気づけた時間でもありました。大学の4年間を通して得られた縁や経験を大切に、社会人として歩んでいきたいです。

はじめに

こんにちは。ネットワークデザインスタジオB4の阿部です。 秋になり涼しくなっていました。私としては、編み物が楽しい季節が来たぞー！って感じです。 手芸屋に行くとフワフワの毛糸だったりモコモコの毛糸だったりがたくさん並んでいて、編み物したい欲が湧いてきます。 冬は可愛い毛糸の種類が多くて楽しいです。

私は今ブランケットを編んでいるのですが、その紹介をしたいと思います。

制作

使用した毛糸はこれです。

使用糸

【MONA】 品質表示：アクリル85％、ウール15% 重量：200g（糸長約520m） 色番：23105

ユザワヤ限定商品のようです。会員価格で一玉1400円くらいでした。

グラデーションになっている糸です。 大きめのブランケットを作るつもりなのですが、色替えをすると手間がかかりすぎてしまうので一本だけでいろんな色が楽しめるグラデ糸にしました。

編み物で四角を編むときは主に①と②の二つの進め方があるのですが、今回は②の方法にしました。 サイズを完全に決めていなかったのと、毛糸を使い切ってできるだけ大きなものを作りたかったからです。

四角の編み進め方

現在はこんな感じで編み進めています。

編み物の途中経過

編み方はグラニー編みです。簡単な編み方なので慣れれば無心で編み進められます。私はアニメを見ながら編んでいます。

実はもう一玉編みきってしまい、もう一玉購入しました。一玉だけだと60cm×80cmくらいのものが編めましたが、もう少し大きなものにしたくて二玉で編もうと思っています。

おわりに

最後にブランケットの構想を紹介して終わりにしようと思います。

編み物の構想

次回のブログで完成したブランケットを紹介できたらいいなと思っています。ではまた！

お久しぶりです。

B4の魚田真之介です。

僕は現在、卒業研究で「抽象的なイメージで会話できるオンラインコミュニケーションツールの開発」を進めています。

中間報告会も(夏休み前に)終え、一旦、今回はこれまでやってきたことと、これからやっていくことをまとめてみます。

やってきたこと

課題設定

個人的な動機として、SNSを使う上でのストレスがありました。僕は普段SNSをよく使うのですが、何気なく見ているときでも、ふとしたつぶやきをみて一喜一憂したり、知らず知らずのうちにストレスが溜まっているなと感じることがありました。また、SNSでの炎上や行き違い、フェイクニュースの影響が広範囲に広がっているのを見かけることが増えてきました。

これらは、コミュニケーションの媒介が原則テキストで統一されていること、そして、SNSのタイムライン上には玉石混交状態のつぶやきが同じように表示、並べられていることが原因だと仮定しました。また、テキストを構成するのは言葉です。これは辞書的な意味がある一方、多様な解釈が許容されています。つまり、同じテキストでも、人によって想起される情景や解釈が変わるわけです。そうすると、補助情報がない状態でテキストのみでコミュニケーションを行おうとしているのもSNS上でのコミュニケーション不全の原因の1つといえます。以上の問題を少しでも解消するために、課題を「やり取りする媒介をテキストから置き換えたコミュニケーションアプリを作る」と設定しました。

Webアプリケーションのコンセプト設計

Webアプリケーションの方向性を決めるためのざっくりとしたコンセプトを決めてました。 課題設定から 1. 言葉を別のものに置き換える 2. ぱっと見で解釈しにくい 3. 読むと鑑賞の両立 以上の3つの特徴を持つコミュニケーションアプリケーションを解決策としました。具体的には、言葉を視覚的な3DCGオブジェクトに置き換え、解釈しにくい抽象的な表現を用い、平面的なタイムラインを疑似3次元的なものにするという方針を立てました。

技術選定・コーディング

今回のコミュニケーションアプリは多くの人を対象として、Web上で動作するものとしました。使用する技術は、フロントエンドにNext.js、イメージオブジェクト生成の部分にThree.js+Shader、バックエンドにDjango、データベースにはPostgreSQLです。

但し、ユーザーが1からオブジェクトを描くのは、発信のハードルが高いものになってしまいます。そのハードルを低くするために、今回のアプリでは、SNSのインタフェースを再利用し、入力は言葉で行うようにしました。では、イメージオブジェクトの生成はどうするのかというと、文章を分析してくれるモデル(BERTのsentimentなど)を利用することで入力された言葉をパラメーター化し、それを用いて、Three.js+Shaderでイメージオブジェクトを生成するようにしています。

開発段階のWebアプリケーション

現段階でのインタフェース

このアプリは中央のキャンバスと、右側にあるテキストボックスとテキストのパラメーターデータを表示する掲示板で構成されます。

このアプリの使い方は、右上のテキストボックスに言葉を入力し、投稿ボタンを押して、オブジェクトをキャンバス上に投稿するというものです。テキストボックスの下には、入力したテキストとともに、パラメーターが表示され、どのようにオブジェクトが出力されたのかを確認することができるようになっています。

オブジェクトの設定は、モデルが出力してくれる感情の分類(嬉しさ、怒り、信頼)によってオブジェクトの形状を、文字数によってオブジェクトの大きさ、ポジティブさの分類(ポジティブ、ネガティブ、ニュートラル)によって、色を決定しています。中央のキャンバスはアクセスしているユーザーで共有されるようになっています。

これからやること

終わりに

後2~3か月で完成させられるのでしょうか。もし完成した暁には、皆様にも利用して頂けるようにお知らせできればと思います。

引き続きよろしくお願いいたします。

こんにちは、B4魚田です。風鈴の音が心地よくなる季節になりました。

今回は、私の制作に関連する、ShaderとThree.jsでのグラフィックの制作の過程の一部をまとめてみます。(前回の予告ではP5.jsを使う予定でしたが、変更しました。申し訳ございません。)

Shaderと Three.jsとは？

Shader

Shaderとは3DCGの描画処理プログラムのことです。オブジェクトに陰影をつけたり、表面の質感や凹凸の設定、各画素の色を決定してくれます。それぞれの機能を、オブジェクトの頂点の位置を決定するVertex Shaderと面を構成する各画素の色を決定するFragment Shaderの2つに分けて記述します。

Three.js

Three.jsとは、3DCGを作成するためのJavaScriptライブラリです。Web上でコンピュータグラフィックを描画する低レベルAPIであるWebGLを、JavaScriptで記述できるように開発されています。シーン、カメラ、オブジェクト、ライトの要素から3DCGを描画し、アニメーションやインタラクティブ機能を追加することも可能です。

グラフィックの生成

  1. 単色の球

はじめにシンプルな球を描画してみます。

まず、球の位置を決めます。Vertex Shaderは3D オブジェクトの頂点の位置を計算するためのプログラムです。

vertexShader: void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); },

gl_Position = ... の部分が頂点の最終的な位置を決定します。それぞれの値はvec4(X座標、Y座標、Z座標、同次座標)となっています

次に、球の色を決めます。 このFragment Shaderは、3Dオブジェクトの表面の色を決定する役割を果たします。

fragmentShader: ` precision mediump float;

void main() { // オレンジ色のRGB値を定義 (1.0, 0.5, 0.0) vec3 orangeColor = vec3(1.0, 0.5, 0.0);

// 最終的に出力される色に代入 gl_FragColor = vec4(orangeColor, 1.0); } `,

gl_FragColor = ... の部分が最終的な色を決定します。それぞれの値はvec4(赤、緑、青、透明度)となっています。

このシェーダーは3Dオブジェクトの表面全体を均一なオレンジ色で塗りつぶします。

2.グラデーション

次に、球にグラデーションを付けてみます。 Vertex Shaderでは、uv(テクスチャ座標)をFragment Shaderに渡せるようにします。

fragmentShader: ` //varyingは頂点シェーダーからフラグメントシェーダーにuv座標の値を渡すための変数。 varying vec2 vUv;

void main() { //vUvにuv座標を代入する。 vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `,

Fragment Shaderでは、vUvを受け取り、gradient(グラデーションの値)として代入しています。gradientは0.0~1.0の値をとるので、gl_FragColorにそのまま代入して使うことができます。

fragmentShader: ` precision mediump float;

//vUvを受け取る。 varying vec2 vUv;

void main() { //グラデーションの方向を決める float gradient = vUv.y; 　　　　 //gradientは0.0~1.0の値をとるので、そのまま代入する。 gl_FragColor = vec4(1.0, gradient, 0.0, 1.0); `

このように書き替えることでy軸方向のグラデーションを描画できます。

また、mix関数を使っても、グラデーションを描画することができます。

fragmentShader: ` precision mediump float;

varying vec2 vUv;

void main() { //グラデーションの方向を決める float gradient = vUv.y;

// オレンジと青の色味を決める vec3 blueColor = vec3(0.3, 0.3, 1.0); vec3 orangeColor = vec3(1.0, 0.5, 0.0); //グラデーションの色を決める vec3 finalColor = mix(orangeColor, blueColor, gradient);

gl_FragColor = vec4(finalColor,1.0) `

このコードだと以下のような青→オレンジのグラデーションになります。

3.ノイズ

ノイズ的な表現を加えることもできます。Fragment Shaderへの書き加えることで実装します。

fragmentShader: ` precision mediump float;

varying vec2 vUv;

//2つの2次元ベクトルの内積、三角関数とマジックナンバーを使ったノイズ関数 float noise(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); }

void main() { //グラデーションの方向を決める float gradient = vUv.y;

vec3 blueColor = vec3(0.3, 0.3, 1.0); vec3 orangeColor = vec3(1.0, 0.5, 0.0);

vec3 finalColor = mix(orangeColor, blueColor, gradient);

//ノイズ関数を使って、表現を付け加える。 float noiseValue = noise(vUv * 10.0); //以下の式はfinalColor各要素にnoiseValueを加えている。 finalColor += noiseValue;

gl_FragColor = vec4(finalColor,1.0) `

このコードでは、球の表面に白いノイズを重ねることができます。

4.照明効果

Three.jsでは予め、オブジェクトにあてるライトの設定ができますが、Shaderを使って、照明を追加することもできます。 まず、Vertex Shaderからは、頂点の位置と法線のベクトルを渡します。

vertexShader: ` varying vec2 vUv;

//頂点の位置を取得 varying vec3 vNormal; varying vec3 vPosition;

void main() { //uv座標を頂点シェーダーに渡す vUv = uv; vNormal = normalize(normalMatrix * normal); vPosition = vec3(modelViewMatrix * vec4(position, 1.0));

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `,

Fragment Shaderでは、vNormal、vPositionを受け取り、照明の位置(lightPosition)、 照明の色(lightColor)を設定します。finalColorにdiffuseを乗算することで、照明をあてたfinalColorを描画することができます。

fragmentShader: ` precision mediump float;

varying vec2 vUv;

varying vec3 vNormal; varying vec3 vPosition; const vec3 lightPosition = vec3(200.0, 200.0, 200.0); const vec3 lightColor = vec3(1.0, 1.0, 1.0);

void main() { //照明計算 vec3 lightDir = normalize(lightPosition - vPosition); vec3 normal = normalize(vNormal);
float diff = max(dot(normal,lightDir),0.0); vec3 diffuse = lightColor * diff;

float gradient = vUv.y;

vec3 blueColor = vec3(0.3, 0.3, 1.0); vec3 orangeColor = vec3(1.0, 0.5, 0.0);

vec3 finalColor = mix(orangeColor, blueColor, gradient);

//照明効果を乗算する。 finalColor = finalColor * (diffuse);

gl_FragColor = vec4(finalColor,1.0) `

その他の照明効果として、明るい部分をより明るく、暗い部分をより暗くするグロー効果を実装することもできます。((0.299, 0.587, 0.114)はグロースケールという定数)

// 輝度効果 float luminance = dot(finalColor, vec3(0.299, 0.587, 0.114)); float glowStrength = 5.0; vec3 glow = vec3(1.0, 0.7, 0.3) * pow(luminance, 3.0) * glowStrength;

gl_FragColor = vec4(finalColor + glow, 1.0);

おわりに

ここまで、Shaderでできる、グラデーション、ノイズ、照明などの描画処理をまとめました。Vertex ShaderとFragment Shaderの組み合わせによっては、さらに複雑な表現ができます。機会があれば、そういった表現もまとめたいと思います。 ご高覧頂き、ありがとうございました。