Forked from: cx20's [簡易版] 30行で WebGL を試してみるテスト View Diff (45)

Fork
3
Fav
0
View
2473
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 60 lines
  • HTML 18 lines
  • CSS 11 lines
[簡易版] WebGL で四角形を描いてみるテスト
※ 初期化処理やエラー処理を省いた簡易版のコードになります。ご注意ください。

<対応した点>
・gl.TRIANGLES → gl.TRIANGLE_STRIP を使うよう変更
 //gl.drawArrays(gl.TRIANGLES, 0, 3);
 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

 triangle strip(帯状連結三角形)は、連続した三角形を作成する場合に少ない頂点数で作成することが出来ます。

 <頂点データ>
  -0.5, 0.5, 0.0, // v0
  0.5, 0.5, 0.0, // v1
  -0.5,-0.5, 0.0, // v2
  0.5,-0.5, 0.0 // v3
 
<作成される三角形>
  v0,v1,v2
  v1,v2,v3

<参考>
■ WebGL Lesson 1 - 三角形と四角形
https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-1

■ WebGLで四角形を描いてみるテスト
http://jsdo.it/cx20/bsbJ
  • [簡易版] WebGL で四角形を描いてみるテスト
  • [簡易版] WebGL で四角形を描いてみるテスト

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

cx20

Author

プログラマ(マイクロソフト系の言語を使用することが多いです。) JavaScript のライブラリを色々と試して遊んでます。

■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807

■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935

■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test

■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js

■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by