[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（６） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（６）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（５） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（６） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed269ed7175878f1dce1f3d1969cf6dffd2365d/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTk2JUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02ZjE3M2UyNWQ1MWMwOWUzMzE1N2JlOTFjODczODUzNw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG94YXMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZjJmN2EwYWU0MmZiNDhmZGIyZjE0NjdjZDI4YmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D021de13c0f1f775e64e17cd783aaa92d)
独学で 1 ヶ月間 OpenGL を学んで得た基礎知識のまとめ ~ 2D 編 ~ · けんごのお屋敷
OpenGL。その単語の響きだけで素晴らしく魅力的に思える 3D コンピューターグラフィックスライブラリは、これまで何人もの駆け出しゲームプログラマーに幾度と無く挫折を味わわせてきた。「ゲーム作るならやっぱり高速に描画できる OpenGL でしょ。でも自分が作るゲームに 3D はいらないし、しかも難しそうだし、別に 2D 描画だけできればいいや」 と、軽い気持ちで手を出したのが運の尽き、世の中そんなに甘くはなかった。OpenGL というその難攻不落城は私達の進む道を阻むように高々とそびえ立っている。 OpenGL がコレほどまでに取っ付きにくいのは 気軽に Hello World できない からなんじゃないかと思う。OpenGL の場合だとそれは何かしら 1 つの図形を表示することにあたるのかな。でもたったそれだけなのに、覚えることが山ほどありすぎて全然本題にたどり着くことができないし、O
GLSL で光の点をぐるぐるアニメーションさせるやつ書いてみた - 凹みTips
はじめに 最近 OpenGL ES 2.0 触っていてシェーダに興味を持ったのでやってみました。 参考 以下のサイトで勉強させて頂きました。 GLSLで簡単2Dエフェクト « demoscene.jp ここで紹介されている GLSL Sandbox で WebGL ベースでリアルタイムにシェーダの結果を確かめられるので利用させて頂きました。 http://glsl.heroku.com/ 結果 http://glsl.heroku.com/e#7720.0 解説 解説というのもおこがましいですが…、要は gl_FragColor に与える vec4 を現在のピクセル位置 gl_FragCoord や uniform 変数として与えられている resolution や time を利用しながらゴリゴリ作るわけです。 しかしながら、Sandbox の gallery から色々なサンプルコードを
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5961533c3670f06ef6ee1ec9e6efa3f170352c71/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkyJUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmU0M2NiYjdjZDNkZTA4MTE3MjEyMzIwYTAzMzBhZA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG94YXMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZjJmN2EwYWU0MmZiNDhmZGIyZjE0NjdjZDI4YmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc8b3ac61ed5ebd35f0f5a30447c94a13)
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
CANNON.jsでContactMaterialを使う - Qiita
CANNON.jsでは剛体同士の衝突時の反応を、CANNON.MaterialとCANNON.ContactMaterialというマテリアルを使って設定することが出来ます。（例えばつるつるすべる氷の上、みたいなことも表現できます） Three.jsでは3Dオブジェクトの質感などを表現するマテリアル。 物理エンジンでは衝突時の質感を表す、と考えるといいでしょう。 （例えば氷だったらつるつるの質感、ざらざらな質感は摩擦が大きい、とか） マテリアルを使った設定は以下の手順で行います。 CANNON.Materialを生成 生成したマテリアルを、そのマテリアルを持たせたい剛体を生成する際に引数に指定する 別のCANNON.Materialを生成 別のマテリアルを設定したい剛体に設定する（2と同じ） 生成したふたつのマテリアルが接触した際にどう反応するかをCANNON.ContactMaterial
Blenderとthree.jsを使って行うモーフィングアニメーション | KnockKnock
今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。 ソースコードは、以下よりダウンロード頂けます。 ソースコード モデリングとアニメーションの作成にBlenderを使っています。Blenderはオープンソース（無償）の3DCG制作ツール で、現時点での最新バージョンは2.72bになります。3DCG制作ツールはMayaや3dsMaxやLightwave3D等、高機能なプロ用ソフトが多くありますが、どれもそれなりの価格になります。Webコンテンツでの利用においては、レンダリングはあくまでブラウザ上なので、使う機能と言えば、せいぜいモデリングとアニメーション程度になり、高価で高機能な3DCG制作ツールは、オーバースペックだと思います。Bl
剛体シミュレーションをまとめてみる - Qiita
今度やる勉強会に向けて、剛体シミュレーションの概要をまとめていきます。 とはいえ、本格的に説明はできないので（理解不足で）、概要と今、自分が理解している範囲をまとめていきます。 知識としては、書籍を読んで把握した範囲なので若干偏りがあると思います。参考にした書籍は一番下に掲載しています。 （なので、なにか間違っている点などあればコメントいただけるとうれしいです） こちらの理論などを元に、実際に2Dの物理エンジンを自作してみました。その過程で参考にしたものや躓いた点などをまとめた記事も書いているので、こちらもよかったら参考にしてみてください。→ 自作2D物理エンジンを作った話 概要 剛体シミュレーションは「パイプライン」という、各種の計算を行うステージを段階的に分けたものを通って、与えられた力（例えば重力）からの位置計算が行われます。 それぞれのステージの概要は以下の通りです。 シミュレーシ
Three.js マテリアルのプロパティ（高度な質感表現） - Three.jsを使って、作ってみた
今回は、Three.jsの「マテリアル（材質）のプロパティ」について書きます。 マテリアル（材質）のプロパティを設定することで、さまざまな質感を表現することができます。 設定のやり方もとても簡単です。この辺りはThree.jsの良い所の一つだと思います。 ※マテリアル（プロパティ）って、何？？？ マテリアルのプロパティの種類は、豊富にあります。 軽く上げると、 color specular shininess ambient emissive metal side transparent opacity blending depthTest これ以外にも、まだまだあります（笑） 今回は、これらをやりたいと思います。 side color ambient specular shininess metal 残りは、また今度、書きます。 ①side これは、物体（ジオメトリ）の表面だけを描画する
CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG
CANNON.jsを使って3Dに物理演算を持ち込む カテゴリ：WebGL 2013年12月 8日 09:09 さて、今回はGraphical Web Advent Calendar 2013の第7日目です。 Graphical Webということで、前回、スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説で紹介したサイコロのデモで使用したCANNON.jsについて書いてみたいと思います。 CANNON.jsとは CANNON.jsは、物理演算を提供してくれるいわゆる「物理エンジン」ライブラリです。 3D向けの物理エンジンライブラリはいくつかあり、有名なのは「ammo.js」というものがあります。 これは、物理エンジンの（おそらく）デファクトスタンダードとも呼べる「Bullet（弾丸）」というエンジンがあり、それをJavaScriptに変換したものです。 余談ですが、Bulletに
CANNON.jsについてのメモ - Qiita
CANNON.jsとは？ CANNON.jsは、JavaScript製の軽量な物理エンジンです。 Three.jsにインスパイアされていて、Three.jsの構文に非常に似ています。 物理演算結果は、以下のように簡単にThree.jsのオブジェクトにコピーすることができるようになっています。 cannonObj.position.copy(threeObj.position); cannonObj.quaternion.copy(threeObj.quaternion); cannonObj.addEventListener("collide", function(e) { alert("The object just collided with the ground!"); console.log("Collided with body:", e.with); console.log("
三次元物理演算エンジン、Cannon.jsを使ってみた。 | KnockKnock
以前、Physijs を使って、three.jsの三次元物理演算プラグインPhysijsを使ってみた。という記事を上げましたが、今回は同じ三次元物理演算ですが、多機能でThree.jsとも相性がいいCannon.jsを使ってみました。 GitHubを見てみると、2014年9月にv0.6.0にアップデートしているようです。10月も絶賛コミット中みたいですね。以前見たときよりもサンプルが増えていますし、以前なかったドキュメンテーションも追加されました。アップデートに伴って、仕様の若干の変更がありましたので、現時点でネット上にあるCannon.jsのコードは、v0.6.0ではそのままでは動きませので、ご注意ください。 /demos/内にコードサンプルは沢山あるのですが、実は非常に使いづらいです。というのも/build/cannon.demo.jsというデモ用にカスタマイズされたJSのコードありき
Raycasterの当たり判定で壁をつくる - not good but great
demo W/A/S/Dまたは方向キーで移動、スペースキーでジャンプして階段を登ることが出来る。階段の床と壁の当たり判定を理解することに苦労した。 Rayを用いた3Dの当たり判定 Rayを用いて判定する。参考ページを見てもらうと理解しやすいと思う。 日記 | ヨモツネット http://tmlife.net/programming/javascript/threejs-picking.html ざっくり言うと(説明するのが難しいw)、二次元平面上の一点から奥へ光線(Ray)を引いて、Rayの延長上に物体があるかどうか判定する。 //レイ ray = new THREE.Raycaster(); //床方向 ray.ray.direction.set(0,-1,0); raywall = new THREE.Raycaster(); //壁の手前 raywall.ray.direction.
【３】Cubeで遊ぼう！ 経路探索編 - はじめてのthree.js | Xlune::Blog
はじめに 前回の記事ではthree.jsのCubeを迷路内で歩かせるものを作りました。 今回は別パターンの移動方法、経路探索を利用したマウスクリックベースの移動デモをやってみます。 下記は、今回用に書いたJSコードです。その他汎用ライブラリと合わせて読み込んでください。 FieldGenerator.js FieldStage.js MrCube.js RouteSearch.js フィールド生成 前回までは迷路が舞台でしたが、今回はマウスクリックベースの移動なので、戦略ゲームのようなフィールドを用意することにしました。 [Demo] Square_001 (WebGLRenderer or CanvasRenderer) [JSソース] マウスドラッグでフィールドの回転、マウスホイールでズームが行えます。 マウスのヒット判定 まずやらなければいけないのは、フィールドのどこをクリックしてい
【WebGL特集】第4回：Blenderでモデル出力｜株式会社モックス
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。最新バージョンではJsonモデルの読み込みはできなくなっております。 【前記事】 【WebGL特集】第1回：WebGLって何？ 【WebGL特集】第2回：回転する立方体 【WebGL特集】第3回：カメラをグリグリ 前回までは、CGソフトを使わず、three.jsのチカラのみで３Dオブジェクトを出力していました。 今回はBlenderというフリーの3DCGソフトを使い、自作のオブジェクトモデルをコンバートし出力する方法を解説します。 １、なぜBlenderなのか 2018年時点ではwebGLと最も相性のいい3DCGソフトはBlenderです。モデルのみであれば一応、各ソフトにwebGL出力用のプラグインなり、Collada出力なり、何かしらの手段がないことはないのですが、バグやエ
圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 最近バランスボールで仕事してます。エンジニアののびすけです。 最近はHTML5が何かと話題になっていますね。今までWebブラウザの標準機能で実現できなかったことができるようになるということで注目されています。でも大抵の場合、HTML5とは広義で、JavaScriptやCSSも含めた意味合いのことが多いです。 今日は、そんなHTML5のAPIの1つであるWebGLを使ったサイトやデモを紹介したいと思います。WebGLはWebブラウザ上でプラグインなどのインストールなしで3D表現を行える技術です。 ※WebGLはPCブラウザではIE10以前のバージョンに未対応、そしてスマートフォンブラウザでも閲覧できないので、それ以外のブラウザで見てください。 特にこだわりがなければGoogle Chromeでの閲覧が好ましいです。また、WebGLの描画はPCに掛かる負荷が大きいので高いマシンス
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rarietta/WebGL: This project explores GLSL and WebGL in two parts: The first part of this project implements a series of GLSL vertex shaders as part of a WebGL demo. I have created three dynamic wave animation using code that runs entirely on the
Karim Maaloul on CodePen
Oimo.js