「WebGPU」の基礎と3DCG開発のはじめかた

開発言語

技術解説

連載 [第1回] :

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

2025年4月25日(金)

大西武 (オオニシタケシ)

第1回の今回は、WebGPUと3DCGの基礎知識と、開発環境の準備、JavaScriptによるプログラミングの基本について解説します。

開発環境の用意

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"のセレクタを取得し、ダークグレーの背景色をセットします。

図7：サンプルコードをプログラミングしたindex.htmlファイル

【コラム】コラムを書くことについて

筆者が書籍の執筆を始めた当初は、ほとんどコラムを書いていませんでした。と言うか、1冊目は1つもコラムを書かなかったかもしれません。あまりにもコラムがないので、編集部から「コラムを入れてください」と催促されていたほどです。

そこからコラムを書くようになって何冊目かの読者レビューで「何気にコラムが役立った」と書かれていて「コラムも大事なんだ」と分かり、書籍を書く際は必ずコラムを入れるようになりました。…というコラムでした。

おわりに

今回は新連載の第1回として、Webブラウザ上で3DCGを描画するための3D機能「WebGPU」について、JavaScriptでプログラミングするために知っておきたい基礎知識の解説と、実際に簡単なプログラミングを行ってみました。

次回は「HTML5＋CSS＋JavaScript」でプロミングしていく上で、最低限知っておくべき文法について解説します。

著者

大西武 (オオニシタケシ)

この著者の記事一覧この著者の
記事一覧

1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp

連載バックナンバー

開発言語技術解説

第2回

WebGPUを使うための「HTML5＋CSS＋JavaScript」の文法を学ぼう

2025/5/20

第2回の今回は、WebGPUコンテンツを作る上で、最低限知っておくべきHTML5＋CSS＋JavaScriptの文法と、それを使った簡単なサンプルを解説します。

開発言語技術解説

第1回