というのはウソで。 いやウソではないかもしれないけど、そんなガチな感じではなくて「こどもが適当に描いた落描きがなんとなく立体になったら面白い」くらいの空気感で作ってみた。実際、我が家の3才児でもそれなりに楽しそうに使えてたり。 要するにTeddyなんだけど、JS使ってブラウザ上でできたらおもしろそうだとたぶん5-6年くらい前から思ってて、やっと実装できたので今は新しいパンツをはいたばかりの正月元旦の朝のようにすっきり。（最近はブラウザで動く3Dスカルプトソフト既にいくつかあるみたいだけど・・・） https://github.com/technohippy/teddyjs 結構動作が重たいとはいえスマホでもそれなりに動くし、マウスを使うよりも指を使ったほうがずいぶん楽しい感じになるので、できればぜひスマホで試していただきたく。 https://technohippy.github.io/t
Graphical Web ! 当テキストは Graphical Web Advent Calendar 2013 - Adventar への参加記事です。 Graphical Web という言葉は、なんとなく響きがかっこいいですね。HTML5、CSS3、そして我らが WebGL。いずれも、グラフィカルな側面を多く含む技術です。当サイトは WebGL の開発を支援するサイトですから、当然今回の企画にも WebGL にまつわる記事を寄稿させていただこうと思います。 今回のテーマは、JSON モデルデータの読み込みとレンダリングです。Advent Calendar から初めて当サイトに来られたという方もいらっしゃるでしょうから、今回はいろいろと当サイトの記事などを引用しつつ丁寧に解説してけたらと思います。 three.js と WebGL WebGL を用いた開発シーンでは、いまや欠かすことの
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
この前の記事で試したブレンドモードは、ひとつのメッシュでのテクスチャーの色合成だったため、それぞれの画像を別々に管理できませんでした。この課題は、blendFunc を使えば解決できます。 OpenGL 由来の関数を使いながらなので、ブレンドモードの公式にそのまま当てはめて計算とは行かないのですが、よく利用しそうなブレンドはおおよそできました。個別のレイヤーなので、それぞれに別の動き（アニメーションなど）を与えながら色のブレンドをすることもできます。 demo DEFAULTgl.enable( gl.BLEND ); ... gl.drawElements( /* Background */ ); gl.blendFunc( gl.ONE, gl.ZERO ); gl.drawElements( /* Foreground */ ); ADDgl.enable( gl.BLEND );
WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
Superconductor is a web framework for creating data visualizations that scale to real-time interactions with up to 1,000,000 data points. It compiles to WebCL, WebGL, and web workers to unleash the power of parallel hardware for fast and cross-platform data visualization. Learn more » Caution Superconductor is currently available as a developer preview. We want to give you an early look at what we
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
32. <!doctype html> <html> //頂点 <head> var vertices = new Float32Array([ <meta charset="utf-8"> 0.0, 0.5, 0.0, <title>webgl demo</title> -0.5, -0.5, 0.0, <script> 0.5, -0.5, 0.0 document.addEventListener('DOMContentLoaded', function(){ var canvas = document.querySelector('#glcanvas'); ]); var gl = canvas.getContext('experimental-webgl'); // 頂点の数 var verticesLength = 3; var vShaderSource = [ // gl_
RPGツクールMZの関数を抽出した / magicien ゴールデンウィークに遊ぶ用にRPGツクールMZを買った。 RPGツクールMZは、ほとんどの処理がJavaScriptで記載されていて、MacやiPhoneにも対応している優れもの。JSでプラグインを書くことで機能拡張することもできる。 プラグインは、既存の本体のスクリプト（コアスクリプト）の関数を上書きする形で拡張することになっているようだ。ただ、既存の関数の一覧がどうにも見当たらないので、関数を抽出して一覧化した。 RPGtkool MZ v1.2.1 API functions 本当は、ソースコードへのリンクも付けたかったが、ゲーム用途以外でのコアスクリプトの配布は許可されていないように思うので諦めた。パーサだけ作って配布するかもしれない。 ざっと眺めてみると、関数一つは10行以下のものがほとんどで、テストのしやすさやプラグイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
