Ore-GLORE NO WEBGL. ukonpower's WebGL experiments with three.js. I love three.js very very very mutch. I'll create exciting world in your browser.
WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる - Qiita
はじめに みなさんこんにちは。エマ・デュランダルさんです。 最近、WebGL関連のQiita記事を良く書くようになってきました。 WebGLはただなんとなく使う分には楽ですが、複雑な３Dの世界を作ろうとすると、思いの外パフォーマンスが出ないことがあります。 「Three.jsでやるとこんなに速いのに、どうしてWebGLを直接使うとこんなに遅くなるんだろう」という経験をされた方も多いかもしれません。 こうした世のWebGLライブラリには、たくさんの高速化のノウハウが詰まっています。 それらのうちの幾つかの技法を知ることで、あなたのWebGLアプリケーションも確実に高速化することができます。 本記事では、その技法の一つ、WebGLの拡張機能である「ジオメトリインスタンシング（ANGLE_instanced_arrays）」について、ご紹介したいと思います。 基本的な考え方 さて、「インスタンシ
ＣＧ制作演習 - 床井浩平氏が初心者向けにBlenderの使い方をまとめた PDF （1,419ページ・288MB）を無料公開！
Blender アセット Blender アドオン プラグイン＆アドオン-Plugin&Addon THE MEGA FLEET - Blender向けの最大級の自動車モデルコレク... 2024-05-02 3D CGI StudioによるBlender向けの最大級の自動車モデルコレクションアドオン『THE MEGA FLEET』がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Step Loop Select Ver1.4 - １列飛ばしで連続面ループ選択... 2024-05-01 KKS氏（@kksabnormal）による１列飛ばしでループ選択を可能にするBlenderアドオン『Step Loop Select Ver1.4』が無料公開されています！ 続きを読む
GLSLの冒頭の1行目について丁寧に解説する - Qiita
vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); GLSL初学者の人にとっては結構1行に情報が詰まっていて先頭行から難しいんじゃないかなと思ったので（少なくとも自分が勉強し始めた時はよくわからなかった）これについて説明していこうと思います． そもそもの目的 そもそも上記のコードを使う目的なんですが，画面の縦横比を1：1に揃えるために使用します． そうしたくなる理由を含め，順を追ってみていきましょう． デフォルト状態
Neon: A WebGL Installation
The best part of 3D graphics development is that there is an endless amount of things to learn. Every new technique is a rabbit hole of discovery where the new builds upon the old and new effects are created. It truly feels like imagination is the only limiting factor. At the heart of every Active Theory project is a passion for creative technology so it’s important to balance client work with exp
WebGLで綺麗な線香花火を作る
夏が完全に終わってしまいましたね。今年は花火をできなかった人も多かったことと思います。 そんなこともあってWebGL(three.js)を使って線香花火を作ってみました。 WebGL線香花火デモページ ソースコード(github) はじめに 写真や、スローモーションで撮影された動画などが参考になるのでまずは見てみましょう。 画像検索:線香花火の写真 参考にした動画 玉から飛び出した火花が分裂している、そして火花の動きが速すぎて人の目には点ではなく線に見えるのがわかると思います。 また、写真ではボケが遠近感を出していて美しいので再現したいですね。 この記事では、WebGLによる線香花火の描画について、個人的に線香花火の大事だと思う3つの要素 滑らかな軌跡 綺麗な枝分かれ 美しいボケ それぞれについて解説します 滑らかな軌跡: 火花の軌跡の方程式 シンプルな自由落下ではなく、空気抵抗も入れた式
[Three.js] BufferGeometry vs Geometry - Qiita
この記事は非推奨です。Three.jsのコアからGeometryクラスは完全に削除されているため、この記事を読む必要はありません。 はじめに WebGLライブラリThree.jsには、GeometryとBufferGeometryの2種類の形状を表す形式がありました。現バージョンではGeometryは削除されています。 この記事では 2つの形式の関係 2つの形式の操作の違い パフォーマンス の3点について解説します。 対象とする読者 この記事はThree.jsをすでに利用しているユーザーを想定しています。 そのためThree.jsのインストールガイドなどの内容は取り扱いません。 環境 この記事はThree.js r125を前提にしています。 バージョンが変わった場合、この記事の内容は適用できない場合があります。 記事を読む前にお手元の環境の確認をお願いします。 先に結論だけ r144で**
![[Three.js] BufferGeometry vs Geometry - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b30c364df9ec30b0fffdc8b0b2da58e0d91a1edb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVGhyZWUuanMlNUQlMjBCdWZmZXJHZW9tZXRyeSUyMHZzJTIwR2VvbWV0cnkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc0ZmI0OWRhMmVhYTU0MWQ5ZDkzNTcwNzc5MGU3Y2Q5%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYXNhdG9fbWFraW5vJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wZDcxNDczMjZkZGY3MTU0YzA0MmZhYjM2MTMyMjJlMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Ddffca7818db8ca3e2ceb5d69ef9bf26e)
GLSL Sandboxで遊ぼう | notargs.com
GLSL Sandboxは、ピクセルシェーダをリアルタイムプレビューしながらガリガリ書いていけるサービスです。 適当にいじっているうちに面白い絵が出てくるので、暇つぶしによく遊んでいます。 ピクセルシェーダは万能なので、頑張ればこんな絵も出せるらしいです。 さっそく何か書いていってみましょう！ (1)中心位置を合わせる GLSL Sandbox 新規作成した直後です。 デフォルトのコードだと中心位置がズレていてやりにくいので、適当に原点を中心に持ってきました。 ついでに無駄なソースコードを削り落としました。 #ifdef GL_ES precision mediump float; #endif uniform float time; uniform vec2 mouse; uniform vec2 resolution; void main( void ) { vec2 pos = (g
TensorFlow.jsがWebGLで並列計算を実行する仕組みを理解する - 開発日誌
先日、機械学習モデルの学習・デプロイのためのJavaScriptライブラリ「TensorFlow.js」がGoogleから公開されました。Googleからは「deeplearn.js」という同様のライブラリが以前から公開されていましたが、TensorFlow.jsはこのdeeplearn.jsをコアライブラリとして利用しており、モデルの構築を簡単にするhigh level APIや、TensorFlow本体・Kerasで学習したモデルをインポートするツールを備えているとのことです。 このライブラリでは、WebGLを介してGPUを利用することで計算を高速化しているのが特徴です。WebGLはJavaScriptでグラフィック描画を高速に行うための機能ですが、これをどのようにして機械学習の計算に利用しているのか調べてみました。 そもそもWebGLは何をするためのもの？ TensorFlow.js
GPGPUがまったくわからないのでGPUComputationRenderer.jsをまず調べてみるメモ - のぐそんブログ
GPGPU用のヘルパーライブラリであるGPUComputationRenderer.jsの使い方を調べてみました。 GPGPUが難しいので上手く説明できておらず、よくわからない文章になってしまっています。 あまり参考にならないかもしれません。 こちらの「Three.jsのGPGPUのサンプルが難しすぎるから解体して勉強してみる」のがとてもわかりやすので参考になります。 やること事 なんとなくのイメージこんな感じです。 GPGPUなのでテクスチャをデータ格納用に利用します。 テクスチャは、参照用と、データ格納用を作成して毎レーム入れ替えていきます。 ※複数のフレームバッファを使う場合です。1つだけの場合は「オフスクリーンレンダリング2」はいりません。 STEP 1 GPUComputationRendererのインスタンスを作成する。 引数のwidth, height, rendererはオ
WebGLでSimplex NoiseのGLSLを使ってグラフィックパターンを生成する - Qiita
突然の宣伝ですが、「WebGL Bits」という実験サイトをやってまして、ここではWebGLで作ったちょっとした小ネタをいくつか載せています。 ちょっと前に「Simplex Noise」というGLSLで実装されたSimplex Noiseというアルゴリズムを使ってグラフィックパターンを生成するコンテンツを作りました。 今回はそのGLSL版Simplex Noiseの使い方やパターンの生成方法の考え方について説明したいと思います。 特にライブラリは使わず、直接WebGLのAPIを使用する前提の話になってしまいますが、基本的にGLSLの話しかしないのでもしかしたら何らかのライブラリで独自のシェーダーを使う場合にも応用が利くかもしれません（？） Simplex Noiseコンテンツの概要 「Simplex Noise」で作られるグラフィックパターンがどんな感じなのかは、上の画像やサイトを見てもら
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
1. Copyright Drecom Co., Ltd. All Rights Reserved. 1 Metal と Vulkan を⽤用いた ⽔水彩画レンダリング技法の紹介 次世代のモバイルグラフィックスは Non-‐‑‒Photorealistic Rendering へと移⾏行行する 株式会社ドリコム 増野 健⼈人 川上 知成 2. Copyright Drecom Co., Ltd. All Rights Reserved. 2 講演者紹介 川上 知成 -‐‑‒ 進⾏行行 株式会社ドリコム プログラムマネジメント室 サーバーサイドエンジニア、PMを担当し、現在は複数のプロジェクトに関与 CEDEC2014, 2015登壇 増野 健⼈人 -‐‑‒ メインスピーカー 株式会社ドリコム ゲームプロダクト部 コンシューマゲーム会社にてグラフィックスシステムやシ
Intro to Curl Noise
I gave a small talk at the recent Sydney Creative Coding meet on Curl Noise. It was an introductory talk with the goal of explaining the basics, so those interested can go off and look at other peoples work and hopefully understand what is going on. I have put the slides up here. Throughout the talk I took breaks for questions and showed pictures of curl and miscellaneous mathematical facts, which
Strange Attractors GPU
Attractors have been out for a while and as it happens in these cases there’re a lot of resources on the internet involving this subject. They are marvellous mathematical objects pretty easy to program that give rise to interesting elegant outcomes. For a deeper understading of what an attractor is I suggest a quick look to the wiki page and the Softology’s blog page. The visualization of a strang
Noise
■ノイズの種類 OFF ホワイトノイズ ブロックノイズ(fBm) バリューノイズ(fBm) パーリンノイズ(fBm) セルラーノイズ セルラーノイズ反転 セルラーノイズ(タイル分割) セルラーノイズ反転(タイル分割) ■fBm反復回数 ■アニメーション 説明 ノイズテクスチャをオフスクリーンで生成して、レイマーチングの距離関数にマッピングさせてみました。 ここで紹介しているのはベーシックなノイズ生成手法のみですが、更に調べていくと頭のおかしい手法がまだまだたくさんあって面白い、というか発狂しそうです。 情報源としてはこちらやこちらのサイトが有名です。いつも勉強させていただいてます。 補助関数 ノイズの生成に使用する関数をいくつか準備しておきます。 // vec2の入力から0.0～1.0の乱数を出力する float random(vec2 v) { // この実装が伝統的によく使われる //
UnityのCompute ShaderでCurl Noiseを実装（流体編） - e.blog
概要 ソースコード 今回の記事で書くこと 大まかな解説 非圧縮性を確保する 用語解説 ベクトル場 カール（Curl・rot） ramp関数 本題 ノイズを生成する カールノイズのカーネル 次回予告 - 衝突判定 概要 今回は「流体編」と題しました。 というのも、発表されたカールノイズ自体には剛体との当たり判定を行う部分の記載もあるのですが、そこがうまく動いてないのでまずは流体部分の説明にフォーカスして書いていこうと思います。 Curl Noice。なんとなく流体っぽく見えるノイズ。 Curlとは「カール」、つまり「渦巻く」という意味からつけられた名前だそう。 （自分の浅い知識ながら）もう少し具体的に言うと、ベクトル場を回転（Curl）させることで作るノイズ、ということで「Curl Noise」というと思っています。 いつもお世話になっている物理のかぎしっぽさんで、この「ベクトル場の回転」に
バーテックスシェーダーだけで映えるために - Qiita
概要 こんにちは。普段、WebGL(Three.js)をいっぱい使っているukonpowerです。 シェーダーアドベントカレンダー、フラグメントシェーダーを使ったすごい記事がいっぱいありますね... とてもかないそうにないので今回はバーテックスシェーダーに焦点を当て、バーテックスシェーダーだけでいい感じの演出(？)を作るにはどうすればよいかご紹介できたらなと思います。 なおこの記事ではThree.jsで実装しますが、Unityなど他のツールでも役立つよう、出来るだけ考え方をメインに解説したいと思います。 Three.jsとは WebGLを超絶簡単に使えるようにしてくれるウルトラハイパーラッパーライブラリです。 (個人的見解です） Github: https://github.com/mrdoob/three.js 今回使うシーン 今回は以下のようなただの立方体が浮かんでるシーンをバーテック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making of BODA-RIDE
基本の 3D 理論の解説 - ゲーム開発 | MDN
TouchDesigner中級編(5) – TouchDesigner + Shader (GLSL) 入門
