WebGLを使ってあまてくのロゴで遊ぼう！

WebGLを使ってあまてくのロゴで遊ぼう！株式会社ベガコーポレーション

にっしー株式会社ベガコーポレーション　新卒 2年目家具ECサイト(LOWYA)のページ作成・改善ゲーム開発、XR系の開発唐戸市場のうなぎ寿司

うっちー (ベガちゃん) 株式会社ベガコーポレーション　新卒 2年目エンジニア採用(新卒・中途) 旅、散歩、うまいもの探しお肉

はなすこと、はなさないことはなすこと • フロントエンド (HTML, CSS, JS) • WebGL技術を広く浅く •
弊社の応用事例はなさないこと • バックエンド

アジェンダ • Web技術(HTML, CSS, JS)について • WebGLとは • あまてくロゴ実装を表示しよう！ •
ロゴの色を変えよう！ • ロゴにアニメーションをさせよう！ • ロゴを現実世界に召喚しよう！ • WebGLをもっと深めたいなら • 弊社の応用事例

Web技術の基礎

HTML Webページの構造や内容を定義するマークアップ言語＜html＞　＜head＞タイトル・メタデータ　</head> 　<body> ページのコンテンツ　</body> </html>
基本的な構成構成要素の例 https://www.htmq.com/html5/ タイトル <title>タイトル</title> 見出し <h1>大見出し</h1> <h2>中見出し</h2> テキスト <p>タイトル</p> リンク <link href=”https://…”>遷移</link> 画像 <img src=”./sample.png”></img>

HTML　　　-実践- 1. document/introductionフォルダにindex.htmlを作成 2. html:5のサジェストを展開、コード編集 3. Go Liveでブラウザに反映 <!DOCTYPE html>
<html lang="en"> <head> <meta charset ="UTF-8" > <meta http-equiv ="X-UA-Compatible" content ="IE=edge" > <meta name="viewport" content ="width=device-width, initial-scale=1.0" > <title>HTMLの練習</title> </head> <body> <h1>これはHTMLの練習です </h1> <h2>h2タイトル </h2> <p>テキスト </p> <img src="amatech.jpg" alt="あまてくのロゴ " width="100" height="100"> <iframe src="https://www.youtube.com/embed/iDdnZmN-2v8" width="560" height="315"></iframe> </body> </html>

CSS Webページのデザインやレイアウトを定義するためのスタイルシート言語 h1 { 　font-size: 24px; 　font-weight: Bold; } img
{ 　widht: 100px; 　height: 150px; } 書き方フォント font-size, font-weight, font-family, … サイズ weight, height, min-width, … 背景 background-color, background-image, テキストカラー color スタイル例 https://www.htmq.com/css3/

CSS　　　-実践- 1. document/introductionフォルダにstyle.cssを作成 2. htmlにstyle.cssの読み込みを追記 3. コード編集 body{ font-family: 'Segoe
UI', Tahoma, Geneva, Verdana, sans-serif; } h1{ font-size: 24px; color: red; } h2{ font-size: 18px; } img{ display: block; } .movie1{ width: 200px; height: auto; } .movie2{ width: 300px; height: auto; } <iframe src="https://www.youtube.com/embed/iDdnZmN-2v8" width="560" height="315" class="movie1" ></iframe> <iframe src="https://www.youtube.com/embed/1cea1jat-NE" width="560" height="315" class="movie2" ></iframe> html css クラス指定の場合は、 ”.movie” のようにドットをつける！ css

JavaScript Webページの動的な機能を追加するためのプログラミング言語 <p id=”text”>テキスト</p> <button onclick=”changeColor()”>カラー変更</button> html changeColor(){ 　const text
= document.getElementById(“text”); 　text.style.color = “red”; } js

JavaScript　　　-実践- 1. document/introductionフォルダにindex.jsを作成 2. htmlにindex.jsの読み込みを追記 3. コード編集

WebGLとはブラウザ上で3Dグラフィックスを描画するためのJavaScript API じゃ、早速やってみよう！

model viewerで3Dキューブを表示する <body>  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.mi
n.js"></script> <model-viewer src="cube.glb" camera-controls touch-action="pan-y" class="model-viewer" > </model-viewer> </body>

model viewerであまてくのロゴを表示する <body>  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.mi
n.js"></script> <model-viewer src="amatech.glb" camera-controls touch-action="pan-y" class="model-viewer" > </model-viewer> </body>

あまてくのロゴの色を変更する <model-viewer src="amatech.glb" camera-controls touch-action="pan-y" class="model-viewer" > </model-viewer>  <select id="color"> <option value="red">red</option> <option value="blue">blue</option> </select> <script> // model viewerの要素を取ってくる const modelViewer = document.querySelector('model-viewer'); // カラーセレクターの要素を取ってくる const colorSelector = document.getElementById('color'); // カラーセレクターの値が変更されたとき colorSelector.addEventListener('input',(event)=>{ // model viewerで定義された3Dモデルのマテリアルを取得 let material = modelViewer.model.materials[0]; // マテリアルのカラーを、カラーセレクターの値に変更 material.pbrMetallicRoughness.setBaseColorFactor(event.target.value) }) </script> 実はhtmlファイル内に jsも書けちゃいます

あまてくのロゴにアニメーションをさせる <body>  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.mi n.js"></script>
<model-viewer src="amatech.glb" autoplay camera-controls touch-action="pan-y" class="model-viewer" > </model-viewer> </body>

あまてくのロゴにアニメーションをさせる 3Dモデルの作成やアニメーションの作成は Blenderで行っています参考：【2023】Blender(ブレンダー)でのアニメーション制作の流れ＆操作方法を解説

あまてくのロゴをAR表示する <model-viewer src="amatech-ar.glb" ar camera-controls touch-action ="pan-y" class="model-viewer" > </model-viewer
> 1. コード編集 2. ターミナルから簡易サーバーを立てる 3. スマホの検索窓にURLを打ち込む npm install ターミナル npx http-server ① ②

弊社の活用事例

もっとWebGLに触れたい方へ • まずはmodel viewer公式ページを見ながら色々試してみる • babylon.jsでさらに可能性を広げる ◦ Babylon js勉強会 vol.1
~Babylon js 日本コミュニティ立ち上げ記念！～ ◦ Babylon.js 勉強会 vol.2 ~Babylon.js v6 リリース記念~ ◦ Babylon.js 公式入門チュートリアルざっくり和訳

WebGLを使ってあまてくのロゴで遊ぼう！

WebGLを使ってあまてくのロゴで遊ぼう！

nissy

Other Decks in Programming

Featured

Transcript