トップへ戻る
カレーが食べたい
setchi.hatenablog.com
ベジェ曲線とは 数式で曲線を表現する方法の一つです。 コンピュータ上で滑らかな曲線を表現できるため、多くのドローソフトや文字の描画で採用されています。 ベジェ曲線の原理 ベジェ曲線を理解するには、1次ベジェ曲線から一つずつ次元を上げながら動きを見ていくのが分かりやすいと思います。 1次ベジェ曲線 *1 一本の線分（P0 から P1）の上を一定の割合で動く点を考えます。この点が動く軌跡が1次ベジェ曲線です。 つまり、ただの直線です。しかし、この動きがすべての基本になります。 「t」は線分上をどれだけの割合進んだのかを表す数値です。 2次ベジェ曲線 *2 2次ベジェ曲線は、線分が一本増えて二本の線分（P0 から P1 と、P1 から P2）から成り立ちます。 1次ベジェ曲線と同じように、それぞれの線分上を一定の割合で動く点（緑色の点）を考えます。 その点同士を結ぶと、なめらかに動く一本の線分（
4/10 にサポーターズCoLab勉強会で「楽しい！Unityシェーダーお絵描き入門！」という講演をしました！内容はフラグメントシェーダで2Dの絵を描くための入門的な考え方を紹介するというものです。 当初の定員20名に対して150名近い申込みをいただきました。ありがとうございます。 supporterzcolab.com スライドはGifアニメが多かったのと（Gifアニメを動く状態で公開できるスライド共有サイトが少ないことに驚きました）、スピーカー ノートで内容を追ってもらえれば資料として分かりやすいと思ったので Google スライドでそのまま公開させていただきました。 入門向けの内容になりますが、興味があればぜひご覧ください。 シェーダーお絵描き入門勉強会の資料を公開しました🙇 #spzcolabhttps://t.co/kwRANl48uC— setchi (@setchi) Ap
2019/06/19 に開催された KLab TECH Meetup #4 で「FancyScrollView x Shader」というタイトルで登壇してきました。 techplay.jp 内容は、自作のスクロールビューライブラリ「FancyScrollVeiw」を使って、シェーダー表現を取り入れたスクロールUIを作るというものです。 発表資料はこちらです。 docs.google.com この記事は、発表内容をブログ向けにまとめたものになります。 FancyScrollView? 仕組み シェーダー表現を取り入れたスクロール メタボールの解説 シェーダーにセルの状態を渡す 座標系を合わせる セルの位置をもとにメタボールを描画 タップ判定 ボロノイの解説 セルの位置をもとにボロノイを描画 境界線を描画 タップ判定 終わりに FancyScrollView? そもそも FancyScroll
HITとは？ NEXONが出してるスマホゲームです。UE4製で綺麗なグラフィックのアクションゲームです。 mobile.nexon.co.jp ログイン時のエフェクトってどんなの？ 実装方針 まずこんな画像を用意します。 こういうのはパーリンノイズが向いてる気がするので、パーリンノイズで生成しました。 色を高さと見なして、こんな風にしたらそれっぽいのができそうですね！ (図は Processing で生成しました) EffectVisualize.pde · GitHub 実装 シェーダの全体像です。 Shader "Custom/LoginEffectShader" { Properties { [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {} _MaskTex("Mask Texture", 2D) = "whi
はじめに 2018/12/01〜12/02 に開催された Tokyo Demo Fest 2018 というデモパーティに初参加してきました。Tokyo Demo Fest をご存知ではない方のために、説明を公式サイトから引用します。 Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。 私は GLSL Graphics Compo という GLSL のフラグメントシェーダのみで映像を作って競う部門に作品をエントリーし、2位に選んでいただきました。ありがとうございます！ 作品は下記からご覧になれます。 Pouet GitHub Shadert
高度に柔軟なアニメーションを実装できる汎用のScrollViewコンポーネントです。 無限スクロールも対応しています。 github.com 以下ほぼ README のコピペです 導入 Unity 2017.1.0 (C# 6.0) 以降が必要です。このリポジトリを Clone するか、 Asset Store からプロジェクトにインポートしてください。 サンプル FancyScrollView/Examples/Scenes/ を参照してください。 サンプル名 説明 01_Basic 最もシンプルな構成の実装例です。 02_CellEventHandling セルからのイベントをハンドリングする実装例です。 03_InfiniteScroll 無限スクロールの実装例です。 04_FocusOn ボタンで左右のセルにフォーカスする実装例です。 仕組み FancyScrollView はセル
2018/09/13 に開催された GLSL Tech Night 2018 で発表してきました。 connpass.com 私は「ビルトイン関数の使い方いろいろ！シェーダアートの表現力を高める小技集」というタイトルで、Unity-ShaderSketches や Shadertoy での作品作りに利用したテクニックを雑多に紹介しました。 本日の講演資料です #GLSLTechhttps://t.co/yxFWB3wXQa— setchi (@setchi) 2018年9月13日 大雑把な内容 基本形(2D) モーフィング アンチエイリアシング イージング モーションブラー 空間の折畳み シェーダでの 2D パターン作りについては、こちらの資料も参考にしてみてください。 シェーダーお絵描き入門勉強会の資料を公開しました🙇 #spzcolabhttps://t.co/kwRANl48uC—
はじめに 大量のオブジェクトを描画するって魅力的じゃないですか！？ GPUの力を使ってやってみました！ 初めてのGPGPUなので、今後のテンプレートとして使えるような出来る限りシンプルな構造のものを作ってみました。 今回はモバイルを含め、より多くの環境で実行できるようにコンピュートシェーダーは使わずに実装しました。 （絵心が足りなくて見た目が地味ですが、10万個のキューブが波打っています！） この記事のプロジェクト一式はこちらです。 github.com 実装方針 主な登場人物です。 レンダーテクスチャ（全オブジェクト位置を格納する箱として使用） フラグメントシェーダ（オブジェクト位置計算器） 制御用スクリプト（C#） キューブ表示用シェーダ（RenderTextureから自身の位置を取り出して、その位置に描画します） 10万ピクセルのレンダーテクスチャを用意して、各ピクセル値を各オブジェ
はじめに 一日中座って作業するデスクワーカーのなかには、肩こり・首こり・頭痛に悩まされている人も多いのではないでしょうか。 そんな悩みを一気に解決してくれるのがこちら！ altwork.com お値段はなんと7,650ドル約82万円！ これがあれば体の痛みから開放されるけど、さすがにこれをポンと買えるほどの度胸はなかったので、他のアイテムを使ってできるだけ近い環境を整えてみました。 今のところ、悩んでいた首コリや頭痛が減って快適に過ごせているので紹介したいと思います。※この記事はアフィリエイトリンクを含みます。 全体像 椅子 AKRacing の Premium シリーズを使っています。 AKRacing オフィスチェア ゲーミングチェア Premium 低座面タイプ Carbon Black カーボンブラック AKR-PREMIUM/LOW-CARBON_BLACK 発売日: 2017/
jsで文字列を圧縮する方法を探していたらこんなページを見つけました。 javascript - でデータを圧縮/伸張する これを使えば良いやと思っていたら、あるデータパターンで上手く復元できないことがありました。 とりあえず JavaScript文字列(UTF-16)をUTF8化 ↓ RawDeflate.deflate() ↓ base64エンコード とすれば圧縮できて、逆をすれば復号ができるようなので難しいことは考えず確実に簡単に動くものを作りました。 高度なJavaScript技集にあるdeflate.js(圧縮用)とinflate.js(復号用)をHTML内で読み込んで下記のような関数を定義。 // 圧縮関数 (要deflate.js) function deflate(val) { val = encodeURIComponent(val); // UTF16 → UTF8 va
実装時に少しはまってしまったので備忘録として残しておきます。 実装 (交差判定部分のみ) public static bool LineSegmentsIntersection( Vector2 p1, Vector2 p2, Vector2 p3, Vector2 p4, out Vector2 intersection) { intersection = Vector2.zero; var d = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x); if (d == 0.0f) { return false; } var u = ((p3.x - p1.x) * (p4.y - p3.y) - (p3.y - p1.y) * (p4.x - p3.x)) / d; var v = ((p3.x - p1.x) *
今Unityで音ゲーの譜面を作るエディタを開発していて、Undo/Redo の実装をする機会があったのでメモです。 今回はCommandパターンで実装しました。 UndoRedoManager.cs NoteEditor/CommandManager.cs at master · setchi/NotesEditor · GitHub ユーザが何か行動すると、それに対するUndoメソッド/Redoメソッドを内包したコマンドオブジェクトをマネージャに渡します。 NoteEditor/CanvasWidthScalePresenter.cs at master · setchi/NotesEditor · GitHub マネージャは受け取ったコマンドをUndo用スタックにPushしていきます。 Undoの実行はUndo用スタックからPopして、コマンドのUndoメソッドを実行します。 Redo
今、広い範囲の音声波形を高速にリアルタイム描画する問題に取り組んでいます。 要件として描画対象の範囲をグリグリ変更できる必要があって、これまでLineRendererやGLによる描画を試みましたがどれも欲しいパフォーマンスに届きませんでした。 そこで、波形情報をテクスチャに埋め込んでシェーダーで描画する方法を試してみました。 AudioClipから波形情報を取得する var audioSource = GetComponent<AudioSource>(); var samples = new float[audioSource.clip.samples * audioSource.clip.channels]; audioSource.clip.GetData(samples, 0); で取得できます。 docs.unity3d.com 波形情報をテクスチャに埋め込む 描画領域の横幅 x
はじめに 帰省の新幹線の中でこういうポストプロセスエフェクトを作ったので、作り方を紹介します。 空間の歪めかた分かってきました （新幹線で楽しくシェーダー勉強してます） pic.twitter.com/oyKSAV9sSt— setchi (@setchi) 2017年12月28日 実装方針 ポータルの中心から一定距離内のピクセル（緑色の範囲）を外側に圧縮して、広がった分だけ内側に違う絵を描画します。 実装 ShaderLab Shader "Custom/Portal" { Properties { _MainTex ("MainTex", 2D) = "white"{} } CGINCLUDE #include "UnityCG.cginc" sampler2D _MainTex; sampler2D _SubTex; float _Aspect; float _Radius; flo
HTML5で追加されたFileAPIで、ローカルファイルをJavaScriptで扱えるようになりました。ファイルの中身をテキストと見なして読み込むreadAsTextメソッドでは、第二引数で文字コードを指定できますが、そもそも文字コードが分からなかったり自動判別したいときの対処法です。 結論としては、readAsArrayBufferでバイナリのまま読み込んでライブラリにデコードしてもらいます。 今回 encoding.js を使いました。 数値配列をもとに、文字コードの判別や変換をしてくれるマッチョなライブラリです。 var file = // 文字コードの分からないテキストファイル var reader = new FileReader(); reader.onload = function (e) { // 8ビット符号なし整数値配列と見なす var array = new Uint
はじめに ShaderToy とか見てるとすごい（小並感）な作品がたくさんありますよね！ Shadertoy BETA ここまではいかなくても、ちょっと自分の作品の演出でカッコいいこと出来るようになりたいので、いろんなテクニックについてじゃぶじゃぶインプット（＆ぼちぼちアウトプット）しています。 ShaderLab のスケッチ置き場 GitHub - setchi/Unity-ShaderSketches: Self learning shader in Unity3D GPGPUの習作置き場 GitHub - setchi/Unity-GPGPU-Sandbox: Self learning GPGPU in Unity3D setchi.hatenablog.com この記事では最近取り組んでいる ShaderLab でのスケッチについて紹介します。 Transform まずは基礎から
このページを最初にブックマークしてみませんか？
『setchi’s blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
