2019-07-01

仕事ですぐに使える TypeScriptを読んでいく

TypeScript

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考記事

著作権者：フューチャー株式会社（Future Corporation）様

future-architect.github.io

第1章前書き

今日はまず第1章から。

1.1 本ドキュメントの位置づけ

JavaScriptを経由せずに、最初からTypeScriptで学んでいくコンテンツとして作成されはじめました

素敵。 (...でもJavaScriptも知りたいのでそれはそれでやっていく所存。)

これまでの企業システムのフロントエンドは金太郎飴のようにおきまりの作業をするだけだったが、
近年ではユーザがプライベートで触れる体験はリッチなものになってきており、それに呼応するように開発技術も複雑化してきた。
使いやすいUIを持った情報に触れる機会が増えた今、業務のUIが残念ではストレスを与えてしまいよろしくない。
なので作るものをよくしなければならないことから、企業システムでもReact、Vue.js、Angularの採用するようになってきた。
初学者には環境構築からしてハードルが高いのでそこは本書では触れず、必要な部分にフォーカスした内容になっている。

1.2 TypeScript のウェブ開発における位置づけ

JavaScriptはECMAScript 2015以前と以降で大きな変化があった。
(昨日見たリンクでもECMAScript 2015がキーになっていた。)

ブラウザの組み込み言語である以上ネイティブと比べて自由度が低い。
なのでリッチな言語で一旦記述し、それをJavaScriptに置き換える手法が主流になってきた。
そのため以前のように直接JavaScriptを記述するような機会は減ってきている。
置き換え用の言語として主流なのはBabel と TypeScriptであり、Babelをベースに型情報を付与できるようにしたものがTypeScript。
TypeScript のコードから型情報を外すとほぼそのまま JavaScript になる。

1.3 TypeScript を選んで開発すべき理由

わざわざ置き換えなくてもJavaScriptでいいんじゃないかと考えるが、
JavaScript のライブラリをコンパイルして作る際に、型定義ファイルも同時生成できて、無駄がないという恩恵がでかい。
JavaScriptはその自由度故にトリッキーな書き方もできてしまうので大規模開発では負債になりやすい。
なのでTypeScriptを使う。

1.4 JavaScript のバージョン

細かいところは下を見ると良いらしい。

github.com

本ドキュメントは TypeScript ファーストで説明していきますが、JavaScript との差異があるところは適宜補足します

ありがたい。

1.5 本書の参考文献など

ドキュメントを書いていくにあたって参考にした文献や資料について

1.6 ライセンス

資料のライセンスについて ※クリエイティブ・コモンズ 4.0

1.7 TypeScript と互換性

下限はIE11。Chromeもそこに近いChrome 41.
ECMAScript Compatibility Tableを参照しながら対象範囲を検討していくと良い。
(ブラウザを使うサービスは大変そう。
TypeScriptでコンパイル時に出力するコードのバージョンを指定できるが、
ES3がデフォルトでES5、ES2015 から ES2018、ESNEXTと選択できる。
ES5を選択しておくと、新旧のバランスが良い。
ただし、出力ターゲットを古くすると、クラスがなかったり、古くなってしまったりするため、
差分を吸収できるようcore-jsを使用したり、compat-tableを参照して機能の確認をする必要がある。

今日はここまで。明日は2章をやっていきます。

2019-06-30

Babylon.jsのチュートリアルをやってみるその24

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Shadows

今日はShadowの残りの部分、ライトをやります。シャドウジェネレータで作った影は一つのライトしか紐付けできません。
複数の影を表現したい場合はシャドウジェネレータをもう一つ作る必要がある。

Point light

cubemaps renderingを使用しているためパフォーマンス面で注意が必要。
よくできたサンプルがあったのでこちらを参考にしました。
www.babylonjs-playground.com

Spot light

遠近投影法を使用して計算をする。
ポイントライトよりは軽いのかな。

Directional lights

ライトに設定しているオブジェクトから見た時に影がきちんと生成されるかは注意が必要。
こちらもわかりやすいサンプルがあったのでこちらを参考にしました。
www.babylonjs-playground.com

Babylon.jsの入手やCDNへのリンク

doc.babylonjs.com

今日はここまで
Babylom.jsのチュートリアルは全部終わりました。
何か作ってみるのは今後の課題にしつつ、明日からはtypescriptをやろうかなと考えてます。

2019-06-29

Babylon.jsのチュートリアルをやってみるその23

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Shadows

引き続きShadowをやります。
今日は影の効果について。
全部まとめられたよさげなサンプルがあったのでこちらを参考に。

playground.babylonjs.com

Poisson sampling

よくわからんので検索したらwikiあった。 en.wikipedia.org

似た言葉でPoisson-Disc Samplingというのがあるらしい。
www.jasondavies.com

小難しいことを言っているようでわかりにくかったが、結局のところ
柔らかい影表現ができるよってことらしい。
対象にしたい影に対して、Poisson samplingを有効にしてあげるだけでOK
計算が難しいからか普通に影を使うより遅くなる。

shadowGenerator.usePoissonSampling = true;

Exponential shadow map

デフォルトではONになっている。
ぱきっとした影を表示してくれる便利な子。
ただ、そこまでしっかりした影が必要ない場面ではOFFにしておくと軽くなる。

shadowGenerator.useExponentialShadowMap = true;

Exponential shadow mapをぼかす効果も用意されていて、ON/OFFはこんな感じで制御できる

shadowGenerator.useBlurExponentialShadowMap = true;

今日はここまで
次は残りのShadowsやっていきます。

2019-06-28

Babylon.jsのチュートリアルをやってみるその22

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Shadows

今日はShadowをやります。
少し量があるので何回かに分けていきます。

まずは生成するところから。
生成にはジェネレータを使用します。
パラメータには影のサイズと計算する光源です。

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

次にレンダリング対象を指定します。
下の例ではtorusが指定している対象になります。

shadowGenerator.getShadowMap().renderList.push(torus);

今回作ったのはこんな感じに。
f:id:torikizi:20190628232232g:plain

ちょっと少ないですが、今日はここまで
次はShadowsに対してパラメータを設定したりします。

2019-06-27

Babylon.jsのチュートリアルをやってみるその21

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Height_Map

今日はHeight Map です。なんだかイメージし切ってなかったのでunityのマニュアルを参照しました。

docs.unity3d.com

よさげな画像データが必要なようなので今回はサンプルを見ていきます。

www.babylonjs-playground.com

サンプルでは色々やってますが、Height Mapとして大事なのはこの部分。

// Ground
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene);

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false);
ground.material = groundMaterial;

まずは地面用のマテリアルを作って、地球っぽいjpgをテクスチャとして設定。
次にHeight Mapを作成します。
事前にHeight Map用の画像を用意してあげる必要があります。
Height Map generator　で検索したらいい感じのが出てきそうでしたので、そちらを使うとよいと思います。
画像系のツールに慣れていればそれを使うのもあり。 ( 同一の画像でもそれっぽく作ってくれるっぽい。

                       //名前,マップ画像のURL,メッシュ幅,メッシュの高さ,細分割数,最小メッシュ,最大メッシュ,シーン,更新可能,successCallback
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

たくさんパラメータがありますが、よりよい表現のために必要なパラメータとなります。
とくに細分割数は大きければ大きいほど負荷が高くなるものの、滑らかな表現が可能になります。

今回作ったのはこんな感じに。
f:id:torikizi:20190627234309g:plain

今日はここまで
次はShadowsをやります。

2019-06-26

Babylon.jsのチュートリアルをやってみるその20

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Environment

今日は背景色を変えていきます。
ここまでずっとグレーの背景でしたがようやく卒業できそうです。

背景色を変える

シーンオブジェクトに対してカラーを設定することで変更ができます。

// Sceneの背景色を変える
scene.clearColor = new BABYLON.Color4(0.4, 0.6, 0.1, 0.3);
// プリセットカラー
//scene.clearColor = BABYLON.Color3.Blue();
// アンビエントカラーの設定
  scene.ambientColor = new BABYLON.Color3(1.3, 0.3, 0.3);

Skybox

Skyboxを変更します。
一番簡単なのはデフォルトで用意されているのにテクスチャを貼り付けるだけでOKなやつ。
細かい設定をつけて自作もできるようだけど当面はこれでいいような気がする。

var envTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
scene.createDefaultSkybox(envTexture, true, 1000);

fog

fogは簡単に定義できるようになっているようです。

//  いくつかmodeも用意されている
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
//BABYLON.Scene.FOGMODE_NONE; 
//BABYLON.Scene.FOGMODE_EXP; 
//BABYLON.Scene.FOGMODE_EXP2;
//BABYLON.Scene.FOGMODE_LINEAR;

今日作ったものはこんな感じ。 f:id:torikizi:20190626234312g:plain

今日はここまで
次はHeight_Mapをやります。

2019-06-25

Babylon.jsのチュートリアルをやってみるその19

Babylon.js

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Particle

今日もパーティクルです。
昨日は基本的なパーティクルの変化を楽しみました。 GPUパーティクルのサンプルを見ていこうと思います。

見ていくサンプル

www.babylonjs-playground.com

GPU Particle

UnityでもGPUを使ったVFXGraphみたいなのが出てきました。
Babylon.jsでもGPUを使ったパーティクルを生成することができます。
しかしバージョン依存もあるので、サンプルのようにまず要件が満たされているか
確認してからパーティクルシステムを作成するほうがよいでしょう。

if (useGPUVersion && BABYLON.GPUParticleSystem.IsSupported)
{
    // GPUパーティクルシステムMAX1000000で作成
    particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
    particleSystem.activeParticleCount = 200000;
} 
else
{
    // 要件が満たせてなかったら普通のパーティクルシステムを使う
    particleSystem = new BABYLON.ParticleSystem("particles", 50000 , scene);
}

GPUパーティクルの停止はできません。
通常のパーティクルのようにstopを使ってもレンダリングはされたままになります。
そのため「particleSystem.dispose()」を使って破棄します。

GPUパーティクルではサポートされていない機能もあります。
　・エミットカウント
　・カスタムエフェクト
　・アニメーションシート
　・disposeOnStop
　・グラデーションごとの二重値
　・放出率勾配
　・生成時すぐのグラデーション

サンプルをいじって作ってみたパーティクルはこんな感じになりました。
たくさんの松屋きれいですね。
f:id:torikizi:20190625230423g:plain

今日はここまで
次はenvironmentをやります。