情報可視化論（H30年度Q1） Part 1: WebGL 1.0入門

Safari の設定:    (1) 環境設定 ⇒ 詳細 ⇒ メニューバーに開発を表示   (2)　開発 ⇒ WebGLを有効

テクスチャが表示されない時:    (1) 開発 ⇒ ローカルファイルの制限を無効にする   (2) 開発 ⇒ キャッシュを空にする   (3) 再読み込み

講義資料

• Part 1 担当: 陰山　⇒ 講義資料 WebGL 1.0入門 （417ページ、11.6 MB）
• Part 2 担当: 坂本　⇒ 坂本先生のページ（別途指示）参照

Part 1のサンプル

Part 1のソースコード

• 古いOpenGLでの四角形の描画 Hello_World.c
• WebGLでの三角形の描画 webgl_sample_triangle_00.html
• WebGLでの三角形の描画 webgl_sample_triangle_01.html
• WebGLでの三角形の描画 webgl_sample_triangle_02.html
• WebGLでの三角形の描画 webgl_sample_triangle_03.html
• WebGLでの三角形の描画 webgl_sample_triangle_04.html
• WebGLでの三角形の描画 webgl_sample_triangle_04b.html
• DOM を使用したサンプルプログラム document_object.html
• DOM を使用したサンプルプログラム dom_sample_00.html
• DOM を使用したサンプルプログラム webgl_sample_triangle_02_shader_from_DOM.html
• glMatrixのサンプルプログラム（ベクトル演算） glMatrix_exercise_00.html
• glMatrixのサンプルプログラム（ベクトル演算） glMatrix_exercise_01.html
• glMatrixのサンプルプログラム（ベクトル演算） glMatrix_exercise_02.html
• glMatrixのサンプルプログラム（ベクトル演算） glMatrix_exercise_03.html
• glMatrixのサンプルプログラム（行列演算） glMatrix_exercise_04.html
• glMatrixのサンプルプログラム（行列演算） glMatrix_exercise_05.html
• 座標変換のサンプルプログラム（変換なし） webgl_sample_spiral_00.html
• 座標変換のサンプルプログラム（モデル変換） webgl_sample_spiral_01.html
• 座標変換のサンプルプログラム（モデル変換＋射影変換） webgl_sample_spiral_02.html
• 座標変換のサンプルプログラム（変換行列の push と pop） webgl_sample_spiral_04.html
• テクスチャのサンプル kobe_u_logo_512x256.jpg
• テクスチャのサンプル kobe_u_logo_512x256.png
• テクスチャのサンプル yokohama_512x512.jpg
• テクスチャのサンプル uribos_256x256.jpg
• テクスチャのサンプル kobe_1024x512.jpg
• テクスチャマッピングのサンプルプログラム（基本） webgl_sample_texture_mapping_00.html
• テクスチャマッピングのサンプルプログラム（基本, FLIP_Yあり） webgl_sample_texture_mapping_00b.html
• テクスチャマッピングのサンプルプログラム（テクスチャデータの演算） webgl_sample_texture_mapping_00c.html
• テクスチャマッピングのサンプルプログラム（画像の一部をマッピング） webgl_sample_texture_mapping_00d.html
• テクスチャマッピングのサンプルプログラム（ピクセレーション） webgl_sample_texture_mapping_00e.html
• テクスチャマッピングのサンプルプログラム（ラップモード：REPEAT） webgl_sample_texture_mapping_01.html
• テクスチャマッピングのサンプルプログラム（ラップモード：MIRRORED_REPEAT） webgl_sample_texture_mapping_02.html
• アニメーションのサンプルプログラム（setInterval版） webgl_sample_spiral_05.html
• アニメーションのサンプルプログラム（requestAnimFrame版） webgl_sample_spiral_05b2.html
• アニメーションのサンプルプログラム webgl_sample_spiral_05b.html
• 照明のサンプルプログラム webgl_sample_lighting_00.html
• 照明のサンプルプログラム webgl_sample_lighting_01.html
• 照明のサンプルプログラム webgl_spiral_kobe.html
• Three.jsのサンプルプログラム three_js_sample_cube.html

• glMatrix.js
• webgl-utils.js
• three.min.js

以前の学生レポート作品

レポート第05回

レポート第04回

レポート第03回

レポート第02回

レポート第01回