入門
WebGLの基礎
8
基本的な考え方は変わりませんが、一部書式が変更されています。また古いライブラリバージョンは、現在最新のブラウザで再生できない機能が含まれています。(2016年9月現在)

ピュアなWebGLのコードでは、座標を元にGLSLによりその形や色を決めることができます。「WebGLの基礎」の最終回では、three.jsを用いたJavaScriptとGLSLの連携について解説します。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

three.jsのさまざまなオブジェクト(カメラ、光源、メッシュ)の位置、角度、拡大率などを指定するコードを紹介します。これまでのthree.jsのコードと同じく、直感的に書くことができます。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

3Dモデル作成アプリケーションのネイティブファイルをJSON形式にエクスポートし、そのファイルをTHREE.jsに読み込み描画する方法を紹介します。COLLADA形式読み込みとの仕組みの違いにも注目してみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

前回はTHREE.jsによる立方体の描画を紹介しました。今回は外部の3Dモデル作成アプリケーションで作られたモデルをTHREE.js経由で読み込み、描画してみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

今回はWebGLによる描画を、直感的に扱うためのJavaScriptライブラリTHREE.jsを紹介します。THREE.jsはWebGLにおけるjQueryのような存在であり、もしWebGLに興味があるのであれば知っておくといいでしょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

ピュアなWebGLを用い、最終的に三角形を描画します。なお、この記事の目的としては、WebGLのコードを学ぶためではなく、WebGLのコードの冗長さ、流れを理解するためのものです。難しいとは思いますが軽く読み進めてみてください。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

WebGLは、通常のWeb制作にはなかった新しい概念の理解が必要です。実際にコードを書く前に、コードの理由、つまりどのように動いているのか、なぜそう書くのかを知っておきましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

HTML5関連の新技術は、これまでになかった豊かなグラフィック表現を可能にします。はじめにフロントエンド技術で扱えるようになってきたグラフィック関連技術を概観してみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア