前回の続きですが、 gl.drawElementsとgl.drawArraysを使って画像を描画してエフェクトをかけちゃいます。 今回のサンプル画像も東京ドロンパです。 gl.drawElementsで色んなエフェクトをかける 下記サイトを参考にさせていただきました。 GLSLはこちらに記載しあるもので、時間経過と共にパラメータを更新し再描画している感じです。 http://ics-web.jp/lab/archives/5535 ※ サンプルのために描画した下記サイトは、Google Chromeで閲覧下さい。 （Web Componentsやら使ってしまったので閲覧できる環境に制限が。。 ・うずを巻く http://experiment.itinao.net/webgl/blog/01_uzu_texture.html ・モザイク状態から徐々...

表題の通り、WebGLで画像を描画します。 描画するにはいくつか方法があると思いますが、 今回は ・gl.drawElementsを使った手法 ・gl.drawArraysを使った手法 の2通りを試しました。 描画した結果はこちらです。 なるべくシンプルに書いています。 http://experiment.itinao.net/webgl/texture_draw_sample.html （サンプル画像は、東京ドロンパです！ ハマりどころになるかと思うので先に書いておきますが、 画像のサイズ(縦と横)は2の乗数にしてください。 そうしないとエラーになって描画できません。 canvasでdrawImage(2の乗数で)して、canvas.toDataURLでリサイズしたデータを取るなどしても大丈夫です。 理由は、古いGPUが2の乗数のテクスチャしかサポートしていないから、などがあるみたいです。 gl.drawElementsを使った手法 おそらく一般的なもの。 コードを一部抜粋すると、このような感じ。 全文を見たい場合は、上記のサンプルコードを見てください！ var...

WebGLって何だっけ？ ここ読んで下さい。 http://wgld.org/ 筆者もすごく参考になってますありがとうございます。 初めての方は、読んでって言われても..って感じだと思うので、 概要だけ掴んだ後は下記のサンプルを実際にコードを書きながら試してみるといいと思います。 「ポリゴンのレンダリング」http://wgld.org/d/webgl/w014.html （WebGLで三角形を描画するだけでも数十行コードを書く必要があります。 今回の記事は、上記のポリゴンレンダリングでも使われている、描画メソッド[gl.drawArrays]などについて記載しています。 そして、その描画メソッドで指定されているプリミティブについて解説していきます。 （プリミティブとは、描画メソッドで使用する描画モードみたいなもの。詳細は下記で。 WebGLの描画メソッド 下記の種類があります。これらを実行することで、canvas上に描画されます。 大雑把に書いているので、「gl.drawArrays」と「gl.drawElements」は下記で補足します。 gl.drawArrays ⇒...

前回記述した 「WebRTC(PeerJS)とPolymerを使ったデスクトップ画面共有アプリを作ってみた。」 の派生として、 RecordRTCを使ったデスクトップ画面共有アプリを作ってみました。 こちらからインストールできます。 （とりあえず動くものをアップした状態なので、画像とか使い方が書けてないですが。。） ◆ Desktop Capture Recorder https://chrome.google.com/webstore/detail/desktop-capture-recorder/boajadhokhjkmfjmnmmkkmgnafnbcfco このアプリが何ができるかというと、デスクトップで開いているアプリケーションを録画し、録画内容のプレビュー・保存を行うことができます。 前回記述したアプリではデスクトップ画面のリアルタイム共有ができますが、セキュリティやネットワークのトラフィックなど気になる箇所がありました。 これで問題解決です。。たぶん。 ・使い方をザックリと。 1....

表題の通りですが、 WebRTC(PeerJS)とPolymer(全然凝ってないけど)を使ったデスクトップ画面共有アプリを作ってみました。 これで何ができるかっていうと、 画面上で起動しているアプリケーションをリアルタイムに画面共有ができます。 図. こんなイメージ。 共有する側(図の左側)はChrome拡張機能をインストールする必要があります。 これは、「Desktop Capture API」を使いたかった為です。 chrome.desktopCapture ⇒ https://developer.chrome.com/extensions/desktopCapture 共有を開始すると共有用URLが生成されるので、 こちらを閲覧する側(図の右側)に教えてGoogle...

今回はShadow DOMの「content」と「select="セレクタ"」と関連するセレクタらへんの話しにします。 Polymerを勉強したての頃は「？」な部分が多く、 何がよく分からないのかなーと色々と調べたところ、 Web Components(特にShadow DOM)の理解が足りなかったんだなってことが分かりました。 （きっといきなりPolymerを覚えると、jQueryは触れるけどJavaScriptよくわかんないみたいな感じ？ なので、今回はShadow DOMがテーマです。 今回のサンプルコードは下記のAPI使っています。 HTML Templates Shadow DOM 筆者の実行環境は【Google Chromeのバージョン 37.0.2062.124】です。 (Shadow DOM は Chrome 35 以降で利用可能らしいです) Shadow...

【Web ComponentsとPolymerをさわってみる。】の続きですが、 今回はWeb Componentsで軽くサンプル作りつつポイントを書いていきたいと思います。 Polymerについては触れないです。 今回サラっと触っているのが、下記のAPIです。 Custom Elements HTML Imports HTML Templates Shadow DOM ちなみに、筆者の実行環境は【Google Chromeのバージョン 37.0.2062.120】です。　 サンプルコード このコードは、ホバーすることで色の変わる【x-sample】というタグを作っています。 そして、コード中にある、8つの【※注目※】については下部で説明します。 ...