2018-06-17 02:47:14

License: MIT License

Fork: 1

Fav: 0

View: 220

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 6 lines
HTML 101 lines
CSS 0 lines

[WebGL] A-Frame を試してみるテスト（BufferGeometry編）（その２）

<script src="https://unpkg.com/aframe@0.8.2"></script>

void main() {
    vColor = vec4(color, 1.0);
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}
</script>

void main() {
    gl_FragColor = vColor;
}
</script>

init: function () {
    var data = this.data;
    var el = this.el;

// 正方形の座標データを用意
    //             1.0 y 
    //              ^  -1.0 
    //              | / z
    //              |/       x
    // -1.0 -----------------> +1.0
    //            / |
    //      +1.0 /  |
    //           -1.0
    // 
    //        [0]------[1]
    //         |      / |
    //         |    /   |
    //         |  /     |
    //        [2]------[3]
    //
    var vertexPositions = [
        [-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
    ];
    var vertices = new Float32Array(vertexPositions.length * 3);
    for (var i = 0; i < vertexPositions.length; i++) {
        vertices[i * 3 + 0] = vertexPositions[i][0];
        vertices[i * 3 + 1] = vertexPositions[i][1];
        vertices[i * 3 + 2] = vertexPositions[i][2];
    }

var vertexColors = [
        [1.0, 0.0, 0.0], // v0
        [0.0, 1.0, 0.0], // v1
        [0.0, 0.0, 1.0], // v2
        [1.0, 1.0, 0.0]  // v3
    ];
    var colors = new Float32Array(vertexColors.length * 3);
    for (var i = 0; i < vertexColors.length; i++) {
        colors[i * 3 + 0] = vertexColors[i][0];
        colors[i * 3 + 1] = vertexColors[i][1];
        colors[i * 3 + 2] = vertexColors[i][2];
    }
    
    var indices = new Uint16Array([
        2, 0, 1, // v2-v0-v1
        2, 1, 3  // v2-v1-v3
    ]);
    
    this.geometry = new THREE.BufferGeometry();
    this.geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
    this.geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
    this.geometry.setIndex(new THREE.BufferAttribute(indices, 1));
    
    this.material = new THREE.ShaderMaterial({
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent,
        side: THREE.DoubleSide,
        vertexColors: THREE.VertexColors
    });

this.mesh = new THREE.Mesh(this.geometry, this.material);

el.setObject3D('mesh', this.mesh);
  }
});
</script>

<a-scene>
    <a-entity example position="0 1.5 -1"></a-entity>
</a-scene>

[WebGL] A-Frame を試してみるテスト（BufferGeometry編）（その２）

[WebGL] A-Frame を試してみるテスト（BufferGeometry編）（その２）＜対応した点＞・組み込みシェーダでなく ShaderMaterial() を用いて自前のシェーダを使うよう対応。・色設定用の頂点バッファを追加。＜参考＞ ■ [WebGL] three.js を試してみるテスト（BufferGeometry編）（その２） http://jsdo.it/cx20/vryW ■ 各種 WebGL ライブラリで基本図形を表示してみる - Qiita http://qiita.com/cx20/items/0fa19c96aa6470d98807 // forked from cx20's "[WebGL] A-Frame を試してみるテスト（BufferGeometry編）" http://jsdo.it/cx20/W5J3 // forked from cx20's "[WebGL] A-Frame を試してみるテスト（改）" http://jsdo.it/cx20/iFPs // forked from cx20's "[WebGL] A-Frame を試してみるテスト" http://jsdo.it/cx20/AOwl // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC // nothing  <script src="https://unpkg.com/aframe@0.8.2"></script> <script id="vs" type="x-shader/x-vertex"> varying vec4 vColor; void main() { vColor = vec4(color, 1.0); vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition; } </script> <script id="fs" type="x-shader/x-fragment"> precision mediump float; varying vec4 vColor; void main() { gl_FragColor = vColor; } </script> <script> AFRAME.registerComponent('example', { schema: { }, init: function () { var data = this.data; var el = this.el; // 正方形の座標データを用意 // 1.0 y // ^ -1.0 // | / z // |/ x // -1.0 -----------------> +1.0 // / | // +1.0 / | // -1.0 // // [0]------[1] // | / | // | / | // | / | // [2]------[3] // var vertexPositions = [ [-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 ]; var vertices = new Float32Array(vertexPositions.length * 3); for (var i = 0; i < vertexPositions.length; i++) { vertices[i * 3 + 0] = vertexPositions[i][0]; vertices[i * 3 + 1] = vertexPositions[i][1]; vertices[i * 3 + 2] = vertexPositions[i][2]; } var vertexColors = [ [1.0, 0.0, 0.0], // v0 [0.0, 1.0, 0.0], // v1 [0.0, 0.0, 1.0], // v2 [1.0, 1.0, 0.0] // v3 ]; var colors = new Float32Array(vertexColors.length * 3); for (var i = 0; i < vertexColors.length; i++) { colors[i * 3 + 0] = vertexColors[i][0]; colors[i * 3 + 1] = vertexColors[i][1]; colors[i * 3 + 2] = vertexColors[i][2]; } var indices = new Uint16Array([ 2, 0, 1, // v2-v0-v1 2, 1, 3 // v2-v1-v3 ]); this.geometry = new THREE.BufferGeometry(); this.geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); this.geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); this.geometry.setIndex(new THREE.BufferAttribute(indices, 1)); this.material = new THREE.ShaderMaterial({ vertexShader: document.getElementById('vs').textContent, fragmentShader: document.getElementById('fs').textContent, side: THREE.DoubleSide, vertexColors: THREE.VertexColors }); this.mesh = new THREE.Mesh(this.geometry, this.material); el.setObject3D('mesh', this.mesh); } }); </script> <a-scene> <a-entity example position="0 1.5 -1"></a-entity> </a-scene>

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

cx20

URL
http://profile.hatena.ne.jp/cx20/

プログラマ（マイクロソフト系の言語を使用することが多いです。） 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

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/Qlbz/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

[WebGL] A-Frame を試してみるテスト（Buff

cx20

7/159/0
- A-Frame
- GLSL
- WebGL
- WebVR
- art&design
- html5_elements&api
- library&test

[WebGL] A-Frame を試してみるテスト（BufferGeometry編）（その２）

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked