Web Design Articles

  • 1807

激しい動きのダンスのモーションをKinetixで作るとどうなるのか？

https://www.kinetix.tech/近年、メタバースが流行ってますよね！日本が生き残るためには、メタバース関連に力を投資しろ！なんて言われていますが確かに、日本のコンテンツ力は強いですよね。 そんなコンテンツ力を後押しするためにも、我々エンジニアは技術で裏ささえしなくてはいけないわけです！ ということで、ダンスのモーションを作成したい！！メタバース上で動かしまくりたい！！ VRでフルトラッキングすればいいわけですが、手は綺麗にトラッキングできますが足となると、VRゴーグルとトラッカーではなかなか対処できないのが現状かと思います。 商用のまともなフルトラッキング機材は100万円以上はするようですし、、、 でも、でも、チキチキバンバンみたいな、モーションデータ作りたい！！ www.youtube.com オリジナルなやつがね！！ 画像認識という選択肢 そこで、登場するのが動画からモーションデータを作るという選択肢です。オープンソースの技術としては、Googleなんかが力を入れていて OpenPoze BlazePose などなどオープンソースで利用できるライブラリなどがあったりします。 こんな感じで、動画中から人を思われる映像を推定し、そこに骨と思われるものを入れて姿勢推定を行います。かなり研究が進んでいて、Webカメラで撮影した動画をリアルタイムで分析し推定可能なレベルまで来ているそうです。 ただ、ほとんどの場合、Python言語でAIプログラミングしないといけないなどちょっとハードル高めです。デモのモデルががそのまま使える場合もありますが 超簡単に使えるKinetixというWebサービスを紹介 Kinetixとは話題の3Dモーション作成サービスで。なんと、動画をアップロードするだけで、この姿勢推定からのモーション作成までやってくれる画期的なサービスです。 来たるメタバース時代に向けて心強い味方となってくれそうな予感がありますね。サイトトップにはMetaverseと文字があります 早速やってみましょう アカウント作成 https://www.kinetix.tech/ サイトトップから右上の(Login)ログインから進みます。 メールアドレスとパスワード設定して進みます. プロジェクトの作成 ダッシュボードにログインするとこのような画面になっています。サンプルの動画もいくつかあるようですが、ここでは真ん中の「create animation」から新しくアニメーションの作っていきます。ここで目的のダンス動画をアップロードします。ビデオのURLからも行けるようなので、Youtubeの動画のURLを貼り付けるなどする方法でもいいのかもしれません アップロード中 結構時間がかかります。ちなみにアップロードしたのは３分(40MB)ほどの動画です。アップが完了するとトリム(必要な箇所だけ切り取る)作業に移ります。全編行きたいところですが、、１分以内にしなさいとのエラーメッセージが出ました。１分以内に切り取ります。 OKならばNEXT STEPで進みます 名前をつけます アニメーションの名前をつけたらConfirmで進みます １０分待つ Confirmを押すとダッシュボードに戻り、進捗率25%であと10分でできるよと。１０分待ってみます モーション完成！！ [...]

  • 1813

そろそろSandyBridgeおじさん卒業。VRがしたくて新しい自作PCを組んだ話

こんにちは、のすけです。=== 去年書いて眠ってたので出しときます。 この記事で作成したPCはもう１年稼働中。いい感じです。 ただ最近はVRはしてませんorz === PCの温度管理は大切！なんて記事を8年前?に書いて、今でも結構みられているのですが。その時のPCが2010年に制作したCore i7 2600K(SandyBridge)を積んだhollywis.hatenablog.comこれです。 今話題？のVRが無性に気になってしまい。こちらの11年前のPCに思い切って GTX 1660 Superを買って強引にくっ付けて、さらに【国内正規品】HTC VIVE Cosmos EliteHTCAmazonVIVEのCOSMOS Eliteなんてのを買って、動くか試しました。 で、結果。 なんと、、、 動いたw 2010年のPCで動くんかいぃ！！すげえな2600K。全然カクツキも感じない。 [...]

  • 1814

StripeのSubscriptionのhookについて

こんにちは、のすけです。クレジットカード決済プラットフォームStripeの新しいバージョン。と言っても数年前のアップデートですがによって、機能がいろいろ拡充されてますよね。ただ機能が多過ぎてドキュメントを読んで仕様を理解するのも一苦労。 その中で、便利なサブスクの機能なのですがかなり柔軟に料金設定ができるのですが、既存のシステムにもサブスクの管理がある場合 重複して管理しなくてはならなくなります。例えば他の決済プラットフォームも併用している場合には、仕方なく、自社システムにも サブスク管理の仕組みを作って、Stripeのサブスクといい感じに連動させる必要があるかと思います。 それで、サブスクの入会、退会はどうやって検出したらいいの？という問題にぶち当たるのですが。そこはStripe、イベントをhookする仕組みが用意されています。着信する Webhook を使用してリアルタイムで更新を取得する | Stripe のドキュメントただ、いっぱいイベントあるんですよね。。サブスクの登録、キャンセルはどのhookを使えば、、、 'customer.subscription.created'を使ってみる サブスクが登録された時、このイベントが走ります ですのでこちらをhookするのが正攻法かと思います。 ただ、自社のサブスク管理システムとの連携の際に、 契約されたサブスクがどのサブスクかを識別するためには、あらかじめ登録時に metadataに識別のためのプランidなどを仕込んで置く必要があります。 ただ、Stripeの管理画面の商品設定画面ではproduct(商品)やprice(価格)にはメタデータをあらかじめ設定できるのですが サブスク契約(sub_xxxx)は契約時に作成されるので 事前にメタデータを仕込むことができないっぽです。 なので、やり方としては [...]

技術ポートフォリオ

なんとなく自分の技術ポートフォリオをまとめてみました重点科目は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まで理解し、その後複合させて独自のシステムに昇華させるフェーズ 勉強: 破レベルの先輩コードに触れ学ぶ！ TODO: 　　ティラノスクリプトのソースコードを読む 　　Pixi.jsのソースコードを読む 　　Three.jsのソースコードを読む 　　普段使ってるOSSで不満に思ったことを書き留めておく 離：独自のフレームワークを生み出すレベル 【テーマ】 融通無碍の境地。基本を全て押さえ、組み合わせもでき かつムリなくシンプルに纏める、納める事ができる技術 ２・６・２ 『自己満曲線』に入ってないか定期的にチェックする。 ・リリース →体感としてLv70くらいを目指していた。 ・フォーカス [...]

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", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.disableLighting = true; skybox.material [...]

babylon.js ステップ14 パーティクル表現

babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう！ パーティクルの作り方 パーティクルシステム 解説 パーティクルのテクスチャマスク パーティクルエミッタ ローカル空間 場所と広がり ライフタイム サイズ 色 ブレンドモード rate 放出方向 重力 回転 速度 速度リミット 抗力係数 整列 ノイズテクスチャ まとめ パーティクルの作り方 パーティクルシステム パーティクルシステムを用いたパーティクル表現の例はこちらです。コード中に説明を追加していますので順番にみていきましょう コード例は以下です。 var createScene = function () { var scene = new BABYLON.Scene(engine); // ライトやカメラなど環境セッティング var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-10, 7, -10), [...]

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); treesManagerの部分は名前なのでユニークな名前を設定します。「Assets/Palm-arecaceae.png」の木の画像を最大2000個作ることができる容量を確保します。800の部分は画像のサイズに対応するセルサイズです。最後に追加するsceneを設定します。 // プレイヤー用のsprite managerの作成 var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager","Assets/Player.png", 2, {width: 64, height: 64}, 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); // 箱の方向 var direction = forward.subtract(origin); direction = BABYLON.Vector3.Normalize(direction); vecToLocalは箱からの方向を取得する関数です。Normalizeは正規化(長さを1に)する作業です。そして、取得した単位ベクトルから任意の長さの光線を作成します。 var ray = new BABYLON.Ray(origin, [...]

Unity EventSystemとは

Unity EventSystemとは 入力、レイキャスト、イベント送信を処理する機能 EventSystem シーン内にEventSystemは1つだけ含めること 他のモジュールと連動して動作する 状態を保持する 処理内容 EventSystemが開始されると、同じGameObjectに接続されている BaseInputModuleを検索し、それらを内部リストに追加します。更新時に、接続されている各モジュールはUpdateModules呼び出しを受け取り、モジュールは内部状態を変更できます。各モジュールが更新された後、アクティブなモジュールでプロセス呼び出しが実行されます。ここで、カスタムモジュール処理を実行できます。 利用方法 using UnityEngine.EventSystems;とライブラリを呼び出す //現在のイベントシステムを取得 EventSystem es = EventSystem.current;//現在のインプットモジュールを取得 EventSystem es = EventSystem.current; BaseInputModule bim = ev.currentInputModule;// 選択中のGameObject EventSystem es = EventSystem.current; GameObject obj = es.currentSelectedGameObject;//初期状態にで選択したいオブジェクトを設定 EventSystem es = EventSystem.current; es.firstSelectedGameObject = gameObject; Standalone Input Module このモジュールはコントローラー/マウスの入力が思い通りに動作するように設計されています。入力に反応して、ボタンの押下、ドラッグ、それに類似の動作のイベントが送信されます。このモジュールはマウス/入力デバイスが移動するとき、ポインターイベントをコンポーネントに送信します。そして、Graphics Raycaster と Physics Raycaster [...]

How to encourage creativity

When is creative too creative? ALorem ipsum dolor sit amet, consectetur adipiscing elit. In et scelerisque sem. Nunc molestie neque augue, at gravida mi blandit eget. Aenean eu augue id lacus eleifend interdum. Cras sit amet metus sit amet velit lacinia ullamcorper. Nam [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.