Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGLを触ってみよう

K1mu21
April 21, 2024

 WebGLを触ってみよう

社内で行った勉強会のスライドです

K1mu21

April 21, 2024
Tweet

More Decks by K1mu21

Other Decks in Programming

Transcript

  1. 準備&実行! • ソースコード準備 ◦ wsl_ dockerを立ち上げる ◦ workspaceフォルダに移動してください ◦ git

    clone https://github.com/k1mu21/Web_GL_sample.git ◦ cd WEB_GL_SAMPLE ◦ docker compose up -d • URL ◦ http://localhost:8081/webgl_demo/index.html
  2. コード一部抜粋 webgl_demo/webgl-demo.js • これがGLSL ◦ Vertex shader: 頂点を描画するプ ログラム ◦

    Fragment shader: テクスチャから ピクセルの色を決定し,描画するた めのプログラム • まあほぼC言語です
  3. レンダラー • レンダラーとは、ブラウザ上でシーンを正しく 表示するためのツール • コードの内容 ◦ 新しい WebGL レンダラーを作成

    ◦ 画面上の空き領域全体にフィットするようにサ イズを設定 ◦ DOM 構造をページに追加 ◦ antialias 引数は図形の縁をより滑らかにレンダ リングするためのもの ◦ setClearColor() メソッドは、背景を既定値の黒 ではなく、明るい灰色に設定
  4. カメラ • レンダリングされたシーンはあるが、作 品を見るためにカメラを追加する必要が ある • z 位置は 50 単位で、カメラと

    z 軸上の シーンの中心との距離のこと ◦ カメラを後ろに移動して、シーン内 のオブジェクトを見ることができる ようにしている
  5. 図形や素材の追加 • 立方体を左に移動させる • フォンの素材で包まれたリングを追加 ◦ フォンは基本素材よりも光沢があるように見 える • 正十二面体を作成

    ◦ 引数 `DodecahedronGeometry()' はオブジェク トの大きさを定義 ◦ ランバート素材を使用 ▪ フォンより光沢が少ない