WebGL でマンデルブロ集合とジュリア集合 | Yomotsu net
複素平面を理解する普段使う”数”に実数 (real number) がある。例えば 0, 1, -10, 0.3, 1/2, √2 など。 これとは別に、虚数 (imaginary number) がある。虚数は √-1 や √(-1/2) などといった、2 乗すると 0 未満になる数のこと。 実数と虚数は、直接足したり掛けたりすることはできない。水と油のような関係。実数の単位は 1 に対して、一般的に虚数の単位は i とする。 実数と虚数を混ぜた数は 10 1 + 10 i のようになる。実数と虚数が混ざった数を複素数 (complex number) という。 複素数は、実数と虚数を軸に、2 次元の平面で表すことができる。これを複素平面 (complex plane) という。例えば、複素数 3 + 2i は次の青い点のように表すことができる。 漸化式と発散マンデルブロ集合は、漸化式
WebGL で高速 BlendMode | Yomotsu net
WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。
three.js 用にボーンアニメを持つ 3D モデルを書き出すために | Yomotsu net
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。 なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
Behind The Scene of "WebGL でクリスマス" | Yomotsu net
昨日公開した作例 Santa’s Boxes! の内容をざっくりまとめました。 Ground 去年のアドベントカレンダーに書いた内容をそのままで、ディフューズ マップを変更して雪原を作りました。three.js の機能でバンプ マップを適用したところ、IE 11 でレンダリングできなかったため、ディフューズ マップのみ適用しています。 単品 demo Skybox three.js で cube ジオメトリーを作成し、スカイボックス用のディフューズ マップを適用しているだけです。立方体の内側を表面として表示するためには material の side プロパティーに THREE.BackSide を指定します。 スカイボックス用に利用したテクスチャーは以下のような、シームレスな 6 面になっています。 単品 demo Snowing 雪は THREE.ParticleSystem を用いて
CSS Shaders はじめの 2歩目、custom() で何が行われるのか | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 7日目の記事です。 この記事では、CSS Shaders、つまり CSS Filters の custom 関数を利用したとき、何が行われるのかを知ります。 なお、この記事以降に登場する CSS Shader は、2012年 12月現在、Chrome Canary でしか動作せず、かつ、CSS Shader の設定を有効にしておく必要があります。実際の demo を表示したい場合にはこの記事の末尾で解説する手順で Chrome Canary をインストールし、設定を有効にしておいてください。 CSS Shader を使うcustom 関数は、CSS Filters の他の関数と違い、その引数はすこし複雑です。この記事執筆段階の草案には次のように示されています。 custom(<vertex-shader> <fragm
なぜ HTML5 を使うのかを考えよう | Yomotsu net
Web 制作の現場にも HTML5 が浸透し始めてきました。では、なぜ HTML5 を使わなければならないのかを考えてみましょう。 なぜ HTML5 が求められるのか最近、Web を取り巻く環境は多様化し、プラグインをサポートしていない Web ブラウザーの普及、画面サイズの多様化、Web アプリケーション構築など、従来の Web ページには求められなかった様々なケースへの対応が必要になりつつあります。 こうした、従来の Web ページにはなかった特性を実現するためには新しい技術が必要になります。これが HTML5 やその周辺技術というわけです。当然ながら新しい技術なので、古いブラウザーはこれらに対応していません。 Web ブラウザーは家庭用ゲーム機と似ている世代ごとの Web ブラウザーはゲーム機に例えるとわかりやすいでしょう。 現在、私たちは家庭用ゲーム機で高度なグラフィクスのゲームソ
three.js の PlaneGeometry で地形を作る | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 1日目の記事です。 この記事では、three.js の PlainGeometry の頂点の z 方向にノイズを加えて、少し凸凹とした地形を作ってみるという内容をまとめています。完成は以下のような表示です。 なお、demo は WebGL が有効なブラウザー (Chrome, Firefox と Flag を有効にした Opera と Safari) でしか再生できません。 順を追ってみていきます。 ##手順 1 まずは three.js のお決まりに沿って、renderer, scene, camera, light を設置していきます。 scene に fog を指定しておくと遠方が指定した色にぼやけさせることができます。 scene.fog = new THREE.FogExp2( 0xAA9966, 0.015
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
