はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    WWDC25

『qiita.com』

  • 人気
  • 新着
  • すべて
  • 2019年のWebGLデバッグツール状況 - Qiita

    29 users

    qiita.com/naotaro0123

    これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある?」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日(github):2017/02/22 去年はまだChromeウェブストアにあった

    • テクノロジー
    • 2019/12/15 10:16
    • WebGL
    • debug
    • editor
    • 開発
    • あとで読む
    • js
    • chrome
    • ツール
    • qiita
    • モデル移動してもマウスドラッグの顔追従させる - Qiita

      3 users

      qiita.com/naotaro0123

      Live2D SDKサンプルのDemoプロジェクトで、Live2Dモデルの位置を中心以外に移動したらマウスドラッグの顔追従がずれてしまった。 <Live2Dモデルの位置が画面中心の場合はOK> <Live2Dモデルの位置が画面中心でない場合は顔の向きがずれる> SampleApp1プロジェクトには、モデルを移動しても顔追従できるけど行列などプログラムが複雑で困った...。 SampleApp1や難しいコードを使わず、簡単に直す方法を見つけたのでメモしておきます。 開発環境 ・Live2D Unity SDK 2.1.00_1のDemoプロジェクト ・Unity5.3.1 修正箇所 ポイントとなる部分は以下のマウス位置の部分のみです。

      • テクノロジー
      • 2016/04/19 20:05
      • Unity
      • Live2D WebGLとNW.jsでデスクトップマスコット - Qiita

        46 users

        qiita.com/naotaro0123

        Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

        • テクノロジー
        • 2016/03/06 00:54
        • Live2D
        • WebGL
        • javascript
        • あとで読む
        • app
        • WebGLとCanvas2Dを併用してみる - Qiita

          6 users

          qiita.com/naotaro0123

          WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ! これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")

          • テクノロジー
          • 2016/01/19 23:30
          • WebGL
          • WebGLでエロゲー風に部分モザイクしてみた - Qiita

            10 users

            qiita.com/naotaro0123

            ステンシルバッファ(マスク処理)にシェーダー適用して、部分的にモザイクさせてみました。 Live2D WebGL版と合わせるとこんな感じにできます♪ (エロゲー用の素材を持っていないので公式サンプルでテスト) ・Live2Dで部分モザイクデモ 上記デモページでは、モーション切替とモザイク箇所の切替ができます。 モザイクは一部の描画オブジェクトごとにかけられるように実装しています。 そのため、描画オブジェクトが動くとモザイク部分も動きますっ! WebGLの技術としては、以下のものを使いました。 1)モザイクシェーダー 2)ステンシルバッファ 3)フレームバッファ 4)Live2DのWebGL描画 開発環境 ・Live2D WebGL SDK 2.0.04_1 ・SDKのSimpleプロジェクトをカスタム モザイクシェーダー部分の実装 モザイクシェーダーは以下の記事を参考にさせていただきました

            • テクノロジー
            • 2015/09/13 19:54
            • WebGL
            • web制作
            • Javascript
            • 簡易Live2DViewer作ってみた - Qiita

              4 users

              qiita.com/naotaro0123

              Live2D SDK WebGL版で簡易Live2DViewer作ってみました。 Live2Dモデルのファイルをサーバーにアップロードさせたくなかったので、全てHTML5の機能で実装してます。 ファイル選択とファイルのドラッグ&ドロップに対応しています (テクスチャは複数選択してドラッグ&ドロップして下さい) ・簡易Live2DViewer フォルダ構成 Live2D SDKのSimpleプロジェクトを元にカスタムしています。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> </meta> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxim

              • テクノロジー
              • 2015/08/06 13:19
              • UnityのImageEffectで遊んでみる - Qiita

                10 users

                qiita.com/naotaro0123

                Unity5で解禁になった元Pro版機能の1つ、ImageEffectをちょっと触ってみました。 ImageEffectとはいわゆるポスト(事後)プロセス(処理)の事らしいです。 Live2Dの場合だと原画をそのまま表示するので、アンビエントオクルージョンなどライティング系は関係なさげですがエフェクトがかかって楽しいです。 Unityだとわずか3手順で簡単に遊べます! Image Effectのやり方 1)EffectsのパッケージをImportします ※ Unity4.6とUnity5を併用してる場合は、Standard Packageが上手く入ってない場合があるので再インストールし直すか、DLしてくるといいです 2)Importing Packageのウィンドウで全てImportします 3)Scriptsの中から好きなスクリプトを選んで、HierarchyのMain Cameraにドラ

                • テクノロジー
                • 2015/04/06 11:11
                • unity
                • Live2Dで胸揺れ物理演算してみる - Qiita

                  28 users

                  qiita.com/naotaro0123

                  Live2Dには、モデリングソフトとモーション付けソフトの他にLive2D ViewerというFlash製の動作確認ツールがあります。 Viewerを使うと髪揺れなどの物理演算の値を簡単に編集できます。 Live2Dのワークフロー Unityに組み込む時のワークフローとしてはこんな感じです モーション付けソフトでも作れますが、Unityなどでインタラクティブな胸揺れする場合は物理演算を使うと便利かと思います。 ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもOKです。 サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。 準備するもの Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ&ドロップします (moc出力したフォルダでもjsonファイルをドラッグ&ドロップしてもOKです) ※ 書き出しはM

                  • テクノロジー
                  • 2015/03/19 12:55
                  • Live2D
                  • Unity
                  • 開発
                  • プログラミング
                  • 3DCG
                  • アプリ
                  • development
                  • Unity上でLive2Dモデルのパラメータ制御 - Qiita

                    3 users

                    qiita.com/naotaro0123

                    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? using UnityEngine; using System; using System.Collections; using live2d; [ExecuteInEditMode] public class SimpleModel : MonoBehaviour { public TextAsset mocFile; public Texture2D[] textureFiles; private Live2DModelUnity live2DModel; private Matrix4x4 live2DCanvasPos; //

                    • テクノロジー
                    • 2015/03/13 13:41
                    • Live2Dで複数Canvasにモデル表示 - Qiita

                      4 users

                      qiita.com/naotaro0123

                      Live2DのWebGL版で複数のCanvas表示が可能になっています。 SDKサンプルコードのSimpleプロジェクトをクラス拡張すると、複数表示可能です。 複数CanvasにLive2Dモデルを表示する 1)まずはLive2Dモデルファイルをassets配下に置きます 2)HTML側のCanvasを複数にします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> </meta> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0"> </meta> </head> <body onload="Simple()"> <

                      • テクノロジー
                      • 2015/02/13 13:38
                      • Live2D
                      • Canvas
                      • tmlib.jsで3Dモデル表示 - Qiita

                        4 users

                        qiita.com/naotaro0123

                        tmlib.js Advent Calendar 2014の13日目の記事です。 (three.jsでつまづいて投稿が遅れてすいません) tmlib.js x three.js tmlibはthree.jsとの連携もサポートしてます(three.jsのver.57以前までなら動作OKでした) 最新のver.69までサポートしてくれるとモーフアニメーションも使えるので、今後のサポートに期待してますっ! という訳で今回はtmlib.jsで3Dモデル表示してみました〜♪ (WSADキー or 矢印キーで視点操作できます) 1)まずはblenderでモデル作成 tmlibはひよこが公式キャラなのでblenderでなんとなく作ってみる。 Web用に3Dモデル作るなら以下の点でblenderがオススメです! 1. 無料でMacもWindowsもソフトが動く 2. three.js用にインポート/エクス

                        • テクノロジー
                        • 2014/12/25 00:16
                        • tmlib.js
                        • javascript
                        • Live2DのWebGL版は今週公開 - Qiita

                          7 users

                          qiita.com/naotaro0123

                          WebGL Advent Calendar 2014の15日目の記事になります。 Live2Dとは? 1枚の2Dイラストからぬるぬる動かす技術です。 2Dと3Dの間にある技術のため、2.5Dとも言われています。 WebGL-β版は今週公開予定です 遅くなってすいませんが、今週中には公開されます。 以下の内容は、公開に先行した内容となっていますのでご注意下さい。 Live2DのソフトとSDKは無料で使う事ができます。 実際に触ってみたい方は以下のページにアクセスしてみて下さい。 WebGL対応でiPhoneのブラウザでもLive2Dアプリ! WebGLでLive2Dモデルを表示 ####1)まずはLive2DのSDKをダウンロード Live2Dのサイトにいき、CubismSDK(WebGL)をダウンロードしてきます。 ####2)Webサーバを準備する 今回は簡単にWebサーバが起動できる無

                          • テクノロジー
                          • 2014/12/16 03:32
                          • Live2D
                          • WebGL

                          このページはまだ
                          ブックマークされていません

                          このページを最初にブックマークしてみませんか?

                          『qiita.com』の新着エントリーを見る

                          キーボードショートカット一覧

                          j次のブックマーク

                          k前のブックマーク

                          lあとで読む

                          eコメント一覧を開く

                          oページを開く

                          はてなブックマーク

                          • 総合
                          • 一般
                          • 世の中
                          • 政治と経済
                          • 暮らし
                          • 学び
                          • テクノロジー
                          • エンタメ
                          • アニメとゲーム
                          • おもしろ
                          • アプリ・拡張機能
                          • 開発ブログ
                          • ヘルプ
                          • お問い合わせ
                          • ガイドライン
                          • 利用規約
                          • プライバシーポリシー
                          • 利用者情報の外部送信について
                          • ガイドライン
                          • 利用規約
                          • プライバシーポリシー
                          • 利用者情報の外部送信について

                          公式Twitter

                          • 公式アカウント
                          • ホットエントリー

                          はてなのサービス

                          • はてなブログ
                          • はてなブログPro
                          • 人力検索はてな
                          • はてなブログ タグ
                          • はてなニュース
                          • ソレドコ
                          • App Storeからダウンロード
                          • Google Playで手に入れよう
                          Copyright © 2005-2025 Hatena. All Rights Reserved.
                          設定を変更しましたx