ゲームの当たり判定やマップの探索などの文脈で目にすることが多い四分木ですが、実はベジェ曲面をメッシュ化する際にも登場します。そして四分木とベジェ曲面がそれぞれ持つ特徴は非常に相性が良く見ていて気持ち良いので、その視点から四分木と曲面について紹介したいと思います。 この記事で解説する内容のインタラクティブデモはこちらか…
はじめての勉強会参加
これはGoogle Summer of Code 2026にて、Graphiteのコントリビューターとして取り組んだうちの一部、メッシュグラデーションの実装実験より得た知見をまとめた記事です。インタラクティブデモを用意しているので、以下のリンクからどうぞ。 https://yayo1.com/demo/mesh-gr…
GraphiteでGeneralized graphical data rendering representationをやります
タイルベースのベクターグラフィックスレンダリングの仕組みを理解するため、RustとWebGPUを使ってMassively Parallel Vector Graphicsを参考に実装しはじめました。この記事では、直線からなるパスの塗りつぶしがどのようにタイルベースでレンダリングされるかの解説と、WebGPUで実装した…
概要 WebGPUのコンピュートシェーダーを使って累積和を計算します。CPUによるシーケンシャルな累積和よりも高速に動作することを目標とします。実装にはRustとwgpuを使います。WebGPUなんじゃそらという方はWebGPU fundamentalsのコンピュートシェーダー周りを覗いてからだと読みやすくなると思い…
Skiaという2Dグラフィックスライブラリの名前を耳にしたことがありますか？もし聞いたことがなくても、Skiaを使ったアプリケーションやOSには絶対触れたことがあるはずです。それほどにも普遍的に使われているにも関わらず、Skiaのアーキテクチャや実装に触れた情報が意外にも少なく、謎のヴェールに包まれているような印象を…
いきなりですが、2つ質問です。今まさにあなたが読んでいる文字がどうやってレンダリングされているか説明できますか？私はできませんでした。それではあるモノの仕組みを理解するために最も効率の良い方法は何でしょうか？そう、自作することです！それではフォントのパーサーとレンダラーをゼロから作っていきましょう！ 目的 小さなTr…
これは何 HTTPとWebSocketサーバーのコア部分を実装しながら仕組みを理解していきます。学習目的で実用ではありません。 HTTP、WebSocketはどちらもWEBエンジニアなら当たり前に使うプロトコルですが、仕組みはふわっとしか分かっていませんでした。そんな折サーバー周りを触る必要が出てきたので改めて理解し…
Astroのバグかと思ったらHTMLの仕様でした。 発生したバグ AstroのMDXインテグレーションには、指定したHTML要素をカスタムコンポーネントに差し替える機能があります。 MarkdownとMDX | Docs 具体的にはこんなことができます。めちゃくちゃ便利です。 index.astro --- impo…