Forked from: cx20's forked: [WebGL] Hilo3d を試してみるテスト（その２） View Diff (5) forked: [WebGL] Hilo3d を試してみるテスト（その２） 06wjin1 Follow 2017-11-23 02:14:52 License: MIT License Fork0 Fav0 View420 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 79 lines HTML 24 lines CSS 11 lines forked: [WebGL] Hilo3d を試してみるテスト（その２） // forked from cx20's "forked: [WebGL] Hilo3d を試してみるテスト（その２）" http://jsdo.it/cx20/G3yM // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（その２）" http://jsdo.it/cx20/KID2 // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（調整中）" http://jsdo.it/cx20/gwMA // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC var camera = new Hilo3d.PerspectiveCamera(); var stage = new Hilo3d.Stage({ container: document.getElementById('container'), camera: camera, clearColor: new Hilo3d.Color(1.0, 1.0, 1.0), width: innerWidth, height: innerHeight }); /* var colors = [ 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0 ]; var geometry = new Hilo3d.PlaneGeometry({ colors: new Hilo3d.GeometryData(new Float32Array(colors), 3) }); */ // 1.0 y // ^ -1.0 // | / z // |/ x // -1.0 -----------------> +1.0 // / | // +1.0 / | // -1.0 // // [0]------[1] // | / | // | / | // | / | // [2]------[3] // var positions = [ -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 colors = [ 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 indices = [ 2, 1, 0,// v2-v0-v1 2, 3 ,1 // v2-v1-v3 ]; var geometry = new Hilo3d.Geometry({ vertices: new Hilo3d.GeometryData(new Float32Array(positions), 3), colors: new Hilo3d.GeometryData(new Float32Array(colors), 4), indices: new Hilo3d.GeometryData(new Uint16Array(indices), 5) }); var mesh = new Hilo3d.Mesh({ geometry: geometry, material: new Hilo3d.ShaderMaterial({ attributes:{ a_position: 'POSITION', a_color: 'COLOR_0' }, fs: document.getElementById('fs').textContent, vs: document.getElementById('vs').textContent }) }); stage.addChild(mesh); var ticker = new Hilo3d.Ticker(60); ticker.addTick(stage); ticker.start(true); <script src="https://cx20.github.io/gltf-test/libs/Hilo3d/1.5.8/Hilo3d.js"></script> <script type="x-shader/x-vertex" id="vs"> precision HILO_MAX_VERTEX_PRECISION float; attribute vec3 a_position; attribute vec3 a_color; varying vec3 vColor; void main(void) { vColor = a_color; gl_Position = vec4(a_position, 1.0); } </script> <script type="x-shader/x-fragment" id="fs"> precision HILO_MAX_FRAGMENT_PRECISION float; varying vec3 vColor; void main(void) { gl_FragColor = vec4(vColor, 1.0); } </script> <div id="container"></div> forked: [WebGL] Hilo3d を試してみるテスト（その２） * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #fff; font: 30px sans-serif; } // forked from cx20's "forked: [WebGL] Hilo3d を試してみるテスト（その２）" http://jsdo.it/cx20/G3yM // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（その２）" http://jsdo.it/cx20/KID2 // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（調整中）" http://jsdo.it/cx20/gwMA // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC var camera = new Hilo3d.PerspectiveCamera(); var stage = new Hilo3d.Stage({ container: document.getElementById('container'), camera: camera, clearColor: new Hilo3d.Color(1.0, 1.0, 1.0), width: innerWidth, height: innerHeight }); /* var colors = [ 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0 ]; var geometry = new Hilo3d.PlaneGeometry({ colors: new Hilo3d.GeometryData(new Float32Array(colors), 3) }); */ // 1.0 y // ^ -1.0 // | / z // |/ x // -1.0 -----------------> +1.0 // / | // +1.0 / | // -1.0 // // [0]------[1] // | / | // | / | // | / | // [2]------[3] // var positions = [ -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 colors = [ 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 indices = [ 2, 1, 0,// v2-v0-v1 2, 3 ,1 // v2-v1-v3 ]; var geometry = new Hilo3d.Geometry({ vertices: new Hilo3d.GeometryData(new Float32Array(positions), 3), colors: new Hilo3d.GeometryData(new Float32Array(colors), 4), indices: new Hilo3d.GeometryData(new Uint16Array(indices), 5) }); var mesh = new Hilo3d.Mesh({ geometry: geometry, material: new Hilo3d.ShaderMaterial({ attributes:{ a_position: 'POSITION', a_color: 'COLOR_0' }, fs: document.getElementById('fs').textContent, vs: document.getElementById('vs').textContent }) }); stage.addChild(mesh); var ticker = new Hilo3d.Ticker(60); ticker.addTick(stage); ticker.start(true); <script src="https://cx20.github.io/gltf-test/libs/Hilo3d/1.5.8/Hilo3d.js"></script> <script type="x-shader/x-vertex" id="vs"> precision HILO_MAX_VERTEX_PRECISION float; attribute vec3 a_position; attribute vec3 a_color; varying vec3 vColor; void main(void) { vColor = a_color; gl_Position = vec4(a_position, 1.0); } </script> <script type="x-shader/x-fragment" id="fs"> precision HILO_MAX_FRAGMENT_PRECISION float; varying vec3 vColor; void main(void) { gl_FragColor = vec4(vColor, 1.0); } </script> <div id="container"></div> * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #fff; font: 30px sans-serif; } use an iframe compat browser, deer 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 Author 06wjin1 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/EGKD/js"></script> art&design GLSL Hilo3d html5_elements&api library&test WebGL Discussion Questions on this code? Tags GLSL Hilo3d WebGL art&design html5_elements&api library&test
