WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN
WebGL (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。 WebGL への対応は、現代のすべてのブラウザーにあります（後述の互換性一覧表を参照してください）。ただし、ユーザーの端末にこれらの機能に対応したハードウェアが搭載されている必要があります。 WebGL 2 API は OpenGL ES 3.0 の機能セットの大部分に対応しています。このインターフ
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
tmlib.js 入門
概要 tmlib.js は phi氏開発のゲーム向け JavaScript ライブラリ class 定義、jQueryライクなDOM操作、ajax機能、HTML5 Canvasラップ、アニメーション、 ベクター・行列、サウンド、PC・スマホ対応 などなど MIT License Google Chrome、Safari、Firefox 対応。IE なんて知りません. 多くのクールなサンプルが公開されている スライド ドキュメント tmlib.js > ダウンロード tmlib.js を使って、SBP（スライディング ブロック パズル）を作ってみたよ SBP とはブロックをスライドさせて目的の配置にするパズルの総称 スライディングブロックパズル 15パズル、 箱入り娘、 ラッシュアワー などが有名 tmlib.js のすべての機能を使ってみたわけじゃないけど、使ってみた部分について解説するよ
HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」:phpspot開発日誌
iio Engine Home HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 物理エンジンや当たり判定、アニメーションのライブラリ等が含まれていて、ゲームなどを作る場合に使えそうです。 HTML5でゲームを作る際の選択肢の１つとして知っておいても良さそう デモページを見れば大体どういうものかは分かるはず 関連エントリ HTML5を使った超クールなフリーのWordPressテーマ集35 HTML5を使ったクールなサイトデザイン集２１ 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 HTML5のゲームエンジン「Quintu
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET
Tooklit for CreateJSは仕事でも利用しています。しかし、完全に出力する為にはFlashの××の機能は使っちゃダメなど、 いまのところは制約が多く使いづらいのが現状です。 また、出力されたソースコードをそのまま動かすと、なかなかの重さで書き換える必要がある場合も多く。。 現在は、Flashで利用している画像素材などの書き出し用として使うことがメインです。 CreateJSを使って実際に作ってみる CreateJSのEaselJSとTweenJSとPreloadJSを使って、 以下のような「動物が上下に動く」アニメーションを作成してみたいと思います。 CreateJSを使う為の準備 まずは、CreateJSのライブラリを読み込む実装を行います。 今回はCDNで提供されているものを利用していますが、ローカルにダウンロードしてきてそれを読み込むのももちろんありです。 <scrip
![[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/383ba9cac4755b0264d3fc76115f5fbaf427c264/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F174.jpg)
jCanvas | jQuery meets the HTML5 canvas
Seriously, what is jCanvas? jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more. The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 c
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas勉強会
実録！HTML5でモバイルWebアプリ開発