Flashで作ったCreateJS形式コンテンツをWebGL再生したい - Qiita
はじめに 最近、HTML5でゲームコンテンツを作ることが多いのですが 皆さんどのように制作されているでしょうか。 よく見かけるのは、HTML5開発のためのエンジン・ライブラリを用いつつ、アニメーションは アニメーターが頑張ってスクリプトを覚えて書く アニメーターが作ったアニメーションを、エンジニアが目コピしてスクリプトに落とす アニメーターが作ったアニメーションをそのまま使用できるようにシステムを組む などで対応する…といったスタイルなのですが、 ガラケー時代～ソーシャルゲーム全盛期においてAdobe Flash(※現在はAnimateと改名)を使い続けてきた身としては どうにかFlashだけで完結させたいんだよなー、と常々思案しております。 未だにアニメーションのオーサリングツールとしてはFlashの優位性は高いと思っていますし、 新たなエンジン・ライブラリを習得するコストもかかりますし
three.jsのlinewidth効かへんメモ - devdev Inc. / works
ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、 それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、 即「できます！」って答えたんだけど、 このプロパティまったく効かへん。。。 なに設定してもずっと1pxの細い線のまま、、 前できてたような気がしたんだけど記憶違いだったか、、 ウニョ線は色々汎用性の高い表現なので、 できればWebGLでできるように無理やり解決しておきたくて、 (Canavsなら線幅変えられる。何回もやったことあったなと思ってたのはたぶんCanvasのことだった) 調べたらTubeBufferGeometryっていうよさそうなのがあって、 これカメラ固定して表示したらまんま2Dのラインだな。 と思って試したらそれっぽくなった。 線太くするテスト アニメーションさせるときに頂点一から計算し直
Pixel Perfection with Three.js
I've had the chance to spend a couple weeks messing with WebGL for work. Three.js is an invaluable library if you haven't used it. But one of the most important things I've learned using it, is the equation to set the camera's distance from an object so that the object's dimensions are pixel perfect. There is a similar equation in Flash when working with Away3D or Papervision3D. camera's z = viewp
WebGLのShaderをHTMLに直接書くと消耗するので、外部ファイルにしてJadeかSlimでincludeしちゃおう - Qiita
<script id="vertexShader" type="x-shader/x-vertex"> uniform float hoge; void main() { float fuga = 1; gl_Position = projectionMatrix * modelViewMatrix; } </script> こんな感じでHTMLに埋め込まれている。 いちいちhtmlを触らないといけない → 再利用性がない シンタックスハイライトもないので、開発がめんどくさい。 別ファイルにしよう 2つの戦略がある。 外部ファイルにするShaderファイルを作成し jsでロードする JadeなどでHTMLに埋め込む ここではJSでロードすると単純にめんどくさいのと、ロード時間が増えて、メリットがなさげなのでやめておく。 Jadeでの埋め方 jadeと同じ階層のtest.vertファイルを埋
Three.jsの便利なライブラリ８選 - Qiita
WebGL Advent Calender ８日目。 まずここに、７日も過ぎての投稿になってしまったことをお詫び申し上げます・・・！ 完全に忘れていたとは口が裂けても言えないですね。 Three.jsは実は沢山のライブラリがある 試しにThree.jsのGithubリポをフォークしてみると、 本体 本体のソース・ファイル（たくさんの.jsファイル） Example build用スクリプト などなど、色んなファイルが置いてありますね。 今日見ていくのは、 Example > js ディレクトリです。 examples ├── js ├── cameras ├── controls ├── crossfade ├── curves ├── effects ├── exporters ├── geometries ├── libs ├── loaders ├── math ├── modifie
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Getting Started with StageGL - CreateJS Blog
WebGL使ったスマホでの動画インライン再生 - devdev Inc. / works
WebGL Stats
http://algojs.org/