WebGLの基本
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
WebGL入門記事：WegGLを使った音響シミュレーション開発経過 - Qiita
この記事はWebGL Advent Calendar 2017 7日目の記事です． はじめに この記事では，WebGLを利用して音響現象をシミュレートする記事です． 昨今，計算力が必要な分野というとディープラーニング，ブロックチェーンのマイニング，CGあたりが頭に浮かびますが，音響解析にも計算力が必要な分野があります．そこで，WebGLを使って音響シミュレータのひな形を作ってみようと思います． TL;DR 3Dは扱いません GPGPU的な話です CPU版プログラムとGPU版プログラムで同じ演算をさせて，作り方を比較します 対象読者 シミュレータを作ってみたい人 HTML / JavaScriptの知識は持っている人 WebGLに興味はあるけど躊躇している人 取り扱う音響現象 音響現象と言っても，信号処理，建築音響，音声，超音波，聴覚，音響教育など幅広い分野に分かれています．ここでは，シミュ
Web技術者よ、Unityを始めよう！Unity WebGL入門──HTML5 Conference 2016セッションレポート
Web技術者よ、Unityを始めよう！Unity WebGL入門──HTML5 Conference 2016セッションレポート 池和田有輔（ユニティ・テクノロジーズ・ジャパン） HTML5 Conference 2016特集・第5弾は、「Unity WebGL入門」です。WebGL正式対応により、ゲームをはじめとしたブラウザコンテンツ制作ツールとして広く使われるようになったUnityの概要及びWebGLへの書き出しについて解説します。 WebGLにも対応したUnityのいま Unityは統合的なインタラクティブコンテンツ制作ツールです。 無料で使えるPersonalから文字通りプロフェッショナルのためのProまで3つのサブスクリプション・プランを用意していますが、根幹となるUnityエディタの機能はどのプランも同一のものとなっており、対応プラットフォームにも違いがありません。つまり、Pe
Rendering SVG Paths in WebGL | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest post by Matt DesLauriers. Matt combined a bunch of techniques and open source modules to build an incredible demo where simple recognizable icons explode into vector triangles only to reform into a completely new icon. Here he talks about some of the
Keep Out! - A WebGL game by the makers of Mozilla BrowserQuest
Keep Out! An action-packed adventure playable for free in your browser. Explore the dungeon, fight monsters and unlock epic weapons!
ENOUGH
Who could be so lucky?\n\nWho comes to a lake for water\nand sees the reflection of the moon.\n\n-Rumi\n
株式会社レインボーロード
株式会社レインボーロードは水圧で空を飛ぶ人類初の乗り物「アクアボード 」に特化したマリンスポーツを事業の主体とし、具体的には体験スポットのご提供・パフォーマーの育成や活躍する場の創出・選手権の主催等を行う会社です。
SculptGL - A WebGL sculpting app
SculptGL is a small sculpting application powered by JavaScript and webGL.
[忙しい人向け] 30行から始めるWebGL - Qiita
WebGL を試そうと思って、ポリゴン１枚書こうとしたら、100行以上のコードを目のあたりにして、挫折した人も多いのではないかと思います。 ただ、初期化処理やエラー処理を省いたら、ポリゴン１枚書く程度であれば、30行程度で行えたりします。 忙しい人向けに、あらゆる贅肉をそぎ落とした簡易版のコードを書いてみました。 ポリゴン１枚を描画する WebGL コード var c, gl; var v = "attribute vec3 position; void main() { gl_Position = vec4(position, 1.0); }"; var f = "precision mediump float; void main() { gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); }"; function initWebGL() { c = do
![[忙しい人向け] 30行から始めるWebGL - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ec533fcecb7dee53aa8f9d5e40d6eaa1895b8a5/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU1JUJGJTk5JUUzJTgxJTk3JUUzJTgxJTg0JUU0JUJBJUJBJUU1JTkwJTkxJUUzJTgxJTkxJTVEJTIwMzAlRTglQTElOEMlRTMlODElOEIlRTMlODIlODklRTUlQTclOEIlRTMlODIlODElRTMlODIlOEJXZWJHTCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjMyOTk3ZGY3YTA1MzMzNjQ0MzA1YTQxMjliNjRmMTE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY3gyMCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2U3MmJiZmUyMWQ3MTcwYjc1ZTFmYmNmNWNmZmIwMjI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8e0b2004fda27a4639f46ffd768d43a8)
Unity 5 の WebGL で外部からテクスチャを与える方法について調べてみた - 凹みTips
はじめに Unity 5 の WebGL 出力で、外部（自分で書いた JavaScript のコード）からテクスチャを与えたいと思い、色々調べてみましたので情報を共有したいと思います。通常の画像をテクスチャとして指定する方法と、base64 エンコードした画像をテクスチャとして指定する方法の２つを紹介します。 Unity 5 の WebGL については以前の記事をご参照ください。 Unity 5 x WebGL について詳しく調べてみた - 凹みTips デモ 後述の「base64 エンコードした画像を与える」の内容になります。Canvas に描いた絵をテクスチャとしてゲーム内で利用する事ができます。 1. 画像をテクスチャとして利用する 自分のサーバに置いてあるテクスチャを反映 以下の様なコードを書いたスクリプトを Cube にアタッチします。 using UnityEngine; us
project-nya.jp - このウェブサイトは販売用です！ - フラッシュ にゃあ にゃんこ プロジェクト ウェブ ジェクト ひろゆき リソースおよび情報
このウェブサイトは販売用です！ project-nya.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、project-nya.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
WebGL開発者必見！ Flash Stage3Dとの比較から見えてくるWebGLのあり方について - ICS MEDIA
12月といえばアドベントカレンダー。今年はWebGLのアドベントカレンダーに私も表明しましたので、テーマ「Flash Stage3Dとの比較から見えてくる WebGLのあり方について」をテーマとして記事を書いてみます。長文ですが、WebGLとStage3Dのそれぞれの技術について特徴をまとめていますので最後までお付き合いくださいませ。 WebGLとStage3Dとは Stage3DとはFlash(Flash PlayerやAdobe AIR)からOpenGL/DirectXを利用することのできる技術です。2011年にリリースされたFlash Player 11 / Adobe AIR 3に搭載され、多くの商用コンテンツで利用されてきました。 Nissan Stage Juke (Flash Stage3D 事例) http://nissan-stagejuk3d.com WebGLはプラグ
光 Advent Calendar 2014 2.5日目「シャイニング・フォトン【滅】」 - FICC Workbook
光 Advent Calendar is 何弊社スタッフも多数参加している謎のアドベントカレンダー「光 Advent Calendar 2014」。何が光で何が闇なのかは誰にもわかりませんが、Web界隈で光と闇が両方そなわり最強に見える強者達が集うアドベントカレンダーであります。で、弊社の川崎くんがPixi.jsでサンプルを作ってました。 シャイニング・フォトンって感じだ | rrlrlrll-org | おさしみにたんぽぽをのせるブログ 何かこう…Pixi.jsらしい部分をさらに生かしたいね、ということで私なりに手を加えてみることにします。アドベントカレンダーネタはてめえのブログでやれよ！と言われそうですがテックっぽいネタなのでWorkbookで扱います。そもそも自分も19日に光 Advent Calendar書く予定だしな！ Pixi.js is 何Pixi.js - 2D webGL
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spector.js demos & documentation
GitHub - yomotsu/gl-slideshow: A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects
Cat vs ball of wool
Osgjs.org - Kumpulan Berita Terkini Paling Update
Neymar Jr. CRAZY SKILLS | Panasonic
frame.js / editor
GitHub - idflood/ThreeNodes.js: vvvv "clone" in javascript/webgl
