WebGL

1/25ページ

WebVRでVR画面に切り替えできなくなった時に確認するブラウザの設定

WebVRを実装するにあたって、ライブラリ、フレームワークにはいくつも選択肢がありますので、使い始めは複数のライブラリを交互に試用してみるというケースが多いと思われます。 この記事は私がAndroid8.0でモバイル版Chrome(67.0.3396.87)を使用して 1. ThreeJS + WebVR Boilerplate 2. A-Frame 3. React 360(React VR) […]

軽い気持ちで調べ始めたWebGL/GLSLが想像してたよりあまりに難しすぎたので0

WebGLとか何も知らない人なもので 色々調べてここにメモとして残すと後から振り返って「頑張ってたかもな」なんて思えるかもしれないので。 最初はhtmlのcanvas使って線とかアニメーションさせたかっただけなんだけど ちょっと前の私はHPを作るぞと息巻いていて、自分のHPに線沢山アニメーションさせてモアレ作りたいなと思っていたので使って出来るだろなんて軽く考えていました。 (なんでモアレ作りたい […]

レイマーチングでthree.jsのPerspectiveCameraを使う

WebGLでレイマーチングするときでも、three.jsのTHREE.OrbitControlsなどでカメラを制御できたら便利だろうなと思って調べました。 先に結果をお見せすると、こんな感じです。上がTHEEE.OrbitControlsで制御したTHREE.PerspectiveCameraで普通にレンダリングしたもので、下が同じカメラの情報を基にレイマーチングでレンダリングしたものです。色以外 […]

three.jsで背景をフラグメントシェーダーでつくる

three.jsで以下のように背景をフラグメントシェーダーで作る方法です。 https://aadebdeb.github.io/study-three.js/background-shader.html 背景とするオブジェクトは通常のオブジェクトと同じようにTHREE.Meshで作成します。このときに大事なことはマテリアルのdepthTestプロパティをfalseにして深度テストをしないようにす […]

ブラウザに立方体を表示させる。

ご挨拶 どうも。社会人1年目の若輩者です。普段はC++でアプリ開発をしているガルパンおじさんです。最終章第一話を聖地立川で観てきましたが、控えめに言って最高でした。ちなみに冷泉さん推しです。 まあ前置きはこのくらいにして本題ですが、この記事では私が最近遊んでいるWebGLについて書きたいと思います。といってもWebGLを直接いじるのは大変なので、簡単に利用できるThree.jsというJavaScr […]

1 25