Submit Search
Upload
はじめてのぽりごん
•
Download as PPTX, PDF
•
0 likes
•
440 views
naohito maeda
Follow
"Hello World" of WebGL. Tried drawing a polygon for the first time.
Read less
Read more
Software
Report
Share
Report
Share
1 of 14
Download now
Recommended
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
NSMutableArrayの罠
NSMutableArrayの罠
teencoders
MDX and Next.js
MDX and Next.js
Kazuhiro Hara
最近見つけたアプリ - @ minatoeod 20170617
最近見つけたアプリ - @ minatoeod 20170617
phain u
MDX with Next.js
MDX with Next.js
Kazuhiro Hara
[Intermediate 01] イントロダクション / Bitcoin を動作させる
[Intermediate 01] イントロダクション / Bitcoin を動作させる
Yuto Takei
[Basic 6] DNS / ソケット通信 / その他
[Basic 6] DNS / ソケット通信 / その他
Yuto Takei
Recommended
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
NSMutableArrayの罠
NSMutableArrayの罠
teencoders
MDX and Next.js
MDX and Next.js
Kazuhiro Hara
最近見つけたアプリ - @ minatoeod 20170617
最近見つけたアプリ - @ minatoeod 20170617
phain u
MDX with Next.js
MDX with Next.js
Kazuhiro Hara
[Intermediate 01] イントロダクション / Bitcoin を動作させる
[Intermediate 01] イントロダクション / Bitcoin を動作させる
Yuto Takei
[Basic 6] DNS / ソケット通信 / その他
[Basic 6] DNS / ソケット通信 / その他
Yuto Takei
シェーダーしよっ☆ Let's play shaders!
シェーダーしよっ☆ Let's play shaders!
Yuichi Higuchi
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
WebGL and Three.js
WebGL and Three.js
yomotsu
Cocos2dshader devcon jp_20120621_en
Cocos2dshader devcon jp_20120621_en
Ricardo Quesada
Cocos2d Shaders
Cocos2d Shaders
Yuichi Higuchi
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
Deep Learning JP
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
20141017 introduce razor
20141017 introduce razor
do_aki
Grailsのススメ(仮)
Grailsのススメ(仮)
Tsuyoshi Yamamoto
Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例
tecopark
TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介
bitbank, Inc. Tokyo, Japan
G * magazine 0
G * magazine 0
Tsuyoshi Yamamoto
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
Getting started with node.js
Getting started with node.js
kouzouman
Programming camp 2008, Codereading
Programming camp 2008, Codereading
Hiro Yoshioka
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
HTML5
HTML5
smallworkshop
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
JPCERT Coordination Center
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
More Related Content
Similar to はじめてのぽりごん
シェーダーしよっ☆ Let's play shaders!
シェーダーしよっ☆ Let's play shaders!
Yuichi Higuchi
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
WebGL and Three.js
WebGL and Three.js
yomotsu
Cocos2dshader devcon jp_20120621_en
Cocos2dshader devcon jp_20120621_en
Ricardo Quesada
Cocos2d Shaders
Cocos2d Shaders
Yuichi Higuchi
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
Deep Learning JP
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
20141017 introduce razor
20141017 introduce razor
do_aki
Grailsのススメ(仮)
Grailsのススメ(仮)
Tsuyoshi Yamamoto
Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例
tecopark
TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介
bitbank, Inc. Tokyo, Japan
G * magazine 0
G * magazine 0
Tsuyoshi Yamamoto
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
Getting started with node.js
Getting started with node.js
kouzouman
Programming camp 2008, Codereading
Programming camp 2008, Codereading
Hiro Yoshioka
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
HTML5
HTML5
smallworkshop
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
JPCERT Coordination Center
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
Similar to はじめてのぽりごん
(20)
シェーダーしよっ☆ Let's play shaders!
シェーダーしよっ☆ Let's play shaders!
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
WebGL and Three.js
WebGL and Three.js
Cocos2dshader devcon jp_20120621_en
Cocos2dshader devcon jp_20120621_en
Cocos2d Shaders
Cocos2d Shaders
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
[DL輪読会]GraphSeq2Seq: Graph-Sequence-to-Sequence for Neural Machine Translation
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
20141017 introduce razor
20141017 introduce razor
Grailsのススメ(仮)
Grailsのススメ(仮)
Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例
TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介
G * magazine 0
G * magazine 0
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Groovy base gradle_20130309
Groovy base gradle_20130309
Getting started with node.js
Getting started with node.js
Programming camp 2008, Codereading
Programming camp 2008, Codereading
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
HTML5
HTML5
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
Apache Sling におけるサービス運用妨害(無限ループ)の脆弱性
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
はじめてのぽりごん
1.
はじめてのぽりごん
2.
こんにちは Maeda Naohito @mdNHT Web Frontend
Engineer 3D関係: はるか昔にPapervision3d(as3)をさわったくら い
3.
4.
OR
5.
材料 ●<canvas> ●メインのjs ●vertex shader (glsl) ●fragment
shader (glsl) これらをまとめてhtmlに入れます。 jsとして実行されないようにtypeを指 定
6.
全体の流れ context取得 シェーダーのコンパイルとリンク 頂点バッファの作成と登録 座標変換Matrixの作成と登録 レンダリング
7.
webGLコンテクストの取得 1.canvas.getContext(‘webgl’); 2.キャンバスをクリアする
8.
Shaderの初期化 Vertex shader、Fragment shaderの2つ 1.ソースを読み込む 2.シェーダーの作成する 3.ソースをシェーダーに割り当てる 4.コンパイルする
9.
Vertex Shader ●頂点情報を扱うシェーダ ●gl_Position(組み込み変数)を設定する。 ●attribute :
頂点ごとに違う値 ●uniform : 一回の処理を通して同じ値 ●varying : Fragment Shaderに渡す値 ●constant : 定数
10.
Fragment Shader ●ピクセル情報を扱う ●gl_FragColorを設定する
11.
プログラムオブジェクトを作る 1.プログラムオブジェクト作成 2.シェーダーを割り当て 3.プログラムオブジェクトをリンク 4.プログラムの有効化
12.
モデルの作成と登録 1.頂点データを準備する 2.バッファオブジェクトにデータをまとめる 3.準備したバッファをバインドする 4.GPUへ送信する属性を有効化する 5.GPUへ送信する
13.
座標変換 ●行列計算ライブラリが必要 ●モデル変換(モデルの移動・回転・拡縮) ●ビュー変換(視点の移動・回転・拡縮) ●プロジェクション変換(スクリーンに投影) これらの変換行列をshaderに渡す
14.
レンダリング ●キャンバスのクリア ●drawArrays()でバッファ上に描画 ●flush()で実際の描画
Download now