この記事はTech KAYAC Advent Calendar 2022 22日目の記事です。 こんにちは！ ハイパーカジュアルゲームチームのフロントエンドエンジニアの深澤です。 WebGL2で、スキニング処理をしているGLTFのモデルを GPU Instancing で大量に表示するデモを作ってみました。影を落とす処理も合わせて、会社の Mac Chrome では30,000個ほど、私物 iPhoneX Safari では2,000-3,000個ほどは60FPSで表示できていそうです。 URLはこちらです。 デモサイト: https://takumifukasawa.github.io/PaleGL/demos/grass-skinning-gpu-instancing/ デモのgithub: https://github.com/takumifukasawa/PaleGL/tree/m

Unity WebGLとThree.jsに連動して踊っていただく ごぶさたしてます。@fnobiです。こちらは面白法人グループ Advent Calendar 2022の20日目の記事になります。 確認してみたら前に記事を書いたのは2019年のようですねー。3年の間にディレクター転向したり子会社に転籍したりなんかいろんなことが起きてました。げんきです。現在はカヤックアキバスタジオにてファンコミュニティ事業というチームを率いて頑張っています。 akiba.kayac.studio さてそんなわけで、今回はせっかくなので、今年のプロジェクトでよく使ったUnity WebGL書き出しの話題です。 まずはこちらのサンプルをご覧ください。 youtu.be デモ github レンガ的ななにかが、右と左でおんなじ動きをしてますね。つまんねえなと思ったあなたもうちょっと待ってね。こちら実は、どちらもW

この記事はKAYAC Advent Calendar 2021の22日目の記事になります。 こんにちは！ハイカジチームの深澤と申します。 今回は実際の業務とは関係なく、自由研究的にやってみたことの記事になります。 数ヶ月ほど前に iOS15, macOS Monterey が登場し、ついに iOS / macOS ともに safari で WebGL2 が標準で使えるようになりました。この出来事はWebフロント界隈からするととても嬉しいお知らせでした。 そのことを思い出し、アドベントカレンダーでは WebGL2を使った何かを題材にしようと決め、前々からやってみたかった「ブラウザでCPUベースでレイトレをし3Dモデルを表示する」ことに取り組んでみたという経緯になります。 ここでいう「CPUベース」とは、「レイトレのピクセル計算をjavarcript側で行うこと」を指します。 目次 目次 はじ

~ この記事はKAYAC Advent Calendar 2019の20日目の記事です。~ こんにちは。CL技術部の深澤です。新卒で入社して5年目になります。（ 深澤 匠 | 面白法人カヤック ） 3年ほどWebフロントエンドに従事して主にWebGL案件に携わったのち、最近はUnityやUnrealEngineなどを使ってARコンテンツやイベント・展示案件などに関わらせていただいています。シェーダーが好きです。 新卒入社からアドベントカレンダーは毎年書いており、せっかくなので過去のバックナンバーも載せておきます。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC engineers' blog 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る - KAYAC engineers' bl

こんにちは！WebGLおじさんことふかぽんです。 WebGLの案件に関わらせていただくことが多く、「サマーウォーズTV連動特設サイト」や「シン・アリマ」などの案件でもWebGL周りを担当させていただいています。 www.kayac.com www.kayac.com 過去のアドベントカレンダーではこんなことを書きました。かれこれ4年連続の出場です。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る 2017 ... 【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる 前置き WebGLコンテンツの開発をさせていただくことが多かったり、社内でWebGLの勉強会を開いたりもしているのですが、ある日ふと、とある技術やテクニックにフォーカ

この記事で伝えたいこと Web上でゲーム作る際に、モックづくりで役立つ設定や注意点とかとかとか つくったもの デモ：https://hkitahara.github.io/pages/techblog171218/index.html 作業時間：8.5h コメント：100点目指して頑張ってください. （デザインは確認項目に入っていないので最小限です） はじめに 皆さんゲーム作ってますか？　クライアントワーク事業部のポロです。 最近はゲームっぽいWebサイトを作る日々を送っております。 ゲーム制作のような規模の大きい制作では、いきなり本制作に着手すると様々な要因で爆死する危険があります。 爆死の危険を回避するのに使えるのが、モック制作です。 本制作に着手する前に、確認したい機能やデザインを工数かけずにさくっと作ってしまいましょう。 （この記事では、モックとかプロトタイプとかの言葉を細かく使い

この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレンダーではこんな記事を書かせていただきました。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る 目次 目次 はじめに WebGLでスプライトアニメーションさせる方法 1. UV座標をずらしてフレームを表示する 1-1. UV座標を拡大縮小させる 1-2. UV座標を平行移動させる 1-3. 座標変換を適用する 1-4. 座標変換後のUV座標を元に画像の色を取得する 2. ルー

UI改善チームを発足しました はじめまして。 面白法人カヤックで「Lobi」のUIデザイナーをしているバッコです。 Lobiはスマホゲーマー向けのチャット＆ゲームコミュニティサービスで、その前身である「ナカマップ」のリリース日から数えると今年で7年目を迎えます。 www.kayac.com サービス7年目を迎えて Lobiチームでは、日々ユーザーさんからのご意見や、計測ツールの数字を元に立てた仮説を検証する施策を行っています。 その他、既存機能の運用や改善も行っているのですが、サービスが長く続けば機能も増えていくもので、「サービス内のすべての画面の見た目や使い勝手を維持する」ことが段々と難しくなってきてしまいます… そこで、Lobiチームでは昨年末に話し合いをして、「細かい見た目や使い勝手の改善もユーザーさんに喜んでもらえることであり、すぐに数字に結びつかずとも、巡り巡ってサービスの成長に

sekaibonsai.com 2023 著作権. 不許複製 プライバシーポリシー

こんにちは！ 今年も残すところ後１ヶ月ってまじ？？ 今年が終わるーーーー って気持ちで一杯の@Konboiです さて､もういくつ寝るとクリスマス！！！ クリスマスが近づいて来たということは…. アレも始まっちゃうということですね！！！！！ そう！ KAYACエンジニア陣によるAdvent Calendar 2015 ということで今年も､ Goの話やRubyの話から､Unityやシェーダー､JavaScriptにCSSと多岐に渡った記事が上がってくる予定ですので是非お楽しみに！ スケジュール 11/30 @Konboi #0 Tech KAYAC Advent Calendar 2015 12/01 @Konboi #1 今年4月からメンターになってやったこと 12/02 @shogo82148 #2 今年テストで頑張ったことまとめAdd Star 12/03 @ki_230 #3 一流のフ

このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。 こんにちは！ 今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。 今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。 canvasライブラリで表現の幅は広がるが、種類が多くて迷う。 僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。 これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。 途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るま