【重要】サービス終了のお知らせ

yaju3D

静岡県島田市在住のアラフォープログラマー
http://twitter.com/yaju/
http://blogs.wankuma.com/yaju/

http://jsdo.it/Yaju がログインできなくなってしまったので
別アカウントで再作成

Works

2次・3次ベジェ曲線

曲線について http://hakuhin.jp/as/curve.html#CURVE_02 Flashで作成されていたのをJavascriptに移植してみました。

  • 4897
  • 1

スプライン曲線

曲線について スプライン曲線を描画する http://hakuhin.jp/as/curve.html#CURVE_04 Flashで作成されていたのをJavascriptに移植してみました。

  • 7443
  • 7

テクスチャマッピング入門

下記サイトを参考に作成してみました。 最速チュパカブラ研究会 Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) http://d.hatena.ne.jp/gyuque/20090211 角度を指定できるように修正しました。 角度を変更すると変化が元に戻ってしまいます。

  • 4340
  • 0

テクスチャマッピング入門 メッシュ編

下記サイトを参考に作成してみました。 Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) [最速チュパカブラ研究会](http://d.hatena.ne.jp/gyuque/20090211) [四角形の自由変形](http://www.d-project.com/flex/009_FreeTransform/) 前回は1面でしたが、今回は25面に挑戦しました。 各赤い点をマウスで動かして画像を変形させることができます。 各入力コントロールの説明 meshは、三角形の線が引きます。 degreesは、画像を回転させます。waveと同時に使えません waveにチェックすると画像がゆらゆらします。 cycleは、揺れの周期です。 swingは、振れ幅です。 speedは、揺れの速さです。

  • 7461
  • 6

画像の自前回転処理

CanvasのRotateメソッドを使わないで自前の画像回転処理です。 回転処理する際、入力画像の位置から出力画像内の座標を計算すると穴が空いてしまいます。 穴が空かないようにするには、出力画像の座標に対応する入力画像の座標を逆計算させます。 参考サイト [C言語による画像回転処理について](http://homepage2.nifty.com/tsugu/sotuken/rotation/)

  • 8893
  • 0

3Dプログラミング入門 透視投影

てっく煮ブログ [AS3.0 で 3D プログラミングを1から勉強する (2) - 行列の導入](http://tech.nitoyon.com/ja/blog/2008/06/17/as-3d-lessen2/) [AS3.0 で 3D プログラミングを1から勉強する (3) - 透視投影](http://tech.nitoyon.com/ja/blog/2008/06/18/as-3d-lessen3/) Javascriptに移植 distance…スクリーンと焦点の距離 mouse…マウスによる回転 ソースリストはTypescriptで組んでJavascriptに変換したものにコメントを付与して投稿しました。

  • 8091
  • 0

3Dプログラミング入門 フラットシェーディング

3Dプログラミング入門 フラットシェーディング てっく煮ブログ [AS3.0 で 3D プログラミングを1から勉強する (4) - 面に色を塗る](http://tech.nitoyon.com/ja/blog/2008/06/20/as-3d-lessen3/) Javascriptに移植 設定 Focal Distance…スクリーンと焦点の距離 Mouse…マウスによる回転 WireFrame…線描画 Fill…面塗り Z-Sort…Zソート Info…情報 sin=法線ベクトル角度 cos=光源角度 color=色 255(最大) 光源角度が小さくなる程、色が最大値になる。 ソースリストはTypescriptで組んでJavascriptに変換したものにコメントを付与して投稿しました。

  • 4427
  • 1

テクスチャマッピング入門 射影変換(ホモグラフィ)

以前、作成したテクスチャマッピング入門では、2つの三角形に分割した方法でした。 [テクスチャマッピング入門](http://jsdo.it/yaju3D/2uWT) 今回は、4つの点からホモグラフィ行列(平面射影変換行列)を使った方法になります。 shogo82148氏の[CSS3 Transform 3D Test](http://jsdo.it/shogo82148/vdlv)では、CSSで実現していましたが Canvasを使った方法はどうすれば出来るのか挑戦してみました。 アルゴリズムに関しては、下記サイトを参照してください。 [射影変換(ホモグラフィ)について理解してみる](http://yaju3d.hatenablog.jp/entry/2013/08/04/152524) ■パラメータ説明 degreea 回転角度 0度の時に回転させる形状を保存します。 0度以外で形状を変形しても元に戻ってしまいます。 本当は、形状を回転途中で変形しても保持して回転出来るようにしたかったんですが、 面倒くさそうだし、今回の目的とは違うので追求するのはやめました。 drawType 画像補間方法 ・Nearest(ニアレストネイバー) ・Bilinear(バイリニア補間) ソースリストはTypescriptで作成し、Javascriptに変換したものにコメントを追記して公開しました。 追記 2016/10/08 glMatrix-0.9.5.min.jsがgooglecodeのサイトから消えてしまって動作しなくなっていたため、修正 "http://glmatrix.googlecode.com/files/glMatrix-0.9.5.min.js"  ↓ "http://jsrun.it/assets/K/2/w/t/K2wty"

  • 12470
  • 3

forked: テクスチャマッピング入門 射影変換(ホモグラフィ)

透明画像(ボール)に対応しました。 技術的には、putImageDataで描画すると透明部分は黒色になってしまいます。 そこで隠しCanvasを用意し、そこに一旦putImageDataで描画させます。 その後、隠しCanvasから表示CanvasにdrawImageで描画することで透明部分が反映されるようになります。 追記 2016/10/08 glMatrix-0.9.5.min.jsがgooglecodeのサイトから消えてしまって動作しなくなっていたため、修正 "http://glmatrix.googlecode.com/files/glMatrix-0.9.5.min.js"  ↓ "http://jsrun.it/assets/K/2/w/t/K2wty" 追記 2017/07/16 画像が表示されなくなっていたため、修正 onloadイベントで画像表示するように修正しました。

  • 3967
  • 0

3D回転 射影変換(ホモグラフィ)

CSS3を利用して画像を3D回転させることができるジェネレーター [3D CSS Tester](http://thewebrocks.com/demos/3D-css-tester/) これをCSS3ではなく、あえてCanvasで動きだけ真似てみました。 3D回転する際は、一般的には三角形を分割するものですが、あえて射影変換で表示しています。 ■パラメータ説明 X X方向に回転 Y Y方向に回転 Z Z方向に回転 theta 回転角度 Loop 回転ループ drawStyle 画像補間方法 ・Nearest(ニアレストネイバー) ・Bilinear(バイリニア補間) Preserve3D 3D表現有無 Frontlogo(MDN) 前方ロゴ表示有無 Backlogo(HTML5) 後方ロゴ表示有無 ※画像補完方法は、今回の画像では差はつきにくい。 追記 2016/10/08 glMatrix-0.9.5.min.jsがgooglecodeのサイトから消えてしまって動作しなくなっていたため、修正 "http://glmatrix.googlecode.com/files/glMatrix-0.9.5.min.js"  ↓ "http://jsrun.it/assets/K/2/w/t/K2wty" 追記 2017/07/10 画像が表示されなくなっていたため、修正 onloadイベントで画像を表示するように修正 あとフレームを1000/60→1000/10までに落とした。 チラつくようになったので、チラつかないように隠しCanvasを1枚追加して 全て描画を終えてから表示するようにした。

  • 6613
  • 2

3D入門 3Dモデルを表示

下記サイトをJavaからHTML5として移植したものです。 3Dモデルをマウスを押しながら動かすと向きを変更できます。 CodeZineのJavaによる3DCGの基礎 [3Dモデルを表示するJavaアプレットの作成](http://codezine.jp/article/detail/38) Step4の内容となります。 ソースリストはTypescriptで作成し、変換されたJavascriptで投稿してます。

  • 2984
  • 0

3D入門 3Dモデルを表示(カリング)

前回の[3D入門 3Dモデル](http://jsdo.it/yaju3D/rIGK)にて、ある角度にすると一部が欠けたような表示がされていた。 原因を調べると、奥行きの小さい順に描画しているが、裏面の方が奥行きが大きいため その部分が黒色で表示されてしまい、一部が欠けたような表示となった。 今回、表面だけ表示するカリング処理を追加した。 カリングする判定方法として下記の2通りがあるが、今回は勉強のために1を採用した。 1. 三角形頂点の配置順序で判定(時計回り以外なら描画しない) 2. 法線ベクトルの値 【備考】 CodeZineのJavaによる3DCGの基礎 [3Dモデルを表示するJavaアプレットの作成](http://codezine.jp/article/detail/38) Step4の内容となります。 ソースリストはTypescriptで作成し、変換されたJavascriptで投稿してます。

  • 5115
  • 1

3D入門 複数モデルの表示

CodeZineのJavaによる3DCGの基礎 [3Dモデルを表示するJavaアプレットの作成](http://codezine.jp/article/detail/38) Step5の内容となります。 ソースリストはTypescriptで作成し、変換されたJavascriptで投稿してます。 元モデルデータは複数オブジェクトが1体になってしましたが、それを5つのモデルに分解しました。 各モデルの表示有無や軸の表示を追加しています。 トーラスのみ表示した際に他と違いサイズが大きくならないのが課題として残っています。 また、「モデルの大きさが原点を中心とする1辺が2の立方体に収まるようにする」とのコメントを 実際に見えるように立方体を表示してみました。

  • 2719
  • 2

3D入門 アニメーション表示

3D入門ということでライブラリーは使用していません。 3Dモデルのアニメーションはどうやっているのか? という疑問から他プログラムを参考にしながら作成しました。 結局、アニメーション用のモデルデータ(morphTargets)を順に表示しているだけでしたね。 3Dモデルは、Three.jsにあるサンプルデータを使用しています。 種類は下記の4つ horse 馬、flamingo フラミンゴ、stork コウノトリ、parrot オウム 【説明】 WireFrameは、ワイヤーフレームのオン/オフ 線は黒色 Fillは、面塗りのオン/オフ Colorfulは、面塗りのモデルデータの指定色か単色のオン/オフ Cullingは、カリングのオン/オフ Axisは、軸表示のオン/オフ Cubeは、軸立方体ののオン/オフ speedは、アニメーションのスピード ソースリストはTypescriptで作成し、変換されたJavascriptで投稿してます。

  • 2959
  • 1

Skills

Hot tags

Categories

HTML / CSS / JavaScript