2018-05-25 02:58:21

License: MIT License

Fork: 2

Fav: 0

View: 358

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 104 lines
HTML 8 lines
CSS 12 lines

[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）

// forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その４）（調整中）" http://jsdo.it/cx20/4bHc
// forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その３）（調整中）" http://jsdo.it/cx20/89Fn
// forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その２）（調整中）" http://jsdo.it/cx20/Gldx
// forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（調整中）" http://jsdo.it/cx20/Qr7c
// forked from cx20's "[WebGL] GLBoost + glTF Loader を試してみるテスト（その１）" http://jsdo.it/cx20/G5nJ
// forked from cx20's "[WebGL] GLBoost + ObjLoader を試してみるテスト" http://jsdo.it/cx20/8qQl
// forked from cx20's "[WebGL] GLBoost + vox.js を試してみるテスト" http://jsdo.it/cx20/2Nrf
// forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）（その３）" http://jsdo.it/cx20/Elgc
// forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）（その２）" http://jsdo.it/cx20/Uvah
// forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）" http://jsdo.it/cx20/KXXM
// forked from cx20's "[WebGL] GLBoost を試してみるテスト（phina.js編）" http://jsdo.it/cx20/SmrF
// forked from cx20's "[WebGL] GLBoost を試してみるテスト" http://jsdo.it/cx20/SWec
// forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC

let canvas = document.getElementById("world");
let width = window.innerWidth;
let height = window.innerHeight;

let glBoostContext = new GLBoost.GLBoostMiddleContext(canvas);
let renderer = glBoostContext.createRenderer({
    clearColor: {
        red: 0.6,
        green: 0.6,
        blue: 0.6,
        alpha: 1
    }
});

renderer.resize(width, height);

let scene = glBoostContext.createScene();

let pointLight = glBoostContext.createPointLight(new GLBoost.Vector3(1.0, 1.0, 1.0));
pointLight.translate = new GLBoost.Vector3(10, 10, 10);
scene.addChild(pointLight);
let camera = glBoostContext.createPerspectiveCamera({
    eye: new GLBoost.Vector3(0.0, 0.0, 3.0),
    center: new GLBoost.Vector3(0.0, 0.0, 0.0),
    up: new GLBoost.Vector3(0.0, 1.0, 0.0)
}, {
    fovy: 75.0,
    aspect: width/height,
    zNear: 0.1,
    zFar: 3000.0
});
camera.cameraController = glBoostContext.createCameraController();
//camera.cameraController.zFarAdjustingFactorBasedOnAABB = 3;
scene.addChild(camera);

//let gridGizmo = glBoostContext.createGridGizmo(16, 16, true, true, false, new GLBoost.Vector4(1, 1, 1, 1));
//scene.addChild(gridGizmo);

let axisGizmo = glBoostContext.createAxisGizmo(4);
scene.addChild(axisGizmo);

let gtime = 0;
let glTF2Loader = GLBoost.GLTF2Loader.getInstance();
let modelConverter = GLBoost.ModelConverter.getInstance();
let scale = 0.1;
//let url = "https://cdn.rawgit.com/KhronosGroup/glTF-WebGL-PBR/817404a4/models/Triangle/glTF/Triangle.gltf";
//let url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/7268f989/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf";
//let url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/395358db/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf"
//var url = "https://cdn.rawgit.com/cx20/gltf-test/7e912826/tutorialModels/TextureSettingsTest/glTF/TextureSettingsTest.gltf";
//let url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/76dfc928/models/gltf/2.0/EmaSimpleSkin_blender/glTF/EmaSimpleSkin_blender.gltf";
//let url = "https://cdn.rawgit.com/cx20/gltf-test/9fb5f39992bdd548e17fb18b256c41b14fb8840e/sampleModels/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf";
let url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/94bb7090/models/gltf/2.0/VoxelCorgi/glTF_merge/VoxelCorgi.gltf";
let promise = glTF2Loader.loadGLTF(url, {
      extensionLoader: null,
      defaultShader: GLBoost.PhongShader,
      isNeededToMultiplyAlphaToColorOfPixelOutput: true,
      isTextureImageToLoadPreMultipliedAlpha: false,
      isExistJointGizmo: false,
      isBlend: false,
      isDepthTest: true,
      isAllMeshesTransparent: false
    });
      
promise.then(function(gltfObj) {
    let group = modelConverter.convertToGLBoostModel(glBoostContext, gltfObj);
    //camera.cameraController.target = group;
    console.log(group);
    group.scale = new GLBoost.Vector3(scale, scale, scale);
    scene.addChild(group);

let expression = glBoostContext.createExpressionAndRenderPasses(1);
    expression.renderPasses[0].scene = scene;
    expression.prepareToRender();
    
    let render = function() {
        scene.setCurrentAnimationValue('time', gtime);
        renderer.clearCanvas();
        renderer.update(expression); 
        renderer.draw(expression);
        gtime += 0.03;
        if (gtime > 5) {
            gtime = 0.0;
        }
        let rotateMatrix = GLBoost.Matrix33.rotateY(-0.5);
        let rotatedVector = rotateMatrix.multiplyVector(camera.eye);
        camera.eye = rotatedVector;
        requestAnimationFrame(render);
    };
    render();
});

[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）

[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）＜対応できていない点＞・Three.js glTF Exporter で出力した glTF ファイルを Three.js で表示するよう対応。＜参考＞ ■ [WebGL] Three.js glTF Exporter を使ってみるテスト（その３改） http://jsdo.it/cx20/CDcF ＜他ライブラリ比較＞ ■ [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その５） http://jsdo.it/cx20/ahsW ■ [WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その５） http://jsdo.it/cx20/On4X ■ [WebGL] Cesium.js で glTF 2.0形式のデータを表示してみるテスト（その５） http://jsdo.it/cx20/cYlz ■ [WebGL] Grimoire.js で glTF 2.0形式のデータを表示してみるテスト（その５） http://jsdo.it/cx20/CaK6 ■ [WebGL] ClayGL で glTF 2.0 モデルを表示してみるテスト（その５）（改） http://jsdo.it/cx20/kRiS/ ■ [WebGL] QTEK で glTF 2.0 モデルを表示してみるテスト（その５） http://jsdo.it/cx20/6mvP ■ [WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その５） http://jsdo.it/cx20/6whX ■ [WebGL] PlayCanvas で glTF 2.0 モデルを表示してみるテスト（その５）（調整中） http://jsdo.it/cx20/MNU4 ■ [WebGL] X3DOMで glTF 2.0形式のデータを表示してみるテスト（その５）（調整中） http://jsdo.it/cx20/OkGZ // forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その４）（調整中）" http://jsdo.it/cx20/4bHc // forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その３）（調整中）" http://jsdo.it/cx20/89Fn // forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その２）（調整中）" http://jsdo.it/cx20/Gldx // forked from cx20's "[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（調整中）" http://jsdo.it/cx20/Qr7c // forked from cx20's "[WebGL] GLBoost + glTF Loader を試してみるテスト（その１）" http://jsdo.it/cx20/G5nJ // forked from cx20's "[WebGL] GLBoost + ObjLoader を試してみるテスト" http://jsdo.it/cx20/8qQl // forked from cx20's "[WebGL] GLBoost + vox.js を試してみるテスト" http://jsdo.it/cx20/2Nrf // forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）（その３）" http://jsdo.it/cx20/Elgc // forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）（その２）" http://jsdo.it/cx20/Uvah // forked from cx20's "[WebGL] GLBoost を試してみるテスト（standalone編）" http://jsdo.it/cx20/KXXM // forked from cx20's "[WebGL] GLBoost を試してみるテスト（phina.js編）" http://jsdo.it/cx20/SmrF // forked from cx20's "[WebGL] GLBoost を試してみるテスト" http://jsdo.it/cx20/SWec // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC let canvas = document.getElementById("world"); let width = window.innerWidth; let height = window.innerHeight; let glBoostContext = new GLBoost.GLBoostMiddleContext(canvas); let renderer = glBoostContext.createRenderer({ clearColor: { red: 0.6, green: 0.6, blue: 0.6, alpha: 1 } }); renderer.resize(width, height); let scene = glBoostContext.createScene(); let pointLight = glBoostContext.createPointLight(new GLBoost.Vector3(1.0, 1.0, 1.0)); pointLight.translate = new GLBoost.Vector3(10, 10, 10); scene.addChild(pointLight); let camera = glBoostContext.createPerspectiveCamera({ eye: new GLBoost.Vector3(0.0, 0.0, 3.0), center: new GLBoost.Vector3(0.0, 0.0, 0.0), up: new GLBoost.Vector3(0.0, 1.0, 0.0) }, { fovy: 75.0, aspect: width/height, zNear: 0.1, zFar: 3000.0 }); camera.cameraController = glBoostContext.createCameraController(); //camera.cameraController.zFarAdjustingFactorBasedOnAABB = 3; scene.addChild(camera); //let gridGizmo = glBoostContext.createGridGizmo(16, 16, true, true, false, new GLBoost.Vector4(1, 1, 1, 1)); //scene.addChild(gridGizmo); let axisGizmo = glBoostContext.createAxisGizmo(4); scene.addChild(axisGizmo); let gtime = 0; let glTF2Loader = GLBoost.GLTF2Loader.getInstance(); let modelConverter = GLBoost.ModelConverter.getInstance(); let scale = 0.1; //let url = "https://cdn.rawgit.com/KhronosGroup/glTF-WebGL-PBR/817404a4/models/Triangle/glTF/Triangle.gltf"; //let url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/7268f989/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf"; //let url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/395358db/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf" //var url = "https://cdn.rawgit.com/cx20/gltf-test/7e912826/tutorialModels/TextureSettingsTest/glTF/TextureSettingsTest.gltf"; //let url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/76dfc928/models/gltf/2.0/EmaSimpleSkin_blender/glTF/EmaSimpleSkin_blender.gltf"; //let url = "https://cdn.rawgit.com/cx20/gltf-test/9fb5f39992bdd548e17fb18b256c41b14fb8840e/sampleModels/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf"; let url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/94bb7090/models/gltf/2.0/VoxelCorgi/glTF_merge/VoxelCorgi.gltf"; let promise = glTF2Loader.loadGLTF(url, { extensionLoader: null, defaultShader: GLBoost.PhongShader, isNeededToMultiplyAlphaToColorOfPixelOutput: true, isTextureImageToLoadPreMultipliedAlpha: false, isExistJointGizmo: false, isBlend: false, isDepthTest: true, isAllMeshesTransparent: false }); promise.then(function(gltfObj) { let group = modelConverter.convertToGLBoostModel(glBoostContext, gltfObj); //camera.cameraController.target = group; console.log(group); group.scale = new GLBoost.Vector3(scale, scale, scale); scene.addChild(group); let expression = glBoostContext.createExpressionAndRenderPasses(1); expression.renderPasses[0].scene = scene; expression.prepareToRender(); let render = function() { scene.setCurrentAnimationValue('time', gtime); renderer.clearCanvas(); renderer.update(expression); renderer.draw(expression); gtime += 0.03; if (gtime > 5) { gtime = 0.0; } let rotateMatrix = GLBoost.Matrix33.rotateY(-0.5); let rotatedVector = rotateMatrix.multiplyVector(camera.eye); camera.eye = rotatedVector; requestAnimationFrame(render); }; render(); });    <script src="https://cdn.rawgit.com/cx20/gltf-test/dd122006/libs/glboost/r3dev/glboost.js"></script> <canvas id="world" width="465" height="465"></canvas> * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #fff; font: 30px sans-serif; }

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/E9Ph/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

[WebGL] GLBoost で glTF 2.0 モデル

cx20

107/6/12
- GLBoost
- GLSL
- WebGL
- art&design
- html5_elements&api
- library&test

[WebGL] GLBoost で glTF 2.0 モデル

cx20

106/7/12
- GLBoost
- GLSL
- WebGL
- art&design
- html5_elements&api
- library&test

[WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked