Forked from: cx20's [WebGL] A-Frame を試してみるテスト(BufferGeometry編) View Diff (49) [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) cx20 Follow 2018-06-17 02:47:14 License: MIT License Fork1 Fav0 View427 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 6 lines HTML 101 lines CSS 0 lines [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) <対応した点> ・組み込みシェーダでなく ShaderMaterial() を用いて自前のシェーダを使うよう対応。 ・色設定用の頂点バッファを追加。 <参考> ■ [WebGL] three.js を試してみるテスト(BufferGeometry編)(その2) http://jsdo.it/cx20/vryW ■ 各種 WebGL ライブラリで基本図形を表示してみる - Qiita http://qiita.com/cx20/items/0fa19c96aa6470d98807 [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) // 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 <!-- aframe.js v0.8.2 --> <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> [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) <対応した点> ・組み込みシェーダでなく ShaderMaterial() を用いて自前のシェーダを使うよう対応。 ・色設定用の頂点バッファを追加。 <参考> ■ [WebGL] three.js を試してみるテスト(BufferGeometry編)(その2) 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 <!-- aframe.js v0.8.2 --> <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> use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? [WebGL] A-Frame を試してみるテスト(BufferGeometry編)(その2) <対応した点> ・組み込みシェーダでなく ShaderMaterial() を用いて自前のシェーダを使うよう対応。 ・色設定用の頂点バッファを追加。 <参考> ■ [WebGL] three.js を試してみるテスト(BufferGeometry編)(その2) http://jsdo.it/cx20/vryW ■ 各種 WebGL ライブラリで基本図形を表示してみる - Qiita http://qiita.com/cx20/items/0fa19c96aa6470d98807 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cx20 URLhttp://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 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/Qlbz/js"></script> A-Frame art&design GLSL html5_elements&api library&test WebGL WebVR Discussion Questions on this code? Tags A-Frame GLSL WebGL WebVR art&design html5_elements&api library&test Forked sort by latest page views favorite forked [WebGL] A-Frame を試してみるテスト(Buff cx20 10 373 7/159/0 A-Frame GLSL WebGL WebVR art&design html5_elements&api library&test