webgl

トナカイと白ひげのおじいさんに学ぶUVアニメーション

この記事はTech KAYAC Advent Calendar 2021の24日目の記事です。こんにちは!意匠部のおばらです。今日はUVアニメーションのお話です。UVとは?3Dの世界でUVといえばUV座標のことです。UV座標は頂点の3次元座標がテクスチャ上のどの位置に対応するかを表す2…

WebGL2でCPUベースのレイトレーシングをやってみた

この記事はKAYAC Advent Calendar 2021の22日目の記事になります。 こんにちは!ハイカジチームの深澤と申します。 今回は実際の業務とは関係なく、自由研究的にやってみたことの記事になります。 数ヶ月ほど前に iOS15, macOS Monterey が登場し、ついに iO…

【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021 の21日目の記事です。 こんにちは!意匠部のおばらです。 今回は アドベントカレンダー14日目の記事 でご紹介した 「すき焼きの写真にすき焼きの3Dモデルなど任意のファイルをバイナリとして埋め込む方法」 の解…

すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021の14日目の記事です。 こんにちは!意匠部のおばらです。 今日は、知っていても役に立たないかもしれない、 WEBページでの画像の変な使い方をご紹介しようと思います。 題して「すき焼きの写真にすき焼きの3Dモデ…

Houdiniでモデリングし、GLTFで書き出そうとしたらアニメーションなどを書き出せなかった話

こんにちは!クライアントワーク事業部技術部の町田です。 この記事は Tech Kayac Advent Calendar 16日目の記事です。 今回は3DCGのDCCツールであるHoudiniでモデリングをしシーン構成したプロジェクトをGLTFで書き出して WebGLで確認してみる記事になりま…

端末性能を測るWebGLアプリ作ってみた

こんにちは。技術部平山です。 この記事では、雑にベンチマークプログラムを作ってみたことと、それに付随して、 ベンチマークプログラムを作りたくなるような事情 テストの設計と、その背後にあるハードウェア といった点について書きます。 なお、実行はこ…

regl入門

こんにちは、カヤック・クライアントワークチーム・フロントエンドエンジニアのMr.ブラウンです。 今回は、 「Fast functional WebGL」 と謳っているreglを紹介いたします。 ※ 多少、WebGL・GLSLをさわったことがある前提で話が進んでいきます。 はじめに re…

WebGLコンテンツの開発フローと抑えどころ

こんにちは!WebGLおじさんことふかぽんです。 WebGLの案件に関わらせていただくことが多く、「サマーウォーズTV連動特設サイト」や「シン・アリマ」などの案件でもWebGL周りを担当させていただいています。 www.kayac.com www.kayac.com 過去のアドベントカ…

【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる

この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは!カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレン…