【WebGL2】GPU Instancing x Transform Feedback で大量のインスタンスの計算と描画をGPUで行う - KAYAC engineers' blog
~ このエントリは 【カヤック】面白法人グループ 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 を使っていて、ドローコー
UnityのWebGLアプリ開発における"使えないライブラリ問題"の回避策 - Gaudiy Tech Blog
ファンと共に時代を進める、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 MEDIA
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
朝の時間を使って週に3回WebGL勉強会を半年開いてみた結果www - KAYAC engineers' blog
こちらはTech KAYAC Advent Calendar 2022 12/4 の記事です。 ご覧いただきましてありがとうございます、カヤックでWEBフロントエンジニアをしています新卒3年目のbobと言います。 www.kayac.com 昨日は同期のフロントエンドエンジニアのmiyabinの記事でした。Svelteという新しいフレームワークを仕事に投入したという内容になっていますので、もしよろしければぜひこちらもご一読を！ techblog.kayac.com 今回の記事では、タイトルの通り半年間朝の時間を使って勉強会を開いてきて得られた知見や感想を書いていきます。 何か新しい知識を得たい・会社に普及させたい、会社で勉強会を開きたいといった方にとって少しでも参考になりましたら嬉しいです。 WebGLとは何ぞ？？ 勉強会の話題に行く前に、まずWebGLという単語について説明します。 あま
【Pixi.js入門】WebGLが手軽に扱えるJavaScriptライブラリの使い方
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の利用方法
クリエイティブ系のウェブサイト制作で役立つCSS技法 ～TechFeed Conference 2022講演より | gihyo.jp
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「クリエイティブ系のウェブサイト制作で役立つCSS技法（池田 泰延） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 みなさんこんにちは、私のほうでは「クリエイティブ系のWebサイト制作で役立つCSS技法」ということで発表していきます。 簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。 今日はWebの演出技法にフォーカスして紹介していきたいと思います。 Color Pallet Visualizer ―マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす まずデモを用意してきた
Web ページの背景を動く星空にした話 (with react-three-fiber)
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の勉強の仕方 - Qiita
概要 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入門】初心者がまず見るべきサイト・書籍まとめ | AndHA Blog
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！ これら全てを行えば、初心者を脱出出来るでしょう！ 【サイト】Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-th
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
