タグ

ブックマーク / webos-goodies.jp (7)

  • CSS の背景画像を Three.js で描画する方法 - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日、 HTML5Rocks で「Canvas-driven background images」という記事が公開され、 canvas や WebGL で描画した画像を CSS の背景画像として適用できる -webkit-canvas の使い方が解説されていました。 canvas や WebGL はアニメーション GIF などに比べて圧倒的に滑らかなアニメーション

    yomotsu
    yomotsu 2012/12/26
    CSSとくみあわせる
  • WebGL の知識をバランスよくカバーした入門書「実践プログラミングWebGL」書評 - WebOS Goodies

    先日発売された WebGL の解説書「実践プログラミングWebGL」を翔泳社さんから献いただいたので、日はそれをレビューします。 書は洋書「Professional WebGL Programming」を邦訳したもので、 WebGL 自体の解説はもちろん、ベースとなる GPU アーキテクチャ、座標変換などの数学、キー入力やマウス入力などの周辺 API 、パフォーマンス改善の勘所など、 Web ブラウザ上で 3D アプリケーションを開発するのに必要な知識を一冊に集約した、優れた入門書となっています。 日語の WebGL 解説書は既にいくつか出版されていますが、書はそれらの中でも最も中身の濃いものになっていると思います。値段も比較的リーズナブルなので、 Web 上でのグラフィック技術に興味のある方は要チェックの一冊です。 概要 まずは各章の内容を簡単にご紹介します。 1章 WebGL

  • WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか!」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・(´・ω・`) そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして

  • DevFest での WebGL の LT 資料&補足 - WebOS Goodies

    先週の木曜日、 Google の開発者向けイベント DevFest にて WebGL に関するライトニングトークをしてきました。時間が 5 分しかないので、内容はほんとうに概要の紹介程度ですが、参考までに資料を公開します。 また、 LT では時間の都合から重要なことを省いている部分もありましたので、そのあたりも含めて補足しておこうと思います。 動作環境 Google Chrome 9 から WebGL がデフォルトで有効になっています。現在 (2010/12/17) はベータ版ですが、もうすぐ正式リリースされるでしょう。また、ハードウェアの制限も緩和されており、 Intel 統合チップセットの Mac mini でも動作することが確認できています。 スライドには WebGL によるデモが含まれており、それを正常に表示するには最新版の Chromium を「--no-sandbox --en

  • JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies

    先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが(WebGL 1.0 が正式リリースされました)、少なくとも現状の WebKit の実装については使い方がわかったので、日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A

  • Closure Stylesheets で CSS を最適化する (1) - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 これまで Closure Library を使っていろいろと開発をしてきましたが、 CSS の扱いについてはいつも不満でした。 JavaScript コードについては Closure Compiler との組み合わせで極限まで最適化できるのに、 CSS についてはほとんどサポートがなく、仕方がないので自作の Rakefile と YUI Compressor を使

  • Google I/O の WebGL セッションが素晴らしいのでハイライトを紹介してみる - WebOS Goodies

    今週はみんな Google I/O に気を取られているだろうから、ブログの更新はサボろうかな…と思っていたのですが、なんとなく動画を見てみた WebGL セッションの内容があまりに素晴らしかったので、ハイライトをご紹介することにしました。 WebGL を活用するためのテクニックやパフォーマンス Tips などが解説されていて、 WebGL に関わっている方は必見です。また、けっこう見栄えの良いデモがいろいろ出てくるので、「WebGL ってなに?」という方でも楽しく見れると思います。 とはいえ、解説されている内容をきちんと理解するには WebGL の基礎知識が必須です。もしセッションを見て興味を持たれたら、こちらの記事もぜひご参照くださいませ。 前半は処理を GPU へ移行してパフォーマンス改善する例 最初にまず WebGL の基概念を説明。その後、円や立方体などのオブジェクトをアニメーシ

  • 1