WebGL 総本山
WebSocket なども活用した面白い仕掛けがたくさん！ Rohit Kaushal さんのポートフォリオサイト WebGL GLSL demo たまに作者が降臨するポートフォリオ 今回ご紹介するのは、ソフトウェア・デベロッパーとして活動されている Rohit Kaushal さん（@_rohitkaushal ）のポートフォリオサイトです。 このサイト、私は Twitter 上でご本人がポストされているのをたまたま見つけてアクセスしました。... すごくポップで軽快な味付けのインタラクションがすてきな John Jattoh さんのポートフォリオサイト WebGL GLSL demo サクサクとテンポよく 今回ご紹介するのは、Product Designer の John Jattoh さんのポートフォリオサイトです。 サイトのタイトルに Product Designer という肩書の
PLAYCANVAS | 自動車コンフィギュレーターや建築3Dビューワーでの導入多数、WebGLゲームエンジン
3DコンテンツをWebブラウザで表示できるWebGL/HTML5ゲームエンジンです。 自動車コンフィギュレーターや建築パース、メタバース、インタラクティブ広告など非ゲーム系案件での採用が拡大しています。 開発もブラウザで完結し、使用言語は学習ハードルの低いJavaScript。複数人での同時編集が可能なためチームでの効率的な開発に最適です。
簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js" } } </script> <script t
逆引き風！Three.jsでゲームを作る時に役立ちそうなTips
まずはじめに お前は誰だ Jey-enと申します。業務でC#を、JavaScriptは業務と趣味で合わせて1年という、素人と知ったかぶりの狭間を生きております。 こんなん作った Three.jsでゲームっぽいのが作れるかなと思い、このくらいまでやってみました。 大体ね、「３DぐらふぃっくがWebで出来るようになった！おっしゃゲーム作ったろ！」なんて、脳筋すぎると思いませんかね そのゲームっぽいものを作りながら思いついた、使えそうな小技をお伝えできればと思います。 他の方がやっているように、一つのテーマで完結まで行くという形ではなく、タイトルにもあるように【逆引き辞典風】な何かです。 対象としている人： Three.jsを使って、【何かモデルを表示する】とかできて、次は何をしようかと考えてる人 よせばいいのにUn●tyじゃなくてThree.jsでゲームっぽいのを作ろうとしてる人 せめて「Sc
Phaser - A fast, fun and free open source HTML5 game framework
Open Source HTML5 Game Framework For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Phaser Editor Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects and more. It's
WebGL スライド共有サービスを作りました - hakobera's blog
先々週末に参加した 第５回 WebGL 勉強会でつかった WebGL 3D プレゼンが好評だったので、週末勢いで共有サービスを作ってみました。 WebGLeit - Share Your WebGL Slide Google アカウントがあれば、誰でもご利用になれます。 WebGL が有効な Chrome 9 以上か、FireFox 4 β11 だとスライドが 3D で表示されます。他のブラウザの方は、普通の HTML プレゼンのように見えるはずです。 スライドのクリックで進む、ドラッグでスライド回転、ホイールで拡大縮小させることができます。 なお、既知の問題として、Mac の Chrome でスライドの半分くらいが白くなってこと、Windows 版の Chrome で編集画面がものすごく重いという問題があります。この辺は WebGL の実装の問題なのか、アプリの問題なのかは調査中です。
three.jsにおける2D描画方法 - $ cat /var/log/shin
Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手
three.js メッシュの立方体をグリグリ視点を変えれるようにする
HTML5に搭載されたwebGLを扱うためのライブラリthree.jsを使って立体物を表示、マウスで視点を操作できるようにしたサンプルです。 マウス視点操作にはTrackballControls.jsがありますが、Z回転が邪魔だったりで今回はOrbitControls.jsを利用。 ・・・たぶん、パラメーターなどで制御できると思うのですが。 ヘッダータグに二つのjsを読み込む javascriptはこんな感じ var main = function () { var scene = new THREE.Scene(); var width = 800; var height = 600; var fov = 60; var aspect = width / height; var near = 1; var far = 10000; //カメラ var camera = new THREE
Blend4Web – Blenderで作った3DデータをWeb上で
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。 そこで既存の仕組みで作られたデータを取り込めるのがベストです。3Dモデリングソフトウェアとして有名なBlenderのデータをWeb上で使えるのがBlend4Webです。 Blend4Webの使い方 Blend4Webのデモです。太陽系の惑星を描いています。 もちろんマウスで視点を変えたりズームイン、ズームアウトも可能です。 ファッションショーのデモです。 視点を変えたり、 近づいてみることもできます。 3Dコンテンツ
HTML5でwebGL+threejsを使った3Dオブジェクトのサンプル
HTML5と言うとタグが増えたのとCSS3になっただけと思われがちですが、HTML5が対応した様々な技術はたくさんあります。 その中でもwebGLを紹介。 ブラウザから直接PCのグラフィックボードの性能を引き出す技術で3Dのリアルタイムレンダリングなどが可能になります。 360°回転させながらスポーツカーをレンダリング Car Visualizer スクリーンショットを見ただけだと信じられない人もいるかもしれませんが、これブラウザです。 車種やボディーカラー、ホイールカラーなど選択できます。 オブジェクトがゆっくり回転しながら ボディに風景が写りこみリアルタイムレンダリングを行っているサンプルです。 マウスで視点の操作もできます。 車がかっこよかったのでスクリーンショットたくさん撮ってしまいました（笑） この3Dオブジェクトを出力するにはjavascritpの力を借りる訳ですが、 java
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL Presentation
Perfume Global Lab
Unityで開発したゲームをプラグインなしで実行可能にするWebGLアドオンが提供予定