並び順

ブックマーク数

期間指定

  • から
  • まで

41 - 80 件 / 289件

新着順 人気順

WebGLの検索結果41 - 80 件 / 289件

  • めくるめく粗挽きWebブラウザエンジンの世界 - Qiita

    EDIT: DOjS はp5.jsサブセットを実行できる MuJS ベースのJavaScript環境だ。DOM-less。 https://github.com/SuperIlu/DOjS EDIT: SerenityOSを忘れてた: http://serenityos.org/happy/1st/ 自作OSに自前ブラウザというかなりヤバいプロジェクト。ブラウザ部分は最近Qtなクロスプラットフォーム版が出来た https://awesomekling.github.io/Ladybird-a-new-cross-platform-browser-project/ 。 EDIT: Geckoとか ServoとかMosaic系列は省いてしまった。まぁみんな知ってるよね多分。そもそも粗挽きというよりはかなりmature productだし。。 2020 Web Milestones という記事で

      めくるめく粗挽きWebブラウザエンジンの世界 - Qiita
    • Bevy + WebGPU

      Bevy + WebGPU Posted on May 17, 2023 by Carter Anderson ( @cart @cart_cart cartdev ) I'm excited to announce that Bevy's main branch now supports WebGPU rendering on the web! This means you can play with it now by checking out our repo provided you have a supported web browser (WebGPU is still in the process of rolling out). You can also explore our live WebGPU examples. The upcoming Bevy 0.11 rel

        Bevy + WebGPU
      • React × Unityでできること もっとも使われているゲームエンジンをReactで使うには

        「Mix Leap Study」はヤフーの独自技術や業界の最先端テクノロジーに触れる勉強会。第59回は「React とその仲間たち」と題して、より実践的にReactを使うための仲間たちにも注目。ヤフーの青山広大氏が、ReactとUnityを連携する方法を、実際に動くデモを見ながら紹介しました。 UnityはWebGL対応 青山広大氏:ヤフーの青山です。『React × Unity』ということで発表させてもらえればと思います。 言語としては、ReactだったりTypeScriptだったり、Javaだったり、フロント、バックエンド問わず仕事しています。趣味はショッピングと自作キーボードで、ものづくり全般が好きです。休日とかは猫と一緒にアニメ見たりしてゆっくりとしています。 なんでUnityなのか、というところから説明していけたらと思います。Unityって「ゲーム作れるすごいやつだよね」だと思う

          React × Unityでできること もっとも使われているゲームエンジンをReactで使うには 
        • これはすごい!形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans

          フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。 Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。 Leon Sans Leon Sans -GitHub Leon Sansとは Leon Sansのデモ Leon Sansの使い方 Leon Sansとは Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。 生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。 サイトでは

            これはすごい!形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans
          • 【ブクマ推奨】React、VueからWebAssemblyまで!LT動画12本公開🎉 — TechFeed Conference「後夜祭」(2)

            「TechFeed Conference 2022後夜祭」第二弾!今回はReact、Vue、Angular、Web3D、WebAssembly、フロントエンド設計に関するLT動画を12本公開です! こんにちは、TechFeed CEOの白石です。 2022年5月14日に開催された「エンジニアの祭典」TechFeed Conference 2022は、「日本を代表するテックエキスパート50名による大LT大会」という前代未聞の取り組みとして、大盛況のうちに幕を閉じました。 ですが、TechFeed Conferenceはまだまだ終わりません! 本イベントは、エキスパートの貴重な知見を一人でも多くの方々に届けるべく、企画当初から 「全セッション、永久保存版」 を掲げて、アーカイブ化にも全力を尽くすと誓っておりました。 本日より6/10までの間、「TechFeed Conference 2022後

              【ブクマ推奨】React、VueからWebAssemblyまで!LT動画12本公開🎉 — TechFeed Conference「後夜祭」(2)
            • WebGPUとRustでネコチャンを点描した話

              はじめに 昨年12月にこんなツイートを見かけました。 かわいいですね。幸いにして論文と実装が公開されていたので、自分でもやってみようと思って、その結果を書いたのが前回の記事です。 読んでいただければわかるとおり、前回の記事の中ではGPUを使わずにアルゴリズムやデータ構造を工夫して近似的に計算しています。結果の画像についてはそんなに悪くないと思っていますが、限界もありました。パーティクルの数も少ないし、一部の画像ではうまく行きませんでした。 やっぱり、もっとちゃんとネコチャンを点描してみたいですよね。 なので、今回の記事ではGPUを使ってアルゴリズムを再現し、よりヴィヴィッドなネコチャンの点描を作成しようと思います。GPUを使って計算するために、WebGPUのRust実装であるwgpuを使用します。ネコチャンの画像を点描にしたい人と、WebGPUに入門してcompute shaderで何か計

                WebGPUとRustでネコチャンを点描した話
              • Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く

                Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。KOBA789氏は、シミュレータとCADの制作について発表しました。全2回。後半は、回路CADの制作方法について。前半はこちら。 自作CADに求めること KOBA789氏(以下、KOBA789):シミュレータができたので、次はCADを作っていきます。書いた回路図がそのまま動くCADがなかなかないので、私はCADに書いた回路図がそのまま動くことを一番求めていました。 大抵の場合、回路を書くCADとシミュレータが別々になっています。まじめな回路を組むのであればそのほうが楽なのですが、だいたいタイミングチャートのかたちで表示されるんですよね。 プローブをいろいろなところにくっつけて、そのプローブの値が時間経過でどうなったかというタイミングチャートがバーッと出るわけです。たく

                  Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く
                • WebGLと比較して学ぶWebGPU

                  Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 みなさん、こんにちは。@emadurandalと申します。今回は「WebGLと比較して学ぶWebGPU」と題して発表させていただきます。 私自身の紹介についてですが、私は2015年ごろにWebGLにはじめて触れて、それ以来3Dライブラリ開発をずっとやっています。Rhodoniteというライブラリを開発して、長らくWeb3Dの情報を発信しています。現在は株式会社HIKKYで、WebGLベースのメタ

                    WebGLと比較して学ぶWebGPU
                  • REACT-VFX - WebGL effects for React! #REACTVFX

                    REACT-VFX is a React component library which allows you to add WebGL powered effects to you React aaplication.

                      REACT-VFX - WebGL effects for React! #REACTVFX
                    • 2022年のライブゲームはWebGL@Unityで動いているよ - Mirrativ Tech Blog

                      みなさまこんにちは、よこて @n0mimonoです。段々とすごしやすい気温になってきましたがいかがお過ごしでしょうか。今日の話は ミラティブとライブゲーム ライブゲームはUnityを利用したWebGLベースで動いているよ バックエンドアーキテクチャの紹介 行ってみます! ミラティブ × ライブゲーム ミラティブは、スマホで簡単にゲーム配信ができるサービス『Mirrativ』を展開していますが、今年(2022年)からゲームとライブ配信を融合させた『ライブゲーミング』に特に注力してます(次は4月次点のプレスリリース)。 prtimes.jp 「ライブゲーミング」とは、配信中のゲームに視聴者が介入できる、ゲームとライブ配信が融合した次世代のゲーム体験となります。 視聴者は従来のライブ配信のようにコメントやギフトアイテムを贈るだけでなく、実際に配信者といっしょにゲームをプレイする「参加型ライブゲー

                        2022年のライブゲームはWebGL@Unityで動いているよ - Mirrativ Tech Blog
                      • TensorFlow.jsがChromeでWebWorker上でもWebGL backendで動く - すぎゃーんメモ

                        tensorflow.js は処理の重さ的に worker で動かしたいのだがまだ WebWorker で動かすと cpu backend に fallback してしまうので、この issue ずっとみてる https://t.co/KYGEQSFwq5— 無糖派層 (@mizchi) July 30, 2019 僕も以前にWebWorker上でTensorFlow.jsを使おうとして WebGL backendで動かないことに気付いて諦めていたのだった。 memo.sugyan.com …と思っていたのだけど、どうも先月くらいの @tensorflow/tfjs@1.2.2 あたりから ChromeではOffscreenCanvasというのを使ってWebWorker上でもWebGL backendで動くようになったようだ。 試してみたところでは 動くのはChromeのみで、Safari

                          TensorFlow.jsがChromeでWebWorker上でもWebGL backendで動く - すぎゃーんメモ
                        • 音の出るCPUを作っている途中

                          2021/03/20の「Kernel/VM探検隊online part2」で発表したものです。 https://connpass.com/event/201059/ https://www.youtube.com/watch?v=brrm328XItM&t=2621s

                            音の出るCPUを作っている途中
                          • TechCrunch | Startup and Technology News

                            The Justice Department has arrested and charged a Russian national for his alleged role in multiple LockBit ransomware attacks against victims in the U.S. and around the world. According to a criminal

                              TechCrunch | Startup and Technology News
                            • フロントエンドのトレンドは変化したか? アンケート結果から分析する2022年のウェブ制作 - ICS MEDIA

                              ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。 あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ?(2022年版) 国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。 5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。 3年前の2019年にアンケートをしたとき(参照記事)は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。

                                フロントエンドのトレンドは変化したか? アンケート結果から分析する2022年のウェブ制作 - ICS MEDIA
                              • Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧

                                Vis.gl – Uber Vis Team Uber社がオープンソースとして公開している可視化ツールでは「deck.gl」が有名ですが、他にもUber社の持つ巨大なデータセットを分析するために作成されたさまざまなデータ可視化ツールがオープンソースとして公開されています。「Vis.gl」はそれらUber社が作成し公開している可視化ツールをまとめた呼び名で、現在では11点ほどのデータ可視化に有用なツールが公開されており今なお増え続けています。 ここでは、「Vis.gl」スイートとして公開されているツールを一通りざっと紹介したいと思います。(一部、Vis.gl以外でUber社が公開しているツールも含んでいます) ■データビジュアライゼーションフレームワーク ・deck.gl WebGLを用いて大量のデータを可視化することに長けたフレームワーク。 レイヤーベースのコンポーネントとして作られていて

                                  Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧
                                • 【Three.js】スクロールでぐにゃぐにゃする画像を実装する

                                  はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen (0.5x を押すと見やすいです) ▼ 2021/7/26 追記 CodePen( 慣性スクロールありバージョン) 海外のデザインアワードを受賞するようなリッチなサイトで良く見る演出(個人的主観)です。WebGLの汎用的な表現な気がしますが、その実装方法を解説する記事は(少なくとも日本語では)ほとんど見つけられなかったので、自分の勉強も兼ねて書くことにしました。ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです。実装はThree.jsを用いています。 注意事項 想定する読者 Three.jsを触ってみたが、サイト制作に活かす術が分からない、同様の表現を良く見るけどどうやって実装しているか分からない、といった方を対象としています。従って本記事では、Three.jsの基本的

                                    【Three.js】スクロールでぐにゃぐにゃする画像を実装する
                                  • マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」(ORT Web)をオープンソースで公開

                                    マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」(ORT Web)をオープンソースで公開 マイクロソフトは、WebAssemblyとWebGLで機械学習の推論エンジンを実装した「ONNX Runtime Web」(ORT Web)をオープンソースで公開しました。 INTRODUCING: #ONNXRuntime Web (ORT Web), a new feature in ONNX Runtime to enable JavaScript developers to run and deploy machine learning models in browsers https://t.co/Ey3tsNlkEe pic.twitter.com/9uGyK8Pra0 — onnxruntime (@onnxruntime)

                                      マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」(ORT Web)をオープンソースで公開
                                    • 3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程

                                      はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約1年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイトの制作方針として、はるni様が制作を得意とする3Dボクセルを中心に据える方針で企画が固まり、技術的にチャレンジングな仕事となりました。その際、私自身多くの方々の技術記事等を参考にさせていただいたため、自分も微力ながら制作の過程で得られた知見を共有できればと思い、記事に残すことにしました。 (ただし、WebGLやThree.jsの扱いに関して未熟な点も多分にあるため、各章でより良いアイデアをお持ちの方はコメント等で温かくご提案いただけますと幸いです。) 技術検証 陰影を事前にベイクするか、リア

                                        3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程
                                      • WebAssemblyとWebGPUを用い、Webブラウザ上でStable Diffusion Turbo全体を高速実行可能な推論エンジン「ONNX Runtime Web 1.17」マイクロソフトから登場

                                        WebAssemblyとWebGPUを用い、Webブラウザ上でStable Diffusion Turbo全体を高速実行可能な推論エンジン「ONNX Runtime Web 1.17」マイクロソフトから登場 ONNX Runtime WebがWebGPUに対応。Webブラウザ上でさらに高速な推論処理が可能になった。Stable Diffusion Turbo全体をWebブラウザ上で高速に実行可能で、RTX4090を用いた場合1秒以内で結果が出力される。 ONNX Runtime Webの基になっている「ONNX Runtime」はクロスプラットフォーム対応の推論エンジンです。TensorFlow、PyTorch、SciKit Learnなどをはじめとするさまざまな機械学習のモデルに対応し、これらで生成されたモデルによる推論処理をプラットフォームに依存せず実行するランタイムの役割を果たします

                                          WebAssemblyとWebGPUを用い、Webブラウザ上でStable Diffusion Turbo全体を高速実行可能な推論エンジン「ONNX Runtime Web 1.17」マイクロソフトから登場
                                        • oimo.io

                                          Play with an interactive fluffy ball. Simulated with GPGPU.

                                            oimo.io
                                          • Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい! - WebGL 総本山

                                            top 2022 年 03 月 Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい! 将来的には VR モードにも対応を予定 今回ご紹介するのは、ウェブを中心に据えたメタバースの形を模索するプロジェクト、Sougen のウェブサイトです。 こちらのプロジェクト、日本に拠点がある Utsubo Co., Ltd(@utsuboco)が手掛けているものらしく、かなり本格的で多くの構想を持ったプロジェクトみたいです。 現在公開されているホワイトペーパーを見ているだけでもそのあたりいろいろとうかがい知ることができるのですが、現状すでに WebGL を利用した三次元空間のバーチャルスペースが用意されており、アクセスしているユーザーをリアルタイムに処理しているようです。 リンク: Sougen 説明セクションと 3D コン

                                              Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい! - WebGL 総本山
                                            • モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog

                                              こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。 ライブゲームが動作する仕組み 例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向

                                                モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog
                                              • BlinkとWebKitの違い(大雑把) - saneyuki_s log

                                                「〜がChromiumベースに!」なことが起こるたびに「Chromium/BlinkはWebKitを源流とするエンジンでしかじか」みたいな話が出てきて、「実質WebKitだから同じだね」という反応が出てくるのが恒例行事っぽくなってるけど、結構モニョモニョする。 先祖が同じなら子孫も同じ、ってそんな単純な話じゃない。 fork前、BlinkがChromium WebKitというかWebKit Chromium portと呼ばれていた頃でさえ、Chromium portとApple portの2つが同じエンジンと呼べる箇所って、layoutとかdomとかstyleとかブラウザエンジンのコア部分だけで、他はV8とJSCとか、SkiaとCore Graphicsとか、そもそもプロセス分けてる方法も違うし、呉越同舟というか寄り合い所帯感だった。composition周りだってApple portはC

                                                  BlinkとWebKitの違い(大雑把) - saneyuki_s log
                                                • みさとと。——島根県美郷町魅力再発見プロジェクト

                                                  正しさよりも、“好き”。「変わるものは変わる。想う人たちが、それぞれのやり方で伝えていく」美郷町の郷土芸能・神楽

                                                    みさとと。——島根県美郷町魅力再発見プロジェクト
                                                  • 高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」

                                                    LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲームパッドの入力処理、アップデート/レンダリングループ、デバッグツールなど、ほとんどのゲームに必要なものをすべて備えているとの事。 Steamのようなプラットフォームで配布するために、electronを使ってWindowsの実行ファイルとしてビルドすることも可能だそうです。ライセンスはMIT。 LittleJS

                                                      高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
                                                    • Blenderで作った3DモデルをThree.jsで表示するとき詰まったこと

                                                      はじめに 先日、Blenderで作った3DモデルをThree.jsで動かすようなWebサイトを初めてしっかりめに作ったので、その過程でぶつかった問題について書き残しておきます。主にBlender側の話です。 実際に作ったサイトはこちらです。 自分のサイトを宣伝するわけではないですが、実際に見てもらった方が記事の内容がより把握しやすいかもしれないので載せておきます。 この記事はタイトルの通り、Blenderで作成した3DモデルをThree.jsで扱う際にハマったポイントについてまとめたものであり、上記のサイトの作り方を解説する記事ではありませんのでご了承ください。 主要技術のバージョン Blender: 3.0.0 Three.js: r132 react-three-fiber: 7.0.17 Blenderで親子関係を作ると、座標変換により意図しない見た目になることがある Blender

                                                        Blenderで作った3DモデルをThree.jsで表示するとき詰まったこと
                                                      • おまたせ!p5.js 1.0 公開!

                                                        東京では2月に第二回 Processing Community Day が行われました[画像の説明:Processing Community Day 東京の参加者らが両手でPのポーズを作って笑っています。] 原文:Lauren McCarthy 翻訳:Ayato, deconbatch, reona396, takawo(アルファベット順) Puedes leer la versión en español de este artículo aquí. You can read the English version of this post here. Você pode ler a versão em português deste artigo aqui. p5.js のバージョン1.0が公開されました!p5.js はクリエイティブな表現やウェブ上でのコーディングを可能にし、アーティ

                                                          おまたせ!p5.js 1.0 公開!
                                                        • 各種WebAPIの簡単な使い方と、組み合わせで実現する新たな体験・可能性を考える

                                                          2020年2月1日、「PWA Night CONFERENCE 2020」が開催されました。Web体験を進化させる、新しいWeb開発コンセプト「PWA」をテーマに、Web開発に携わるエンジニアたちが集まった本イベント。プレゼンテーション「Webでできる体験を考える会」に登壇したLINE株式会社の折原レオナルド賢氏は、既存のWebAPIを用いてできることや実現できるユーザー体験について、自身の経験や今回の発表に際して行った検証結果を用いて紹介しました。講演資料はこちら Webでできる体験を考える 折原レオナルド賢氏:それでは「Webでできる体験を考える会」ということで始めたいと思います。去年の今頃、こんな記事を書かせていただきました。 もしかしたらこれによって今回呼んでもらったのかなと思いますので、この話の内容も含めていろいろ「Web APIってどういうもの?」という発表をしていきたいと

                                                            各種WebAPIの簡単な使い方と、組み合わせで実現する新たな体験・可能性を考える
                                                          • ターミナルを900%高速化するWebGLレンダラーを実験投入 ~「Visual Studio Code」v1.41/長いパスをコンパクトに表示する“コンパクト フォルダー”、HTMLタグのミラーカーソルも魅力

                                                              ターミナルを900%高速化するWebGLレンダラーを実験投入 ~「Visual Studio Code」v1.41/長いパスをコンパクトに表示する“コンパクト フォルダー”、HTMLタグのミラーカーソルも魅力
                                                            • 3分で3Dコンテンツが作れる! 「cables」で始めるビジュアルプログラミング - ICS MEDIA

                                                              今日ではwebサイトでも積極的に3Dおよびインタラクティブな手法が用いられています。これによって画面に入りこむような、より没入感のある体験が可能となりました。商品を3D化して360度から見られるwebサイトなど見たことはないでしょうか。 一方で、インタラクティブな3Dコンテンツを作るには導入の敷居が高く感じられ、尻込みしてしまう方も多いでしょう。その敷居を下げてくれるのが『cablesケーブルス』です。 cablesは開発はundevというベルリン/ケルンが拠点のデザインスタジオが行っており、ブラウザ上で視覚的にプログラミングが行えるツールです。インタラクティブな3Dコンテンツの作成を簡単に行うことができ、デザイナーにもエンジニアにも使いやすいツールとなっています。面倒なセットアップも必要ありません。 ▼ 編集画面の例 本記事ではcablesを極めればどんなコンテンツが作れるかを紹介し、簡

                                                                3分で3Dコンテンツが作れる! 「cables」で始めるビジュアルプログラミング - ICS MEDIA
                                                              • Sougen

                                                                Sougen is a Web-First Metaverse. A barrier-free experience for millions of users.

                                                                  Sougen
                                                                • UnityでモバイルWebGLゲーム開発を頑張る話 - Mirrativ Tech Blog

                                                                  こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 ミラティブのライブゲームはUnityで開発し、MirrativアプリのWebGLで動いています。 ライブゲームを支える仕組みと実際のライブゲーム開発で使用した技術については過去の記事で紹介しています。 tech.mirrativ.stream tech.mirrativ.stream UnityはWebGL向けにもビルドでき、モバイルのWebGLであってもUnity製プロダクトが動くようになっています。一方で、Unityは正式にはモバイルWebGL対応をサポートしておらず、ネイティブのモバイル開発と比べると開発の難易度は高いです。その難易度の高さは具体的にどこにあったのか、実際にモバイルWebGL向けのゲームを開発した経験を元に知見を共有します。 パフォーマンス編 モバイルWebGLの開発は常にパフォーマンスの意

                                                                    UnityでモバイルWebGLゲーム開発を頑張る話 - Mirrativ Tech Blog
                                                                  • アニメ「OBSOLETE」公式サイト

                                                                    公式コミカライズ「OBSOLETE ハナブサレポート」EPILOGUE(最終話)が、コミックNewtypeに公開! MEDIA

                                                                      アニメ「OBSOLETE」公式サイト
                                                                    • ミラティブのUnityエンジニアになったら学べること - Mirrativ Tech Blog

                                                                      みなさんこんにちは。ミラティブUnityエンジニアの菅谷です。 私がミラティブに来てからちょうど2年が経ちました。 以前はソーシャルゲームの会社でゲームの運営や新規開発を行っていました。リードエンジニアとして広くコミットすることで、特にクライアント側の一通りの技術を学ぶことができましたが、ミラティブに来てからも事業が成長していく中で様々なことに挑戦し学んできました。振り返ってみてミラティブのUnityエンジニアとして習得できる技術や、ミラティブで活かせるスキルが分かってきたので一例として紹介します。 ミラティブのUnityエンジニアとしてのスキルは大きく3Dアバター(エモモ)系とゲーム系とに別れます。 どちらの技術もMirrativアプリで直接使われ、メンバーが変わるわけではありませんが開発における性質は異なります。 以下それぞれの特徴について説明します。 エモモ系 3Dアバター(エモモ)

                                                                        ミラティブのUnityエンジニアになったら学べること - Mirrativ Tech Blog
                                                                      • やさしい切りかた辞典 | 貝印

                                                                        家庭での食品ロスの原因のひとつである「野菜の過剰除去」 食べられる部分を捨てずにムダなく切ることは、 今日からまな板の上でできる、ワンアクション。 そんな食卓と地球にやさしい切りかたをご紹介します。

                                                                          やさしい切りかた辞典 | 貝印
                                                                        • Blenderで画像生成AI「Stable Diffusion」が使える無料アドオン

                                                                            Blenderで画像生成AI「Stable Diffusion」が使える無料アドオン
                                                                          • 生 WebGL と TypeScript で Vercel のロゴを作る

                                                                            はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日

                                                                              生 WebGL と TypeScript で Vercel のロゴを作る
                                                                            • あてっこ!ぷにまるずを支える技術紹介 〜モバイルWebGLの開発事例〜 - Mirrativ Tech Blog

                                                                              Unityエンジニアのいも(@adarapata)です。 みなさんはUnityでWebGLプラットフォーム開発していますか? ミラティブでは先日「あてっこ!ぷにまるず」というライブゲームをリリースしました。 これはモバイルブラウザで動くWebGLです。 PCブラウザ想定のWebGLは多くありますが、モバイルブラウザを想定したゲームはあまり多くはありません。 いざ開発しようとしてもそもそも動くのか?このライブラリは対応しているのか?要求水準は満たせるのか?といったさまざまな課題が待ち受けているでしょう。 本エントリーでは、あてっこ!ぷにまるず(以下ぷにまるず)を実際にリリースするにあたって利用したライブラリの簡単な紹介や、ちょっと気をつけるポイントなどを紹介していきます。 個別の技術スタックに関する話は別途エントリを書いていくので、ここでは全体のサマリーと簡単な選定理由などに留めておきます。

                                                                                あてっこ!ぷにまるずを支える技術紹介 〜モバイルWebGLの開発事例〜 - Mirrativ Tech Blog
                                                                              • 制作事例:Lottieのアニメーションを手描き風に動かしたい!SVGとWebGLを使った2つのアプローチ - ICS MEDIA

                                                                                制作事例:Lottieのアニメーションを手描き風に動かしたい! SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式

                                                                                  制作事例:Lottieのアニメーションを手描き風に動かしたい!SVGとWebGLを使った2つのアプローチ - ICS MEDIA
                                                                                • p5.js と ml5.js の組み合わせでブラウザ上でのリアルタイム物体検出を試す(COCO-SSD を利用) - Qiita

                                                                                  この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。 ●ml5.js で物体検出(COCO-SSD を利用) - OpenProcessing https://openprocessing.org/sketch/1795350 実装した内容の話 今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。 実装の際に参照した情報 実装時には、以下の ml5.js公式のドキュメントを見て実装しました。 ●ObjectDetector https://learn.ml5js.org/#/reference/object-detector ml5.js によ

                                                                                    p5.js と ml5.js の組み合わせでブラウザ上でのリアルタイム物体検出を試す(COCO-SSD を利用) - Qiita