3Dシーンを作ってすぐ公開 Three.js+Gatsby+TypeScriptによるモダンWebXRテンプレート - Qiita
この記事はWebXR Tech Tokyo #1の発表で使用いたしました。 イベントを企画いただいた運営の皆様、会場を盛り上げていただいた参加者の皆様、ありがとうございました！ 2020/7/12追記 こちらのテンプレートがGatsby公式に追加されました。引き続きご利用いただけると幸いです。 https://www.gatsbyjs.org/starters/shunp/gatsby-three-ts-plus/ この記事でできるようになること Three.jsを使った3Dウェブページをモダンな技術スタックを使って簡単に開発・公開できるようになります。オリジナルテンプレートを使うことでスムーズに始められ、またGatsbyを用いることで自分好みのカスタマイズを簡単に加えることが可能です。 以下のサンプルシーンは予めテンプレートに組み込まれております。本記事での解説に加え、必要に応じてテンプ
3分で3Dコンテンツが作れる！ 「cables」で始めるビジュアルプログラミング - ICS MEDIA
今日ではwebサイトでも積極的に3Dおよびインタラクティブな手法が用いられています。これによって画面に入りこむような、より没入感のある体験が可能となりました。商品を3D化して360度から見られるwebサイトなど見たことはないでしょうか。 一方で、インタラクティブな3Dコンテンツを作るには導入の敷居が高く感じられ、尻込みしてしまう方も多いでしょう。その敷居を下げてくれるのが『cablesケーブルス』です。 cablesは開発はundevというベルリン/ケルンが拠点のデザインスタジオが行っており、ブラウザ上で視覚的にプログラミングが行えるツールです。インタラクティブな3Dコンテンツの作成を簡単に行うことができ、デザイナーにもエンジニアにも使いやすいツールとなっています。面倒なセットアップも必要ありません。 ▼ 編集画面の例 本記事ではcablesを極めればどんなコンテンツが作れるかを紹介し、簡
ブラウザ上でリッチな3D表現を実現！ WebGL最新動向
HTML5時代に突入してから、3DCGを使ったWebコンテンツも一般的になってきた。プラグインを必要とせずブラウザのみで3D描画するための技術が「WebGL」で、最近ではより高度でリッチな3D表現が可能になってきている。ここではWebGLでどんなことができるのか、最新のサービスについて紹介していく。 ※本記事は月刊「CGWORLD + digital video」vol. 233（2018年1月号）からの転載となります TEXT＿長谷川雄介 / Yusuke Hasegawa EDIT＿藤井紀明 / Noriaki Fujii（CGWORLD）、山田桃子 / Momoko Yamada 2017 ©StudioGUFFAW All Rights Reserved. 本格的なWebGL時代が到来！ この潮流を見逃すな リッチな3DCGをふんだんに活用したコンシューマゲームが国内外から多数リリ
JavaScriptのWebGL 2.0でGPGPU - Qiita
はじめに WebGLはブラウザでGPUを使って3D表示をするためのAPIです。 WebGL 2.0は1.0に比べてGPUによる汎用計算(GPGPU)の機能が強化されています。 WebGLは複雑な手順に従ってAPIを呼ぶ必要があり使いづらいので、簡単にGPGPUのプログラムを作れるライブラリを作ってみました。 以下ではこのライブラリの使い方を説明します。 ライブラリの詳しい説明は以下にあります。 http://lkzf.info/gpgpu.js/doc/ ソースはGitHubに上げています。 https://github.com/teatime77/gpgpu.js/blob/master/js/gpgpu.js ライブラリの本体はgpgpu.jsという1個のファイルです。 このファイルをGitHubからコピーしてきて、HTMLファイルのhead部分に以下の1行を入れてください。 WebG
Poly - Google
What does this mean for you? The ability to download assets was disabled on June 30, 2021. The ability to upload new 3D models on poly.google.com was disabled on April 30, 2021. We want to thank you for joining us on this journey. We appreciate you trusting us to host your assets and provide a space where they can shine. The amazing work that our users have uploaded to Poly every day has surprised
Blend Swap | Home
By signing-up for a subscription to Blend Swap, not only are you getting great benefits, but you are also helping to support the development of Blend Swap into the future. Subscriptions help us pay for our servers and other operating costs. You are free to cancel at any time if you need to. * Donations are $5 minimum
プログラマのための線形代数再入門
The document describes various probability distributions that can arise from combining Bernoulli random variables. It shows how a binomial distribution emerges from summing Bernoulli random variables, and how Poisson, normal, chi-squared, exponential, gamma, and inverse gamma distributions can approximate the binomial as the number of Bernoulli trials increases. Code examples in R are provided to
超お手軽VR開発フレームワーク A-FRAME入門：第１回 - roman-tech
本シリーズでは最近話題のバーチャルリアリティ開発フレームワークであるA-FRAMEの使い方について記載します。筆者も特に詳しいわけではなくこれから勉強しながら執筆していくので一緒に学んでいきましょう。参考URLは以下の本家サイトです。 aframe.io 本記事で学べること A-FRAMEの概要を知る 基本的な使い方を知る 必要なスキル 軽くhtml5とjavascriptはかじっておくといいかもしれません。 ただ、結構気軽に開発できるので初心者の人でも言語を学びながらやっていけると思います。 A-FRAME概要 A-FRAMEはwebブラウザ上で動作する3Dとバーチャルリアリティ開発のためのオープンソースフレームワークです。これまで、ブラウザ上で3D空間を表現するにはwegGLという非常に難解なライブラリを使いこなす必要がありハードルが高すぎました。大学でopenGL(1.0)を使ってい
A-Frame – Building Blocks for the VR Web
Subscribe to get updates on A-Frame and our VR projects! Subscribe
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
Unity, iOS と Android を含む個人・小規模開発者向けの モバイル向け機能を完全無償化 | Unity PRESS RELEASE
Unity, iOS と Android を含む個人・小規模開発者向けの モバイル向け機能を完全無償化 〜BlackBerryやWindows Phone 8も無償利用可能に〜 マルチプラットフォーム向け統合開発環境「Unity」を提供するユニティ・テクノロジーズ・ジャパン合同会社は、本日、スウェーデンで開催されたUnity 開発者や学生を対象とした大規模カンファレンス「Unite Nordic」において、「Unity iOSアドオン」「Unity Androidアドオン」を含む、独立系開発者および小規模スタジオ向けのモバイル向け機能を完全無償化することを発表いたしました。 BlackBerry や Windows Phone 8 など、今後追加でサポートされる予定のモバイルプラットフォーム向け機能に関しても、それらがリリースされた時点で追加コストなしに利用できるようになります。 モバイル
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
一晩でフリーソフト使ってゲームモデル作った話。 - うしろぐ
先日、id:gigi-net に半ば無理矢理Unityゲーム用モデル作らされたので、３DCG制作手順をまとめておこう。 私自身３DCG作りを仕事にして十数年、この程度のことは頼まれて出来ないことではない。しかしゲーム作るなんて聞いてなかった私の荷物はiPad一枚。これでは無理だ。出来ると思うほうがどうかしている。たとえパソコンが借りられたとしても、３DCGツールってのはどれも高級で、MAYAとかMAXとかSIとかLWとかC4Dとか、機能全部入りの統合３Dソフトってのは10万円未満で買えるものではなく、誰もがインストールしているわけはなかった。 ・・・・そう、Blenderが頭角を現すまでは。 数十万円のCGソフト数種が一本の無料ソフトで代用出来そうだと話題なのが、このBlenderというやつだ。インターネットにさえ繋がっていれば、WindowsだろうがMacだろうがLinuxだろうが、すぐ
ライフゲーム3Dの作り方 - ずっと君のターン
three.jsを使った3Dのライフゲームを作ったので、次に進むためにその中身について書き残しておきます。 http://ando-yasushi.appspot.com/conways-game-of-life/gameoflife.html HTML とりあえずHTML部分はこんな感じ。Three.jsは言わずと知れたWebGLをいい感じに使えるようにしてくれるライブラリ。RequestAnimationFrame.jsはそのThree.jsにおまけとして付いてくるrequestAnimationFrameをクロスブラウザで使えるようにしてくれるライブラリ。setIntervalなんてオワコンですよ・・・って思ってたけどイマドキはむしろrequestAnimationFrameがオワコンなん？よく分からん。 <!doctype html> <html lang="en"> <head>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronic Textbook
VSCodeでThree.jsの開発環境を整える（２）
Yobi3D - Free 3D Models Search Engine
http://www.jthree.jp/
IBM Developer
HTML5でモバイル3Dゲームの開発は可能?!
