WebGL experiments that are made from scratch.
![WebGL Bits](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ee29e730d8fe999cdbee5bbc3d0c6bdac972e79/height=288;version=1;width=512/https%3A%2F%2Fwww.yuichiroharai.com%2Fwgl%2Fimages%2Ffacebook.png)
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(前編) 西田慎吾(株式会社アイ・エム・ジェイ) 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
LiquidFun を試してみるテスト LiquidFun はBox2Dをベースとして Google によって開発されている 2D 物理エンジンライブラリです。最近、1.1 が登場したようです。 <対応した点> ・サンプルの1つ「TestWaveMachine」を実行するよう対応。 <参考> ■ google/liquidfun https://github.com/google/liquidfun ■ LiquidFun https://google.github.io/liquidfun/ ■ LiquidFun Demo https://google.github.io/liquidfun/testbed/index.html ■ Googleがオープンソースの2D物理エンジンLiquidFun 1.1をリリース http://www.infoq.com/jp/news/2014/0
TinySegmenterはJavascriptだけ書かれた極めてコンパクトな日本語分かち書きソフトウェアです。 わずか25kバイトのソースコードで、日本語の新聞記事であれば文字単位で95%程度の精度で分かち書きが行えます。 Yahoo!の形態素解析のように サーバーサイドで解析するのではなく、全てクライアントサイドで解析を行うため、セキュリティの 観点から見ても安全です。分かち書きの単位はMeCab + ipadicと互換性があります。 デモ 日本語の文章を入力し、解析ボタンをクリックしてください。 ダウンロード TinySegmenterはフリーソフトウェアです. 修正BSDライセンスに従って本ソフトウェアを使用,再配布することができます. Download TinySegmenter version 0.2 使い方 <script type="text/javascript" src
WebGLでモデル(きゃんち)とステージ(一般家屋)を3DCG描画する「きゃん家!」についての技術解説第二弾です。 今回は、主に外部3Dデータの読み込み・描画処理についてjThreeの松田さんに解説いただきました。 by 馬場美由紀 (CodeIQ中の人) 3DきゃんちモデルはMMD(MikuMikuDance)で使われるPMX形式のデータです。 チームグリグリの小川幸作さんに、モデルの作成を相談したのが応募締め切り1週間前。限られた時間の中で審査期間に間に合わせてくれました。 WebGLの基本操作にはjThree、PMXファイルの読み込みにはkatwatさん作成のmmd.three.jsをベースにしたjThree.MMD.jsを利用しました。 jThreeはjQuery+three.jsを実現したWebGLライブラリです。GOMLというマークアップ言語でWebGLコンテンツを作ることがで
地理院地図3Dデータを使ってみるテスト(その5) <対応した点> ・THREE.PointCloud() で3Dデータを表示するよう対応。 ・高さに応じて HSL による色指定を行うよう対応。 <参考> ■ [GLSL] Three.js + ParticleSystem で球体にドットを配置してみるテスト。 http://jsdo.it/cx20/596T // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その4)" http://jsdo.it/cx20/jEqZ // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その3)" http://jsdo.it/cx20/ky6o // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その2)" http://jsdo.it/cx20/rr
朝からセミさん全力すぎ。 鳴き声で起こされたがちゃまにあですどーもおはようございます。 昨日から始めたencant.js。 【enchant.js】JavaScript初心者がenchant.jsを使ってゲームを作りたい話(始動編) - がちゃまにあ日報 ちょっとだけいじってみましたよー。 code.9leapというサイトが死ぬほど便利で感動!! そこでチュートリアルをやってみました。 ローカルでやろうと思ってたけど JavaScriptでも何でもそうだと思うんだけど、コード書くのはテキストエディタあればいいけど、それを動かして試す環境もいるんですよね。 色々調べてまずは自前で環境設定*1したんですが、ブラウザに上手く反映されない。 【JavaScript】ぎゃぁぁぁできた!(*゚∀゚*) ページ上部に戻るボタン(解決・設置編) - がちゃまにあ日報 このボタンを作るのにJS binという
こんにちは、あゆめぐです。 今回はダンジョン生成の基本部分。 アルゴリズムそのまま実装したものの状態まで書きました。 はい、相変わらずjavascriptです。 どこかのタイミングでいい加減にc#にしないとな〜と思うんですがjavascriptそのままいろいろ持ってけて便利すぎるんだ〜。 ほら私が好きなActionScript3.0もenchant.jsにしてもjavascript系だからね。 ##考え方 ダンジョンマップを生成するアルゴリズムの解説 こちらの二分割を繰り返す方法の方です。 しかしながらこの実装だとアルゴリズムばればれなのでここからいろいろカスタマイズしないと。 均等に分割する方法はまだ作成していないので気が向いたときにやってみようかと思います。 他にもダンジョン生成にはいろんなアルゴリズムがあって 迷路自動生成アルゴリズム 上記サイトのような本当にダンジョンというのもあり
エェェェェンベッドJSを更新しました。 リビジョンは38です。 mbedJS - a mercurial repository | mbed 更新内容 機能追加 I2C,I2CSlave,Serial,Memoryクラスを追加 JavascriptAPIでコールバック関数の個別指定に対応 JavascriptAPIにdispose関数を追加 バグ修正 SDカード使用時にフリーズする問題を修正 I2C,I2CSlave,Serial,Memoryクラスを追加 以下のクラスが利用できるようになります。 Memory mbedのメモリを直接読み書きするクラスです。 I2C mbed::I2Cクラスを操作します。 @ban4jpさんが加速度センサを使ったデモプログラムを書いてくださいました。 mbedJSで加速度センサーテスト | mbed ※原因不明の不具合があるため、初期化コードを2度送ら
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
Get more things like this right into your inbox. JOIN THE LIST I recently got inspired by a beautiful youtube audio visualization and thought “Hey, why not create my own set of audio visualizations?”. Check out the Audio Visualizations! (Chrome only for now- sorry) In this article I’ll explain what I did in order to build it. Although webgl or canvas2d looked very promising (and interesting, I’d l
Beyond our own book, listed here are upcoming, recent, and recommended graphics books, along with related online information. On our Resources page we list only books that are free for download. To sample the books: some books have "look inside" on Amazon, or have Google Books samples, which we link to as we find them. You can also look at Amazon's best-selling DirectX and OpenGL book lists. Other
以前、2D 物理演算でゴゴゴとドドドを落下させてみましたが、3D 物理演算でも試してみました。 JavaScript の 3D 物理演算ライブラリとして ammo.js(Demo) Cannon.js(Demo) oimo.js(Demo) あたりが有名なようです。 今回は、Cannon.js を使ってみました。 ゴゴゴとドドド ゴゴゴのコード(抜粋) 基本形のオブジェクト(立方体や球体など)を使う場合と比較して、複数のオブジェクトをまとめて物理演算する場合は、多少ハードルが高い(複雑さが増す)のですが、Cannon.js には、その問題を解決する仕組みが用意されているようです。 Cannon.js の場合、CANNON.Compound() を使うことで、複合オブジェクトとして使えるようです。 demo.addScene("GOGOGO", function () { var world
About ◀ British bloke, in the Los Angeles South Beach area via San Francisco, Singapore, Barcelona, Zurich, London, Brighton and Hong Kong ● Second Life developer during the day since 2004 ● Enthusiastic WebGL/VR/XR hacker in the evenings ● Founder of Industrial Might and Logic Combat Robots ● Dipping a creaky old toe in the Concept II Rowing and CrossFit waters ● Eager traveler ● Insanely happy h
WebGL - Less Code, More Fun 2014-06-16 This post has moved to webglfundamentals.org Tags: codedevelopmentwebgl Comments WebGL Anti Patterns Idea: Curated Open Source Libraries
WebGL Anti Patterns 2014-06-16 This post has moved to webglfundamentals.org Tags: codedevelopmentwebgl Comments Why Your Company Owns Your Outside Work WebGL - Less Code, More Fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く