WebGPUではじめる3DCGアニメーション入門第1回

開発環境の用意

3DCGプログラミングを行うには2025年4月現在でWebブラウザ「Google Chrome」が必須で、コードエディタは「Visual Studio Code」(以下、VS Code)をお勧めします。恐らく皆さんはどちらもインストールされているでしょうが、まだインストールしていない場合は、次のように2つともインストールしてください。

Google Chromeのインストール

Google Chromeの公式サイトで「Chromeをダウンロード」からダウンロードしてインストールしてください(図5)。インストール手順は、画面の指示に従っていけば完了するので、ここでは説明を割愛します。

図5：「Google Chrome」の公式サイト

VS Codeのインストール

VS Codeの公式サイトにアクセスして、「Download for Windows(またはmacOS、またはLinux)」からダウンロードしてインストールしてください(図6)。こちらも、インストール手順は画面の指示に従っていけば完了するので、説明は割愛します。また、ここではコードエディタとしてVS Codeをお勧めしましたが、必ずしもVS CodeでなくてもOKです。

図6：「VS Code」の公式サイト

はじめてのJavaScriptプログラミング

開発環境が準備できたら、手始めにシンプルなWebブラウザアプリを作ってみましょう。VS Codeなどで「HTML5＋CSS＋JavaScript」のコードを「index.html」ファイルの中に全てコーディングします。

なお、ここではコーディングしませんが、WebGPUはHTML5の<canvas>タグが描画領域で、JavaScriptでプログラミングします。次のサンプルコードをindex.htmlファイルにコーディングしたら、Google Chromeで開いてみてください(図7)。

・index.htmlのサンプルコード

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
    <title>HTML5＋CSS＋JavaScriptサンプル</title>
	<style>
html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding : 0;
}
div {
	width: 100%;
	height: 50%;
}
	</style>
</head>
<body>

	<div id="upper"></div>
	<div id="lower"></div>

	<script>
let upper = document.querySelector("#upper");
upper.style = "background-color: #666";
let lower = document.querySelector("#lower");
lower.style = "background-color: #333";
	</script>

</body>
</html>

【サンプルコードの解説】
<!doctype html>タグでこのindex.htmlがHTMLのバージョン5であることを宣言します。
<html>～</html>タグの間に<head>タグと<body>タグをコーディングします。
<head>～</head>タグの中で<style>～</style>タグにCSS(装飾を宣言するスタイルシート)を記述します。<div>タグを画面幅いっぱい、高さ半分にセットします。
<body>～</body>タグに本文の<div>タグを2つ配置します。
<script>～</script>タグでJavaScriptをコーディングします。document.querySelector("#upper")でIDが"#upper"のセレクタを取得し、ライトグレーの背景色にセットします。IDが"#lower"のセレクタを取得し、ダークグレーの背景色をセットします。