[B! JavaScript][WebGL] Nemisamaのブックマーク

Grimoire.js - WebGL framework for Web development -

Grimoire.js provides effective structure to make use of WebGL representational power in Web development.

Nemisama 2017/03/30

jThree.jsから名称変更

リンク

WebGLを使ってブラウザ上で3Dモデルを描画した話 - DMM.comラボエンジニアブログ

皆様、はじめまして！DMM.com Labo システム本部事業サービス開発部の久野です。この度、社内の勉強会のLTで話した内容をまとめてみました！内容はWebGLというJavaScriptのAPIを使って、ブラウザ上で3Dモデルをアニメーション付きで描画するために何を行ったのか、です。 ▼実際に動作するデモです。テクスチャを大量に読み込まなければならないので表示まで時間がかかるかもしれません。 ▲ブラウザによっては動作しない可能性がありますがデモプログラムなので悪しからず。 WebGLとはなんぞや？ WebGLとはKronos Groupが管理するOpenGL ES 2.0をブラウザ上のJavaScriptから扱えるようにしたAPIです。GPU(グラフィックカードまたはグラフィックボード)の機能を駆使して高度な3D描画を高速に行うことが出来、昨今のPC、スマートフォン等の主要なブラウ

Nemisama 2016/06/30

リンク

http://algojs.org/documents/01_algo.html

Nemisama 2016/04/08

リンク

WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）

WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）西田慎吾（株式会社アイ・エム・ジェイ）今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。クライアントサイドの使用技術クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計クライアン

Nemisama 2015/12/03

リンク

Seriously.jsで動画・画像にリアルタイムエフェクトをかける方法【ほりぼーいドッキリ編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

みなさんこんにちは、エンジニアののびすけです。最近はWeb上で動画背景を使った表現のサイトが増えてきてますね。Webブラウザの性能が上がってきている昨今では、（スペックにもよるのですが）ブラウザ側でそういった処理もガンガンできます。今回はそんなリッチな表現ができる「Seriously.js」をご紹介します。 Seriously.jsとは http://seriouslyjs.org/ 少し前に話題になった、動画や画像にブラウザ上でリアルタイムエフェクトを掛けることができるライブラリ。複雑なエフェクトをたくさん使えるにもかかわらず、簡単なJavaScriptの記述で操作できます。サンプルを触ってみようまずは、どんなことができるのかが気になると思います。Seriously.jsの公式デモを紹介してきます。こちらのページにデモへのリンクがあるので試してみましょう。 ※執筆時点ではGoo

Nemisama 2015/04/13

リンク

HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 | ClockMaker Blog

HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的先日の記事で紹介したJavaScriptライブラリ「Away3D TypeScript」(WebGLに対応)ですが、燃え盛る炎の表現を作成してみました。デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。 Demo (WebGL対応のブラウザでご覧ください) Source (TypeScript 0.9.5で作成) 移植元のFlash版のデモマウスで画面をドラッグ＆ドロップするとアングルを動かすことができます。もしかしたら環境によっては動作が重たいかもしれないので、ブラウザのウインドウサイズを小さくしてみると滑らかに再生できるようになるかもしれません。 ▲右クリックするとFlash Playerではない