“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”
MICHAEL KLARKE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.
RECENT ARTCLES
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.
技術ポートフォリオ
なんとなく自分の技術ポートフォリオをまとめてみました重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。 Lv15までは守 Lv100までは破 Lv100以上は離の領域 総合力: Lv50 (システム開発歴10年ほど) Javascript：Lv35 Nuxt.js : Lv10 Vue.js：Lv15 Firebase総合力：Lv5 Firebase FireStore：Lv15 Firebase Authentication：Lv10 Firebase Storage：Lv5 Firebase Functions：Lv10 Pixi.js,Three.js,babylon.js：Lv5~Lv10 システム開発のチーム連携力 Lv5 サーバー構築 Lv20 システム設計 Lv35 守：ツールを十分に理解するフェーズ 【テーマ】通常の利用方法の範囲で忠実に実行する。2年くらいの利用実績。課題 ・Nuxt.js、Vue.jsのレベルを15まであげる ・Firebaseの総合力をレベルを15まで 破：基本理解が一定レベルを超え、ツールの垣根超えて縦横無尽に利用できるフェーズ 【テーマ】 ツールではなく根源的な法則の理解(基本の積み重ね) ・ほぼ入り口にはいっている。様々なライブラリを取り込み組み合わせて利用できるようになって来た 現在レベル50 →外部のJSライブラリをどんどん取り入れ、Lv15まで理解し、その後複合させて独自のシステムに昇華させるフェーズ 勉強: [...]
nuxt.js のSSRデバッグ方法 by Jetbrain
こちらの記事が参考になりました。 ありがとうございます。k-sasaki.net asyncDataのデバッグを諦めてconsole.logで頑張っていたところこれで、デバッグできるようになりました！こんな感じで、ブレークポイントを入れたい場所に「debugger;」と書けばchromeのDevツールでブレークされます。Jetbrain最高です。
babylon.js ステップ15 環境設定
ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう！！ 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます アンビエントカラーの変更 次のプロパティを使うとアンビエントカラーを設定できます scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3); clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。主に、メッシュとの組み合わせて使用され、メッシュマテリアルのStandardMaterial.ambientColor によって最終的なアンビエントカラーが決まるようです。 スカイボックス 美しい完璧な空を作りたいと思いませんか？それを簡単に実現したのがスカイボックスです。このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。作り方は次の通りまずは箱を作ります。 var skybox = BABYLON.Mesh.CreateBox("skyBox", [...]
babylon.js ステップ14 パーティクル表現
babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう！ パーティクルの作り方 パーティクルシステム 解説 パーティクルのテクスチャマスク パーティクルエミッタ ローカル空間 場所と広がり ライフタイム サイズ 色 ブレンドモード rate 放出方向 重力 回転 速度 速度リミット 抗力係数 整列 ノイズテクスチャ まとめ パーティクルの作り方 パーティクルシステム パーティクルシステムを用いたパーティクル表現の例はこちらです。コード中に説明を追加していますので順番にみていきましょう コード例は以下です。 var createScene = function () { var [...]
babylon.js ステップ13 スプライト(Sprites)
babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! ２つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から利用可能) スプライトの設定 スプライトアニメーション方法 スプライトマップ タイル表現に便利なスプライトマップタイル まとめ ２つのスプライト管理方法 スプライトは大量の2D画像を利用するため、パフォーマンス管理が重要です。babylon.jsでは２つの管理方法があります A uniform spritesheet (均一化されたスプライト)・・・SpriteManagerを利用 A packed spritesheet(パッケージされたスプライト)・・・SpritePackedManagerを利用 これらは、１枚のスプライトであってもManagerを使う必要があります。 スプライトマネージャー // 木の画像用のsprite managerの作成 var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene); [...]
babylon.js ステップ12 レイキャスト(Raycasts)
babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう！ レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelper まとめ レイキャストとは光線による衝突判定 前回の11回ではマウスの位置と、壁の衝突判定を行いましたが。レイキャストは、光線(レーザー・)による衝突または、交差チェックを行う機能です。FPSゲームの弾丸の軌道なんかはレイキャストで行います。 マウスクリックで、選択されたメッシュ情報を取得する方法(scene.pick)を使用しました。一方レイキャストでは似たようなメソッド、 scene.pickWithRay() を使っていきます 光線と最初に接したメッシュの取得 光線と最初に接したメッシュの取得をやっていきます。 真ん中に、光線を出力する赤い箱があります（箱はマウスで動かせる）そして、その光線と接する可能性のある、青い箱が２つと緑の箱があります。 なお、奥の青い箱は、光線が届きません。光線が当てられた箱は上に伸びていきます。 デモはこちらhttps://www.babylonjs-playground.com/#KNE0O#84 まず、最初に光線の出力もとである赤い箱には、衝突検出をoffにする設定を入れます。赤い箱自体が衝突判定されてしまっては困りますので。 box.isPickable = false; 次に、箱から出る光線のベクトルを定義します。その際,箱の位置()を差し引いて箱の原点origin(光線が始まる場所)からの方向を取得します。 // 赤い箱との方向ベクトル var forward = new BABYLON.Vector3(0,0,1); forward = vecToLocal(forward, box); [...]
