Bezier Clipping (with Utah teapot)

(ゲームエンジンenchant.jsで開発したもの) 2016/2/29 by T. Nishita

他のenchant.jsの自作例

ゲームエンジンenchant.jsを利用した Bezier Clippingの応用

Bezier Clipping法は曲面のレイトレーシングを高精度で計算する方法としてＳＩＧＧＲＡＰＨ1980で発表したものである。多項式で表現されるの曲線との交差判定を含む種々の方法に利用できる方法で、ニュートン法よりすぐれた数値解法である。

Bezier Clipping法の例(このページ）　　

SolutionBezFunc　②曲線と線
kyokuchiPolygonalFunc　③多項式の解、極値抽出
SolutionBezFunc　③ 遮蔽物との隙間
SolutionBezFunc　包含箱
minmum_dist Bezier Surface/plane ④平面と曲面上の最短・最長の点抽出( old)
minmum_dist Bezier Surface/plane ④平面と曲面上の最短・最長の点抽出
minmum_dist Bezier curve from point/line ⑤点/線分と曲線上の最短点抽出
SolutionBezFunc 3次ベジエ曲線で表現される多項式の解
CurveLineInt 3次ベジエ曲線と線分の交差
CurvesLinesInt 　複数のベジエ曲線（tpotの輪郭曲線）と線分の交差
3DcurvesLineInt 　複数の3次ベジエ曲線の投影曲線と線分の交差
SolutionPolygonalFunc 高次ベジエ曲線で表現される多項式の解
3DcurvesLineInt 　複数の3次ベジエ曲線の投影曲線（Tpot)）と線分の交差+交点の平面投影
curvesLineCut 　複数の3次ベジエ曲線の投影曲線(tpot)と線分の交点抽出し曲線カット+交点の低面へ投影
BezierSurface/plane intersection 3次ベジエ曲面の等パラメータ曲線と平面との交点計算
Bezier Surface/plane Distance 　曲線群と平面との距離
distance to Bezier Surface from plane 投影した曲面体（曲線）上の直線との最短（最長）距離の点
distance to Bezier Function Newton法で曲線の最小値を算出

以下「play」ボタンを押して実行してください。「stop」ボタンを押してから次のプログラムを実行してください(複数実行を避ける）。

曲線・曲面と平面・線分の最短距離(極値）の算出

高次ベジエ曲線と線分との交差および距離（最短点） C50z		高次多項式関数の解および極値算出 cXz60
遮蔽物と曲面との隙間 sXm4		Bezier曲面と平面との交点および距離 eJdU

曲線との交点計算

3次ベジエ曲線と線分の交差 w3y8		3次ベジエ曲線で表現される多項式の解 (3次の多項式関数を制御点4点を指定) MlX2
高次ベジエ曲線で表現される多項式の解 (3次及び高次の関数の解、黒ベルト部をクリックすると次数ＵＰ） QOy8		複数ベジエ曲線で表現されたtpotの輪郭と線分の交差 uxX9

ベジエ曲面と線分との交点計算

複数の3次ベジエ曲線の投影曲線と線分の交差 AXHH		3次ベジエ曲面の等パラメータ曲線と平面との交点計算 ifSH
複数の3次ベジエ曲線の投影曲線と線分の交点抽出し曲線カット +交点の低面へ投影 (ﾏｳｽで視点変更、マウスで切断線分を指定、交点は赤点で表示,左灰色部をクリックするとカット機能） y8-> qUiH		X9
w3y8		MIX2

平面と曲面上の最短・最長の点抽出(1) UdHz		平面と曲面上の最短・最長の点抽出(2) EMcI
平面と曲面上の最短・最長の点抽出(2) (制御点をマウスで移動し変形、マウスで視点変更、 planeボタンで平面を移動・回転、increaseボタンで等パラメタ曲線を増加；これはタッチパネルでは動作不可) inEt		qUiH
平面と曲面上の最短・最長の点抽出(暫定版１） eJdU		平面と曲面上の最短・最長の点抽出(暫定版２） EMcI

?		?

線画表現のUtah Teapot

tpotBezierNis　輪郭のBezier曲線描画(クリック毎に曲線描画）
tpotBezier　制御多角形表示
TpotIsoPramametric　等パラメータ曲線描画(ワイヤーフレーム） ○

Teapotの画像

6kakuPotImages 6角形でpot画像を敷き詰める
circlePotImg 円盤上にpot画像を配置(中心に拡大図）
BluiTpotimages Pot画像集
tpotcollection ティーポットの収集写真の部分拡大

粒子表現のUtah Teapot

BoncingBallTpot 　粒子が壁に反射　（３次元） ○
BouncingTpot 粒子が壁に反射(2次元） ○
flockingTpot粒子が鳥（虫）のように群れで動く ○
tpotParticle 粒子間引力で移動　 ○
tpotBezierDot 粒子描画（単にクリックする毎輪郭を部分的に描画）
PingPongTpot 球がPingPongのようにで移動　
doodlepot 粒子がマウスで移動　 ○
tpotballs.htm 粒子でポット表現(ﾏｳｽで移動）　本ページ

講義用の基本的な例

（１）Bresenhamの直線描画 (Bresen.Java)

　　http://jsdo.it/nobu.nakata/Bresenham

（２）シルピンスキーのギャスケット (gasket.Java)

　　http://jsdo.it/takayama/Gasket

（３）一価関数曲面の表示 (hidfunc.Java)

　　http://jsdo.it/nobu.nakata/HidFunc

http://jsdo.it/nistomo/5k0F　HidFunc

（４）凸多面体のワイヤーフレーム表示 (wire.Java)

　　http://jsdo.it/takayama/Wire

(5) http://jsdo.it/nistomo/BezierPlot　Bezier曲線の入力

ゲーム的な例

http://jsdo.it/takayama/h4rj

http://jsdo.it/takayama/N8l3

http://jsdo.it/npaka/NineleapEx

http://jsdo.it/nobu.nakata/KumoNoIto

tpot collection;

http://nishitalab.org/user/nis/ourworks/tpot/tpot.htm

enchant.jsでの  開発サイトhttp://jsdo.it/；西田用

enchant.jsの開発メモ　：http://enchantjs.com/ja/

参考； tpotCG集、 Javaでのtpot表示（最新のJavaでは動作しない）