本連載は、「エキスパートへの道しるべ（Load to Expert）」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。 本記事では、WebGL解説サイト「WebGL総本山」の運営やスクールでの教育活動を行い、Web上の3D表現の普及に尽力するh_doxas（杉本）さんに、WebGLの概要や最新動向、さらには学習のヒントと将来展望について、じっくりとお話を伺いました。 h_doxasさんをTechFeed上でフォローしよう！ WebGLとの出会いと自己紹介 ――まずは簡単に自己紹介をお願いします。 杉本: ネット上では「h_doxas」という名前で活動していますが、本名は杉本といいます。別に隠しているわけではないです（笑）。主にWebGLという技術を専門に扱っていて、これに関連するブログの運営や、スクールでの講師活動も行っています。

~ このエントリは 【カヤック】面白法人グループ Advent Calendar 2023 の22日目の記事です。~ こんにちは！ハイパーカジュアルゲームチームの深澤です。 WebGL2において GPU Instancing でメッシュを大量に表示しつつ、Transform Feedback を使ってインスタンスごとの情報計算もGPUに任せてみたいと思います。 ↓ デモはこちらになります。画像かURLから飛ぶことができます デモ: https://takumifukasawa.github.io/webgl-transform-feedback-gpu-instancing/ ↓ リポジトリのURL github.com メッシュ1つあたりの頂点数は24です。描画色は、インスタンスごとの色をふまえて平行光源の拡散光だけ計算しています。 GPU Instancing を使っていて、ドローコー

ファンと共に時代を進める、Web3スタートアップのGaudiyでUnityエンジニアをしているくりやま（@xamel7）です。 Gaudiyでは"Gaudiy Fanlink"というブロックチェーンや生成AIなどの技術を活用したファンプラットフォームで、漫画、アニメ、アイドルといったIP（知的財産コンテンツ）独自のコミュニティの開発・運営をしています。 service.gaudiy.com このFanlinkの一機能として、現在、新たに開発を進めているのがIPのカジュアルゲームです。 「GANMA!コミュニティ」で先日公開されたカジュアルゲーム ▼登録不要で遊べます ganma-community.com WebサービスであるFanlinkとの連携が必要なこともあり、GaudiyのUnityチームではWebGLビルドによるアプリケーション開発を行っています。 WebGLビルドは、スタンドア

制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式

こちらはTech KAYAC Advent Calendar 2022 12/4 の記事です。 ご覧いただきましてありがとうございます、カヤックでWEBフロントエンジニアをしています新卒3年目のbobと言います。 www.kayac.com 昨日は同期のフロントエンドエンジニアのmiyabinの記事でした。Svelteという新しいフレームワークを仕事に投入したという内容になっていますので、もしよろしければぜひこちらもご一読を！ techblog.kayac.com 今回の記事では、タイトルの通り半年間朝の時間を使って勉強会を開いてきて得られた知見や感想を書いていきます。 何か新しい知識を得たい・会社に普及させたい、会社で勉強会を開きたいといった方にとって少しでも参考になりましたら嬉しいです。 WebGLとは何ぞ？？ 勉強会の話題に行く前に、まずWebGLという単語について説明します。 あま

PixiJSのダウンロードと実行方法 まずPixiJSをダウンロードするためにはビルド済みのファイルを「https://pixijs.download/release/pixi.min.js」から入手するか、ターミナルを開いてnpmコマンドを使い「npm install pixi.js」と入力してダウンロードを完了させた後に「import * as PIXI from 'pixi.js'」でライブラリをインポートしましょう。 また、ビルドしたファイルをダウンロードした場合は、他のJavaScriptライブラリを読み込む時と同様にscriptタグのsrc属性を以下のように記述しましょう。 <script src="pixi.min.js"></script> PixiJSのCDNPixiJSをダウンロードせずにささっと試してみたい方はCDNを利用されることをオススメします。 CDNの利用方法

本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「クリエイティブ系のウェブサイト制作で役立つCSS技法（池田 泰延⁠）⁠ — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 みなさんこんにちは、私のほうでは「クリエイティブ系のWebサイト制作で役立つCSS技法」ということで発表していきます。 簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。 今日はWebの演出技法にフォーカスして紹介していきたいと思います。 Color Pallet Visualizer ―マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす まずデモを用意してきた

TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった

概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ

【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！ これら全てを行えば、初心者を脱出出来るでしょう！ 【サイト】 Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-t