サンプルで理解するWebGL 2.0 - Transform Feedbackによるパーティクル表現 - ICS MEDIA
ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0はChromeとFirefoxで標準で利用でき、次世代のウェブ3D表現技術として注目されています。 前回の記事では一度のドローコール（描画命令）で複数のテクスチャーに別々の情報を同時に描画（出力）できるMultiple Render Targets（マルチプル・レンダー・ターゲッツ）について紹介しました。連載の最後となる本記事では同じくWebGL 2.0で追加された代表的な機能であるTransform Feedback（トランスフォーム・フィードバック）についてデモを交えて紹介します。 Transform Feedbackによるパーティクル表現 Transform Feedbackを使うと下記のデモのような表現が可能です。 デモを別ウインドウで再生する ソース
テキストでタイムラインアニメーションを作れるライブラリを作った - No Regrets in Bathing
0----1----2--- みたいな形式のテキストでタイムラインアニメーションを作れるライブラリを作りました。 しゅうまいさんと「Webでタイムラインアニメーションを作るのがだるい」的な話をしていて、 AAみたいな発想で楽をできないかなと思ったのが発端になっています。 まずは下記のデモを見てください。 See the Pen TimelineDown Example by hashrock (@hashrock) on CodePen. 下記の文字列を渡すことで、４つの絵文字がそれぞれ個別のアニメーションをします。 const p1 = "--------0----1--2-------"; const p2 = "---------0----1--2------"; const p3 = "----------0----1--2-----"; const p4 = "---------
WebGPUでシェーダーアートをやってみる（Vite、TypeScript）
はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダーに記述する部分のみの解説なので、そもそもフラグメントシェーダーを使ってブラウザで描画させるまでの工程も含めてWebGPUで再現してみるという感じです。自分も完全に理解できているわけではないのでおかしい部分があるかもしれませんがご容赦ください。またWebGPUはまだWorking Draft（草案）段階なので今後いろいろと変更される可能性があることにも注意が必要です。 実際に作ったもの リポジトリ codesandbox 実装について ざっくりとした全体の作りとしては四
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
GPUラーメンを作ろう - Qiita
概要 デモはこちら Gitはこちら Three.jsでラーメンを作ります。 ラーメンの主な成分はGPU Trailですが、こちらは前の記事でベースを作ったのでそちらも参照してください。だいたい同じ内容です。 Three.jsでGPU Trails 今回はこいつにメッシュを貼って食べ応えのあるラーメンに仕上げていきたいと思います。 GPUComputationRendererの初期化 GPUComputationRendererを初期化します。 initComputeRenderer(){ this.computeRenderer = new GPUComputationRenderer(this.length,this.num,this.renderer); let initPositionTex = this.computeRenderer.createTexture(); let in
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
p5.jsでビジュアルコーディングしてみる。 - Qiita
◆p5.jsとは processingをjavascriptに移植したものです。 javascriptなので環境を作らなくてもすぐにコードを書くことができます。 さらに拡張機能をライブラリとして使用可能で、サウンド、3D、グラフィックス、htmlやDOMの直接操作することもできます。 図形やグラフィカルな描画に特化しているので、アーティストやデザイナにも取っ付きやすいビジュアルコーディングツールになってます。ありがたや… ◆環境を整える http://p5js.org/ 公式ページからCDNのリンクをHTMLに貼付けるだけで環境設定終了。 codepenでのプログラミングが便利！ http://codepen.io 打ち込んだコードが即反映されるので試し書きしたいときに。 ◆描画してみる ↓p5.jsは下記のサイトで基本的な流れを学ぶことができます。 ドットインストールp5.js入門 ht
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
three.js+GLSLでかまいたちの夜2風シェーダを作って描画する - Qiita
※この記事は 情報系を勉強する女子大生 Advent Calendar 2017 21日目投稿記事です。 はじめに こんにちはー。 周囲にCGやってるおじさんはいてもJDはいないので、CG布教のために書きました。対象読者層には、プログラミングをやったことがあり、かつ3DCGをあまり触ったことがない人を想定しています。 個人的に、CGの楽しさは紙の上で式を立てて考えながら実装したものがすぐに画面に反映されるところだと思っているので、特に変化がわかりやすいシェーダプログラミングをテーマに記事を書くことにしました。 ただ、ちゃんと理解してシェーダを書くにはまず座標系やアフィン変換などのちょっとめんどくさいお話をしないといけません。今回はその辺の話を一旦カッ飛ばすため、あまり面倒なことを考えなくても書けるシェーダを実装することにします。あんまり高度なことはしていないので、「え、物理ベースレンダリン
Box2DJS（二次元物理エンジン）とthree.js（3D表現）のシンプルな組み合わせ | KnockKnock
今回は二次元物理エンジンBox2DJSとWebGLライブラリ、three.jsを組み合わせて、カーレースゲームのサンプルを作成しました。 Box2DJS Box2DJSはC++で書かれた物理演算エンジンをJavaScriptに移植したものです。質量・速度・摩擦といった、古典力学的な法則をシミュレーションするゲーム用の2D物理演算エンジンとして、現在ではActionScript、Java、C#、Pythonにも移植されています。 前回の記事ではenchant.jsとthree.jsを併用しましたが、今回は3D表現としてthree.jsを使う事は変わりませんが、メインのロジック部分にBox2DJSを使用しました。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでChromeかFireFoxで
株式会社ネクシィーズ（Nexyz.）
初期投資ゼロのレンタルサービスネクシィーズ・ゼロシリーズ ネクシィーズ・ゼロシリーズは、一括では購入しにくい厨房機器や、 リプレイスが難しい照明・空調などの業務用設備を、初期費用をかけずに導入できるサービスです。 リスクなく最新の省エネ設備を導入いただけます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gmork.in
three.js - examples