試験公開中

HTML5＋WebGLでつくる3Dウェブサイト [iOS8/Android対応]　Vixar Cartoonによるアニメーションサイト制作術
ギフトで購入
このエントリーをはてなブックマークに追加

HTML5＋WebGLでつくる3Dウェブサイト [iOS8/Android対応]　Vixar Cartoonによるアニメーションサイト制作術

マイナビ出版

3,300円 (3,000円+税)

HTML5＋WebGLの技術を活用し、iOS8やAndroidスマートフォンにも対応した3Dウェブサイト制作について解説。Metasequoiaでモデルをつくり、Vixar Cartoon(ビクサーカートゥーン)でFlashライクに簡単に制作していきます。

関連サイト

本書の関連ページが用意されています。

内容紹介

3Dアニメーションするウェブサイトを作ろう！

本書では、HTML5＋WebGLの技術を活用したiOS8やAndroidスマートフォン上のウェブブラウザでも動作する3Dウェブサイト制作について解説。

Metasequoiaでモデルを作り、3Dウェブオーサリングツール「Vixar Cartoon(ビクサーカートゥーン)」で簡単に制作できます。Vixar Cartoonが優れている点はプログラミング無しでも十分完成されたWebデザインやWebコンテンツが作れ、さらにスクリプトで高度な事もできる点です。

アニメ漫画風のサイト、アンケートアニメや3D間違い探しのようなクイズコンテンツも提供できるようになります。

本書で作れる作品例は http://wrux.vixar.jp/ で確認することができます。本書とVixar Cartoonで、自分なりのオリジナル作品を作ってみよう！

書誌情報

  • 著者: 大西 武
  • 発行日:
  • 最終更新日: 2015-05-01
  • バージョン: 1.1.0
  • ページ数: 304ページ(PDF版換算)
  • 対応フォーマット: PDF
  • 出版社: マイナビ出版

対象読者

著者について

大西 武

1975年香川県生まれ。大阪大学経済学部中退。主に3Dのツールやゲームを開発するクリエイター。
マイクロソフト社主催「Windows Vistaソフトウェアコンテスト」で大賞など、コンテストに20回以上入賞している。自作のオリジナル作品がテレビや雑誌などに多数採用されている。著書に『3D IQ間違い探し』（主婦の友社）、『3D-CGツール練習帳』（工学社）、『HTML5+JavaScript+CSS+WebGLによる3D Webコンテンツ制作』（秀和システム）など10冊以上の著書がある。
Webサイト　http://vixar.jp/　http://webgl-3d.com/

目次

Chapter 1 3Dの基礎とツール活用入門

  • 1.1 3Dの基礎知識
  • 1.2 Vixar Cartoonでの開発優位性
  • 1.3 Metasequoia 4で簡単モデリング
  • 1.4 Vixar TransMotionで簡単ポージング
  • 1.5 Paint.NETでテクスチャを作成
  • 1.6 Vixar Cartoonを使ってクイズを作る
  • Column 背景デザイナー

Chapter 2 PsychoVision3DライブラリとWebGL

  • 2.1 PsychoVision3Dライブラリを使うためのテンプレート
  • 2.2 canvasに背景色を描画
  • 2.3 canvasに三角形を描画するシェーダー
  • 2.4 canvasに三角形を描画
  • 2.5 canvasにテクスチャ付き三角形をシェーダーで描画
  • 2.6 canvasにテクスチャ付き三角形を描画
  • Column 書出しファイル

Chapter 3 ベクトルと行列

  • 3.1 ベクトル
  • 3.2 単位行列、ベクトルと行列・行列同士の掛け算
  • 3.3 プロジェクション行列・ビュー行列
  • 3.4 平行移動行列
  • 3.5 XYZ回転行列
  • 3.6 スケール行列
  • Column Vixar Cartoonの名前の由来

Chapter 4 ボーンアニメーション付き3Dモデル

  • 4.1 シェーダーでボーンアニメーション
  • 4.2 ボーンアニメーションするキャラクター
  • 4.3 3Dモデルをクリックしたか判定
  • Column HTML5とWebAPI

Chapter 5 2Dモデルとスマホ・PCの場合分け

  • 5.1 2D画像やモデルのModel2Dクラス
  • 5.2 スマホとPCで場合分け
  • Column Vixar Cartoon Web Playerはフルスクリーンじゃなくても

Chapter 6 Vixar Cartoon Web Playerの作成

  • 6.1 タイムラインの読み込み
  • 6.2 3Dモデルの表示
  • 6.3 吹き出しクリックで次へ進む
  • 6.4 フレームが進んだ時カメラを移動させる
  • 6.5 エルミート曲線の実装
  • 6.6 BoneModel3Dの場合ポーズ・アニメーション
  • 6.7 吹き出しがチェックボックスだった場合
  • 6.8 背景画像・手前画像の並び順
  • 6.9 1行目スクリプトの実行
  • 6.10 フェードイン・フェードアウト
  • 6.11 アンドゥ機能
  • 6.12 Audio機能
  • 6.13 JavaScriptコードをVixarCartoon.jsへ
  • Column Vixar Cartoonで名前分け

Chapter 7 BoneModel3D向けボーン付きのモデル作成

  • 7.1 Metasequoia 4でボーン作成
  • 7.2 TransMotionでウェイトマップ作成
  • Column ウィンドウサイズが変更された場合

Chapter 8 シンプルなホームページの作成

  • 8.1 「このサイトについて」とオリジナル曲
  • 8.2 3D間違い探し
  • 8.3 スクリプトで自動車の色を変化

Chapter 9 アンケートアニメの作成

  • 9.1 アンケートアニメの作成
  • 9.2 PHPファイルにGETされた値を受け取ってメール送信

おわりに

Home 〉 書籍一覧 〉 HTML5＋WebGLでつくる3Dウェブサイト [iOS8/Android対応]　Vixar Cartoonによるアニメーションサイト制作術 ▲ ページトップへ戻る