第13回 インタラ会 資料

テーマは「GLSLを使ったマスク表現」


サンプルファイルはこちら↓↓ github.com

サンプル1の解説

第13回インタラ会 サンプル1

  • 2つのシーンを用意する
  • マスク用のシーン↓ f:id:ikeryou:20190821160710p:plain

  • ベースとなるシーン↓ f:id:ikeryou:20190821160820p:plain

  • 合体↓ f:id:ikeryou:20190821160942p:plain

  • マスク用シーンの赤い部分(アルファが0じゃない部分)だけ表示する↓ f:id:ikeryou:20190821161125p:plain

  • ↑の処理で重要なのはここ↓
    intr13/index.html at master · ikeryou/intr13 · GitHub

サンプル2の解説

第13回インタラ会 サンプル2

サンプ3の解説

第13回インタラ会 サンプル3

第12回 インタラ会 資料

テーマはゆらゆら


サンプルファイルはこちら↓↓ github.com

シェーダーを使ったゆらゆらエフェクト

  • お手軽なうえに低負荷で使用頻度は高い
  • 絵自体をずらすのももちらん、色もずらして着色したりもできる
  • 基本的にはsinやcosを使うけどtanとか使うと思いもよらない絵になったりする
  • いろんな応用ができる

デモいくつか

https://ikeryou.github.io/intr12/1/
https://ikeryou.github.io/intr12/2/
https://ikeryou.github.io/intr12/3/

第11回 インタラ会 資料

テーマはライト


サンプルファイルはこちら↓↓ github.com

three.jsでいうとPointLightやDirectionalLight

  • 光らせる、影をつけるイメージだけど色の設定や動かし方で面白くなる気がする
  • いくつかやってみた所感、PointLightが扱いやすそうdecay(精細さ?細かさ?)いじると見た目ががらっと変わる

デモいくつか

http://ikeryou.jp/intr/12/

https://ikeryou.github.io/intr11/1/

【仕事】KITAMURA MAKURA official website

www.kitamura1923.com

まくらのキタムラ様の英語サイトが公開されました。
僕はフロント実装全般を担当しております。

ファーストビューのWebGLを使った表現やwebサイトの世界観に合わせた細かいモーションなど、丁寧に実装していきました。

ぜひPCとスマホ両端末でご覧ください。