開発ツールと
DOM API
2015
年度 情報可視化論
陰山 聡
事務連絡
来週（
6/9
）もこの部屋（第
1
演習室）で行います。
（この講義での）命名規則
•canvas.getContext()
で取り出した
WebGLRenderingContext
は常に
gl
という変数に保存。
•gl
はグローバル変数とする
•JavaScript
もシェーダも
camelCase
•シェーダの変数では、属性（
attribute
）には
a
のプリフィックス。
e.g., aVertexPosition
•シェーダの変数では、
varying
変数には
v
のプリフィックス。
e.g.,
vColor
•シェーダの変数では、
uniform
には
u
のプリフィックス。
e.g.,
uMVMatrix
JavaScript
コンソール
•それぞれのブラウザで「コンソール表示」
• Safari の場合：開発 → エラーコンソールを表示 •エラーメッセージが表示される
•JavaScript
の
console.log(”
文字列
”);
→ 文字列をプリント
•“printf
デバッグ
”
に使える
演習
Safari
のエラーコンソールを開き、
•
自作
HTML
ファイル中の
JavaScript
プログラムから
console.log()
関
数で文字列を書き出せ。
WebGL
用のデバッグツール
•
Chrome: Chrome
デベロッパーツール
•
Firefox: Firebug
（
Firefox
のエクステンション）
Safari Web Inspector
•
Sarafi
用
Web
開発ツール
Safari Web Inspector
使い方
•WebGL
アプリを含むページを表示
•メニュー： 開発 →
Web
インスペクタを表示
ツールバーに置くと便利：
•メニュー
:
表示 → ツールバーをカスタマイズ
...
→
Web
インスペク
タのアイコンをツールバーにドラッグ
Inspecting DOM
•
DOM tree
表示
•
DOM
のノードにカーソルを置くと、対応するエレメントが色で表示
サイズ表示
DOM
ノード情報
Timelines
•
ダウンロード時間の解析
Timelines
時計のアイコン（タイムライン）をクリック
•ダウンロード時間の解析
& JavaScript
のプロファイラ
•ネットワーク要求
•レイアウトとレンダリング
•JavaScript
とイベント
時間計測法：
•プロファイル（左下） → 記録ボタン
デバッガ
•
ブレークポイント（左下）
演習
•
先週の演習課題の続き。下の図（あるいは他でも
OK
）を
drawElements
と
TRIANLGE STRIP
を使って描け。
DOM
とは
Document Object Model (DOM)
•
HTML
や
XML
文書にアクセスするための
API
• プログラム（スクリプト言語）から（構造をもつ）文書にアクセス する • プログラム（スクリプト言語）から文書の構造、スタイル、内容を変 更するURL: http://www.w3.org/DOM/DOMTR
DOM
の例
サンプル：
document object.html
Web Inspector
（またはエディタ）でソースコードを見てみよう。
実行結果と見比べよう。
DOM node tree
階層構造を持った文書 ＝ ノードの木構造とみる
<html>
<head>
<title>sample</title>
</head>
<body>
<h1>Test</h1>
<p><a href="http://www.kobe-u.ac.jp/">Kobe Univ.</a>
is hilly.
</p>
</body>
</html>
DOM node tree
階層構造を持った文書 ＝ ノードの木構造とみる
ノードへの指定方法
•ツリーを
root
からたどる。例：
document.firstChild.childNodes[1].childNodes[1].childNodes[1].nodeValueで
“is hilly.”
を取得。
•要素名（タグ名）で指定する
getElementsByTagName()
メソッド
•要素の
id
で指定する
getElementById()
メソッド
DOM
を使うための準備
特になし
例：
サンプルコード
dom sample 00.html
Web Inspector
のソース表示（またはエディタ）でソースを見てみよう。
DOM
を使ったサンプルプログラム：
dom sample 00.html
<!DOCTYPE HTML> <html l a n g=” en ”> <head>
< t i t l e>DOM Sample 00</ t i t l e> <meta c h a r s e t=” u t f−8”> < s c r i p t t y p e=” t e x t / j a v a s c r i p t ”> window . o n l o a d = f u n c t i o n ( ) { v a r p a r a g r a p h s = document . getElementsByTagName ( ” p ” ) ; v a r p00 = p a r a g r a p h s [ 0 ] . t e x t C o n t e n t ; // 1 s t p a r a g r a p h v a r p01 = p a r a g r a p h s [ 1 ] . t e x t C o n t e n t ; // 2 nd p a r a g r a p h a l e r t ( p01 + p00 ) ; document . g e t E l e m e n t B y I d ( ” i d 0 0 0 ” ) . s t y l e . c o l o r = ” r e d ” ; document . g e t E l e m e n t B y I d ( ” i d 0 0 0 ” ) . t e x t C o n t e n t = ” H e r e i t i s ! ” ;
</ head> <body> <h2> Sample HTML </ h2> <p> H e l l o . T h i s i s t h e 1 s t p a r a g r a p h . </p> <p> Hi . I ’m 2 nd p a r a g r a p h . </p> <d i v i d=” i d 0 0 0 ”> You c a n d y n a m i c a l l y c h a n g e t h e c o n t e n t s . </ d i v> </ body> </ html>
DOM
を使ってシェーダソースコードをロードする
•これまでのサンプルプログラムでは、シェーダソースコードは
JavaScript
の文字列変数として直接書いていた。
•DOM API
を使えばもっと読みやすくできる
•HTML
の
script
タグとして書く：
• 頂点シェーダ：<script id="shader-vs" type="x-shader/x-vertex"> • フラグメントシェーダ：
<script id="shader-fs" type="x-shader/x-fragment">
•
この二つの
script type
をブラウザは知らないので無視する。
•
［注意］
HTML
のヘッダに書かずにファイルから読み出す方法もあ
webgl sample triangle 02 shader from DOM.html
< s c r i p t i d=” s h a d e r−vs ” type=”x−s h a d e r /x−v e r t e x ”> a t t r i b u t e v e c 3 a V e r t e x P o s i t i o n ; v o i d main ( ) { g l P o s i t i o n = v e c 4 ( a V e r t e x P o s i t i o n , 1 . 0 ) ; } </ s c r i p t> < s c r i p t i d=” s h a d e r−f s ” type=”x−s h a d e r /x−fragment ”> p r e c i s i o n mediump f l o a t ; v o i d main ( ) { g l F r a g C o l o r = v e c 4 ( 0 . 2 , 0 . 4 , 0 . 6 , 1 . 0 ) ; } </ s c r i p t>あとは
DOM
を使って読み込めばいい
f u n c t i o n loadShaderFromDOM ( i d ) { v a r s h a d e r S c r i p t = document . g e t E l e m e n t B y I d ( i d ) ; i f ( ! s h a d e r S c r i p t ) { r e t u r n n u l l ; } v a r s h a d e r S o u r c e = ” ” ; v a r c u r r e n t C h i l d = s h a d e r S c r i p t . f i r s t C h i l d ; w h i l e ( c u r r e n t C h i l d ) {i f ( c u r r e n t C h i l d . nodeType == 3 ) { // 3 <= TEXT NODE s h a d e r S o u r c e += c u r r e n t C h i l d . t e x t C o n t e n t ;
}
c u r r e n t C h i l d = c u r r e n t C h i l d . n e x t S i b l i n g ; }
v a r s h a d e r ; i f ( s h a d e r S c r i p t . t y p e == ” x−s h a d e r /x−fragment ” ) { s h a d e r = g l . c r e a t e S h a d e r ( g l . FRAGMENT SHADER) ; } e l s e i f ( s h a d e r S c r i p t . type == ”x−s h a d e r /x−v e r t e x ” ) { s h a d e r = g l . c r e a t e S h a d e r ( g l . VERTEX SHADER) ; } e l s e { r e t u r n n u l l ; } g l . s h a d e r S o u r c e ( s h a d e r , s h a d e r S o u r c e ) ; g l . c o m p i l e S h a d e r ( s h a d e r ) ; i f ( ! g l . g e t S h a d e r P a r a m e t e r ( s h a d e r , g l . COMPILE STATUS ) ) { a l e r t ( g l . g e t S h a d e r I n f o L o g ( s h a d e r ) ) ;
r e t u r n n u l l ; } r e t u r n s h a d e r ; } f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r = loadShaderFromDOM ( ” s h a d e r−vs ” ) ; v a r f r a g m e n t S h a d e r = loadShaderFromDOM ( ” s h a d e r−f s ” ) ;
•
