Search the Community

Showing results for tags 'babylon.js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 189 results

  1. I'm preliminary study on Babylon,and there's a question: suppose that there is a color cube in the coordinate system,i wanna define a point object,this point can be set (x,y,z) and Corresponds to a point on the cube.and i can obtain the cube's color by this point..... so ...is there any method that can make it?
  2. Hey. What do you think is the best option ? I know there won't be probably a "best" option but what would you guys choose? Babylon seems more complex than playcanvas but that might bring some more advantages to the table as well idk...
  3. Hi everyone! Here is Prosecution, a 2-button Arcade Game that @Théo Sabattié and I (Chadi HUSSER) made with the help of a sound designer, Aristide HERSANT-PREVERT. Take control of an airplane and try to dodge as many missiles as you can! You can find it on http://babylonjs.com/ Direct link: http://cdn.babylonjs.com/wwwbabylonjs/Scenes/prosecution/index.html Thanks to Babylonjs team for this engine and publication on demo tab. Thanks to @Temechon for his course at Isart Digital. Aristide HERSANT-PREVERT LinkedIn, SoundCloud, Vimeo Theo SABATTIÉ LinkedIn, Twitter, Github Chadi HUSSER LinkedIn
  4. Guys help please. A friend of mine made a model with sketchup so i exported it to dae and used blender to get the babylon file. heres a zip of the file with textures: File removed because it's apparently nothing to do with the problem
  5. Is it possible to show the skeleton/bones of an imported mesh? I don't mean lines and debugging layers, but actually rendering the bones themselves, so they won't stay hidden. Is this a possibility, or simply not a feature? PG example, because why not: http://www.babylonjs-playground.com/#1SJMJ0
  6. Hi everyone, I've had issues with some things that I'd like you to review maybe. Here is a simple PG scene, combining two excellent demos : water and fire materials. A candle is over a calm beach, http://www.babylonjs-playground.com/#1SLLOJ#224 #Question 1 : if you move the camera just to look up, right from starting position, you'll notice the reflective texture on water becomes glitchy at the bottom of the canvas. How to avoid that ? Next, I'd like to apply blur post-process, but only on the flame. #Question 2 : Is there a simple way to add/remove mesh from being rendered by the rendering pipeline ? Something like BABYLON.StandardRenderingPipeline.excludedMeshes[ ] ? Here is the result when applying the pipeline : http://www.babylonjs-playground.com/#1SLLOJ#225 #Question 3 : In this example the fireMaterial has trouble rendering its opacityTexture through the StandardRenderingPipeline. Is it a bug ? How to avoid that kind of glitch ? So from my researches, in order to exclude certain elements from being rendered by the pipeline, I have to create multiple cameras with different layerMasks. So only the flame is rendered in the secondCamera : http://www.babylonjs-playground.com/#1SLLOJ#226 #Question 4 : In this example, the waterMaterial becomes invisible, after adding another camera. Also, there seems to be a 'delay' when looking around, between layerMasks, the flame is no more 'attached' to the candle... Anyway let's continue, then adding again the rendering pipeline, but only to the secondCamera : http://www.babylonjs-playground.com/#1SLLOJ#227 #Question 5 : The scene refuses to render if only one camera is applied on the StandardRenderingPipeline.cameras, is it a bug ? Or is it impossible ? Thx for looking into that if you have time
  7. Is panning in Babylon js possible now? I had seen a question on this topic that was posted in Jan. Since then I could not find anything that suggests that panning is supported. I had used threejs before where we could do panning by doing right click. Also I wanted to check if I can trap click event on a line. I tried "registerAction" with "BABYLON.ActionManager.OnPickTrigger" but that did not work for line.
  8. As I don't have an external server at the moment, I'm trying to fake a bit of latency using SetTimeout. The code is based on Gabriel Gambetta's code for handling an authoritative server: http://www.gabrielgambetta.com/fpm_live.html And yeah. I know the code is very ugly and prototypish, no handling of multiple users, etc. etc.. I am sending inputs as well as the time the key is pressed, as a way of making it time-independent, but I have no sanity checks. If I keep the networkLatency at 0, it seems to run very smoothly, and both reconciliation and prediction works very well. However, if I add a delay, of say, 200 ms, it behaves strangely, and I can't really see why. This is the code handling the updating of the position, and the prediction based on previously saved inputs, and as far as I can see, this should work: iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); Even with a delay/latency, the function should still take into consideration the saved inputs, and apply these when the new positional updates are received. So even when apllying updates as old as 200ms, the result should be the same as the predicted state. If someone can spot where the issue is, that would be awesome. If someone has a VPS with some real latency, a test of that woulld be appreciated too. index.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.4.0/babylon.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.js"></script> <!-- optional physics engine --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> var sphere, inputs = []; var globalGravity = new CANNON.Vec3(0,-30,0); var camera; var lastSequence = 0; var client = {}; client.left = false; client.right = false; client.forward = false; client.back = false; pending_inputs = []; inputsToSend = []; input_sequence_number = -1; var networkLatency = 0; // var keys; // keys.left=1; this.playerDirection = [0,0,0,0]; quat = new CANNON.Quaternion(); var iosocket = io.connect("http://localhost:8080"); iosocket.on('connect', function () { console.log("connect"); iosocket.on('message', function(message) { // console.log(message); }); iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); iosocket.on('spawnPlayer', function(player) { console.log("Spawning Player"); }); iosocket.on('disconnect', function() { }); }); var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); // setTimeout(sendInput, 2000); function sendInput(){ console.log("2 sek"); for (var x in inputsToSend){ iosocket.emit('input', inputsToSend[x]); } setTimeout(sendInput, 2000); } var createScene = function () { this.playerDirection = [0,0,0,0]; // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); scene.debugLayer.show(); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); this.sphere.quaternion = new CANNON.Quaternion(0,0,0,0); this.box = BABYLON.MeshBuilder.CreateBox("box", {height: 5}, scene); // Move the sphere upward 1/2 its height this.sphere.position.y = 2; this.box.position.y = 2.5; this.box.position.z = 2; this.box.parent = this.sphere; ghostSphere = BABYLON.Mesh.CreateSphere("ghost", 16, 2, scene); var ghostMat = new BABYLON.StandardMaterial("texture1", scene); ghostMat.diffuseColor = new BABYLON.Color3(0.5, 0.2, 0.7); ghostMat.alpha = 0.6; ghostSphere.material = ghostMat; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene this.ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); this.ground.rotation = new CANNON.Vec3(-0,0,0); BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/RaggarDK/Baby/baby/", "height.babylon", scene, function (newMeshes) { setTimeout(function () { ground = newMeshes[1]; var material = new BABYLON.StandardMaterial("texture1", scene); //window.ground = ground; //ground.parent = undefined; ground.scaling.copyFromFloats(.3, .3, .3); ground.bakeCurrentTransformIntoVertices(); material.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/RaggarDK/Baby/baby/plan.png", scene); ground.material = material; //ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsEngine.HeightmapImpostor, { mass: 0 }, scene); createHeightmap(newMeshes[1]); }, 2000) }); // window.addEventListener("keydown", handleKeyDown, false); // window.addEventListener("keyup", handleKeyUp, false); window.addEventListener("mousemove", function(e) { // console.log("mouse"); event = e; var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; //this.sphereBody.quaternion.y += movementX * 0.002; // this.sphereBody.quaternion.x += movementY * 0.002; sphereBody.rotation.y += movementX * 0.008; sphereBody.rotation.x += movementY * 0.008; }); seq = 0; function handleKeyDown(evt){ seq += 1; if (evt.keyCode==16){ if(inputs){ console.log(inputs); } } if (evt.keyCode==65){ inputs[seq] = {left:1, rot:sphereBody.rotation}; this.playerDirection[0] = 1; applyInput(seq, "left", sphereBody.rotation); console.log(seq); // iosocket.emit('input', { left:1, rot:sphereBody.rotation}); // shootBullet(sphereBody.rotation.y, sphereBody.position); } if (evt.keyCode==68){ sphereBody.position.x += .1; inputs[seq] = {right:1, rot:sphereBody.rotation}; this.playerDirection[1] = 1; //applyInput(seq, "right", sphereBody.rotation); //iosocket.emit('input', { right:1, rot:sphereBody.rotation}); } if (evt.keyCode==87){ inputs[seq] = {forward:1, rot:sphereBody.rotation}; applyInput(seq, "forward", sphereBody.rotation); this.playerDirection[2] = 1; // iosocket.emit('input', { forward:1, rot:sphereBody.rotation}); } if (evt.keyCode==83){ inputs[seq] = {back:1, rot:sphereBody.rotation}; this.playerDirection[3] = 1; applyInput(seq, "back", sphereBody.rotation); // iosocket.emit('input', { back:1, rot:sphereBody.rotation}); } } function handleKeyUp(evt){ if (evt.keyCode==65){ this.playerDirection[0] = 0; // iosocket.emit('input', { left:0}); } if (evt.keyCode==68){ // iosocket.emit('input', { right:0}); this.playerDirection[1] = 0; } if (evt.keyCode==87){ // iosocket.emit('input', { forward:0}); this.playerDirection[2] = 0; } if (evt.keyCode==83){ // iosocket.emit('input', { back:0}); this.playerDirection[3] = 0; } } var keyHandler = function(e) { e = e || window.event; if (e.keyCode == 65) { console.log("Lefty"); client.left = (e.type == "keydown"); } if (e.keyCode == 68) { console.log("righty"); client.right = (e.type == "keydown"); } if (e.keyCode == 87) { console.log("forward"); client.forward = (e.type == "keydown"); } else if (e.keyCode == 83) { client.back = (e.type == "keydown"); console.log("back"); } }; window.addEventListener("keydown", keyHandler, false); window.addEventListener("keyup", keyHandler, false); return scene; }; var createPhysics = function(){ console.log("createPhysicsFunction Called!"); world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); // Step 1 sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); // Step 2 sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); // Step 3 console.log("sphereBodyPosition0: " + sphereBody.position); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); groundShape = new CANNON.Plane(); groundBody = new CANNON.Body({ mass: 0, shape: groundShape }); console.log(groundBody.rotation); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(groundBody.quaternion); world.add(groundBody); timeStep = 1.0 / 60.0; // seconds velocity = sphereBody.velocity; sphereBody.velocity = new CANNON.Vec3(0,0,0); return world; } var scene = createScene(); this.world = createPhysics(); var zeroVel = new CANNON.Vec3(0,0,0); var inputVelocity = new CANNON.Vec3(); var lastTime = (new Date()).getTime(); var currentTime = 0; var delta = 0; engine.runRenderLoop(function () { currentTime = (new Date()).getTime(); delta = (currentTime - lastTime) / 1000; // console.log(delta); processInputs(); scene.render(); world.step(1.0 / 60.0); velocity = sphereBody.velocity; this.sphere.position = sphereBody.position; this.sphere.rotation = sphereBody.rotation; moveSpeed = .1; // camera.position.x = sphereBody.position.x // camera.position.z = sphereBody.position.z // camera.rotation = sphereBody.rotation; //sphereBody.position.z += moveSpeed; //console.log(sphereBody.position.x); velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; lastTime = currentTime; }); window.addEventListener("resize", function () { engine.resize(); }); function processInputs() { // Compute delta time since last update. var now_ts = +new Date(); var last_ts = this.last_ts || now_ts; var dt_sec = (now_ts - last_ts) / 1000.0; this.last_ts = now_ts; // Package player's input. var input; if (client.right) { input = {dir:"right", press_time: dt_sec }; }else if (client.forward && client.left) { input = {dir:"sfLeft", press_time: dt_sec }; } else if (client.left) { input = {dir:"left", press_time: dt_sec }; }else if (client.forward) { input = {dir:"forward", press_time: dt_sec }; }else if (client.back) { input = {dir:"back", press_time: dt_sec }; } else { // Nothing interesting happened. return; } // Send the input to the server. input.input_sequence_number = input_sequence_number++; console.log(input.input_sequence_number); // input.entity_id = this.entity_id; applyInputs(input); inputsToSend.push(input); iosocket.emit('input', input); // Save this input for later reconciliation. pending_inputs.push(input); } function applyInputs(input) { // console.log(input.dir); if (input.dir == "left"){ sphereBody.position.x += -input.press_time*5; } if (input.dir == "right"){ sphereBody.position.x += input.press_time*5; } if (input.dir == "forward"){ sphereBody.position.z += input.press_time*5; } if (input.dir == "back"){ sphereBody.position.z += -input.press_time*5; } if (input.dir == "sfLeft"){ sphereBody.position.z += input.press_time*2.5; sphereBody.position.x += -input.press_time*2.5; } } function createHeightmap (object, pointDepth) { var pos = object.getVerticesData(BABYLON.VertexBuffer.PositionKind); var matrix = []; //For now pointDepth will not be used and will be automatically calculated. //Future reference - try and find the best place to add a reference to the pointDepth variable. var arraySize = pointDepth || ~~(Math.sqrt(pos.length / 3) - 1); var dim = Math.min(object.getBoundingInfo().boundingBox.extendSize.x, object.getBoundingInfo().boundingBox.extendSize.z); var elementSize = dim * 2 / arraySize; var minY = object.getBoundingInfo().boundingBox.extendSize.y; for (var i = 0; i < pos.length; i = i + 3) { var x = Math.round((pos[i + 0]) / elementSize + arraySize / 2); var z = Math.round(((pos[i + 2]) / elementSize - arraySize / 2) * -1); var y = pos[i + 1] + minY; if (!matrix[x]) { matrix[x] = []; } if (!matrix[x][z]) { matrix[x][z] = y; } matrix[x][z] = Math.max(y, matrix[x][z]); } for (var x = 0; x <= arraySize; ++x) { if (!matrix[x]) { var loc = 1; while (!matrix[(x + loc) % arraySize]) { loc++; } matrix[x] = matrix[(x + loc) % arraySize].slice(); } for (var z = 0; z <= arraySize; ++z) { if (!matrix[x][z]) { var loc = 1; var newValue; while (newValue === undefined) { newValue = matrix[x][(z + loc++) % arraySize]; } matrix[x][z] = newValue; } } } var shape = new CANNON.Heightfield(matrix, { elementSize: elementSize }); console.log(elementSize); //Output Matrix Info for Node.js console.log(matrix.length); for (i=0;i<matrix.length;i++){ //GET MATRIX DATA //console.info(JSON.stringify(matrix[0], null, ' ')) console.log("\n" + "matrix2[" + i + "] = " + JSON.stringify(matrix[i], null, ' ')) } heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); }; </script> </body> </html> server.js: /* Copyright (c) 2012 Sven "FuzzYspo0N" Bergström http://underscorediscovery.com MIT Licensed. See LICENSE for full license. Usage : node simplest.app.js */ var gameport = process.env.PORT || 4004, CANNON = require('cannon'), io = require('socket.io'), socketio = require('socket.io'), express = require('express'), UUID = require('node-uuid'), fs = require('fs'), gameloop = require('node-gameloop'), verbose = false; var fs = require('fs') , http = require('http') , socketio = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html'}); res.end(fs.readFileSync(__dirname + '/index.html')); }).listen(8080, function() { console.log('Listening at: http://localhost:8080'); }); timeStep = 1.0 / 60.0; moveSpeed = .1; lastProcessedInput = -1; socketio.listen(server).on('connection', function (socket) { socket.emit('spawnPlayer'); var testLat = 0; var networkLoop = gameloop.setGameLoop(function(delta) { //socket.emit('news', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); socket.emit('updatePOS', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); }, 1000 / 10); socket.on('input', function (inp) { applyInput(inp); console.log(inp.input_sequence_number); }); sphereBody.velocity = new CANNON.Vec3(0,0,0); /*socket.on('arrayInput', function (ainput) { for (var input in ainput){ if (ainput.input_sequence_number > lastProcessedInput){ applyInput(ainput[input]); } } }); */ }); function applyInput(inp){ sphereBody.velocity.x = 0; if (inp.dir == "right"){ sphereBody.position.x += inp.press_time*5; } if (inp.dir == "sfLeft"){ sphereBody.position.z += inp.press_time*2.5; sphereBody.position.x += -inp.press_time*2.5; } if (inp.dir == "left"){ sphereBody.position.x += -inp.press_time*5; } if (inp.dir == "forward"){ sphereBody.position.z += inp.press_time*5; } if (inp.dir == "back"){ sphereBody.position.z += -inp.press_time*5; } lastProcessedInput = inp.input_sequence_number; console.log(lastProcessedInput); } var initPhysics = function() { world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); createHeightfield(); } var frameCount = 0; var mainLoop = gameloop.setGameLoop(function(delta) { // console.log('Hi there! (frame=%s, delta=%s)', frameCount++, delta); world.step(timeStep); // console.log(sphereBody.position); if (sphereBody){ velocity = sphereBody.velocity; //sphereBody.velocity.z = 0; var inputVelocity = new CANNON.Vec3(); sphereBody.velocity.x = 0; sphereBody.velocity.z = 0; velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; } }, 1000 / 60); function createHeightfield(){ matrix2 = []; elementSize = 2.9999426007270813; matrix2[0] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[1] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[2] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[3] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[4] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[5] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[6] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[7] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[8] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[9] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[10] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[11] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[12] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[13] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[14] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[15] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[16] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[17] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[18] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[19] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[20] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; shape = new CANNON.Heightfield(matrix2, { elementSize: elementSize }); heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); } initPhysics(); Node.js for the server.js Chrome for the index.html WASD to move around.
  9. I'm morphing an object's vertices using a vertex shader in Babylon.js. The morphed object looks great, but I can't figure out a way to cause the object's shadow to update as well. I know in Three.js there is a customDepthMaterial for a mesh where you can pass in the same custom vertex shader and correctly update the object's shadow, but is there something similar in Babylon.js? Thanks!
  10. Hey all I've used the standard method for drag and dropping meshes in my app (ie the one with the getGroundPosition function.) it works fine. However I don't really like it - I don't want to have a ground plane in the scene as the user is building up building blocks and is able to rotate the camera all around the evolving structure and make changes. The ground plane gets in the way of this. So - has anyone come up with an alternative strategy for this? If I remove the ground mesh it does kind of work but is glitchy - the mesh being dragged suddenly starts moving toward or away from the camera randomnly as there is no ground mesh to use as an 'anchor'. I'll have a play but wondered if the brains behind this operation had any thoughts ... would having the scene inside some kind of giant 'universe' cube, where the sides of the cube form the background and the boundaries of the scene, work? I guess if the user ventured towards the edges of the cube they could still end up intersecting with it and seeing odd behaviour. Cheers Rich
  11. Hi folks, @Nockawa As well as making use of the fine Castor.js extension for html based UI, I am wanting to add some webgl UI elements using Canvas2d, specifically mesh labels. I have pretty much got to grips with the basics. However one thing I cannot get to work is changing the visibility of elements at run time. For example allowing the user to toggle labels on and off. I have created a silly demo based on the "labels" playground demo. The red sphere has a label. Hitting the 'Z' and 'X' keys moves the label along the viewport x-axis and this works fine. The ''L' key toggles the .isVisible property of the label but has no effect. Note that this property does work at 'create' time. If you change line 5 to default to 'false' then the label will not be displayed. However then hitting 'L' key does not display it. The key events write to the console log so it looks as though the events are triggering. http://www.babylonjs-playground.com/#1RB7WB#20 Am I doing something wrong or is the isVisible not re-read once created? Thanks Richard
  12. Hi (for Dad72 or anyone with Castor skills) I'm using Castor for simple UI elements for my app. My UI will have a window for scene/world buttons, a window for current mesh buttons and a window for status/MI. I am having difficulty adding buttons into a window: var form = new CASTORGUI.GUIWindow("form", { x: 0, y: 0, w: 300, h: 200, overflow: "hidden" }, guiSystem); var sceneButton_toggleAxis = new CASTORGUI.GUIButton("sceneButton_toggleAxis", { x:10, y: 10, w:40, h:40, borderRadiusButton:"20px", borderButton:"8px solid gray", value:" ", backgroundImage:"./assets/icon_axis.png" }, guiSystem, toggleSceneAxis); form.add(sceneButton_toggleAxis); form.setVisible(true) When I run this it appears correct. However if I move the window to a new position there is an instance of the button in the window AND a duplicate instance of the button left behind in its original position. Both buttons appear functional. How can I avoid this duplicate button being created? Second question - is it possible to remove the title border from the window object or reposition it (e.g. to the bottom of the window). Many thanks Richard
  13. Hi I am new in this 3d field and I am looking for a right tools to build my dream game. I have read and seen some demos that use Babylon.js and I want to make sure that with Babylon.js I can make this game, so I want to ask all experts here, because I want to start right with the tools. I want to build a MMORPG game. Players can create their characters which is male or female. The players also can set the body size of their characters such as height, muscle, arm and etc and these settings will be used to calculate the characters strength, agility and power, for example big guys have high power and small guys have high agility. I want to know that with Babylon.js can I do all these things or do I have to use Blender or other libs to make a change of hero's size and setting. Thank you in advance Peace.
  14. In the app I am building, the user can drag in different components that snap together (think lego). As part of that I am introducing grouping (think Microsoft Powerpoint where you can add individual shapes but then group them and any transformations are then applied as a group). The approach I have used so far is that when individual components (meshes) are added they have no parent. When component A is snapped to component B it checks whether either has a parent. If neither has a parent (ie neither is yet part of a group) then it creates an invisible mesh and makes that the parent of both. If one or more has a parent (ie they are already part of a group) then it combines them under one parent (if both have parents, some logic will be introduced to determine which would be the best parent). This works to an extent. The problem I am seeing is that the meshes may have been moved around prior to being grouped. So their position will have a value. What seems to be happening when the parent is set is that the component's position is being re-evaluated relative to the parent and so the component jumps to a new position in space. I just wanted to first validate that this is how parenting should work and also get some advice on how to counter it's behaviour. I don't want the child meshes to move when I set the parent. However from that point on I do want any further movement or rotation to be done as a group. I have already amended my onMouseMove function so that if a mesh has a parent, the movement is applied to the parent (and therefore ALL children) rather than just the mesh being moved. This works a treat. This little playground illustrates the behaviour I am seeing. It creates 3 meshes ... m1, m2 and parent and gives them each a new position away from the world origin. It writes their position and getAbsolutePosition to the console. It then sets m2.parent=parent and again writes their position to the log. You can see that m2 is initially positioned at (10,0,0) and parent is at (20,0,0). However when m2.parent is set to parent, m2 moves to (30,0,0). So its position is now being evaluated relative to its parent (ie 20+10 along the x axis). This is contrary to how I have seen the behaviour described elsewhere in which it seemed to suggest that position was nullified upon setting a parent. Thoughts? Thanks Rich
  15. Hey Guys, I intend to change the use of arrow keys for FreeCamera. I want the camera to rotate around its axis when pressing the left or right arrow keys as opposed to its current movement to left or right. How can i do this? I tried setting noPreventDefault to false in camera attachcontrol but it dosent seem to stop the movement of camera left or right. Am i missing something here? Thanks
  16. Hi @Temechon How are you,.I purchase the babylon.js  book and the code samples so please point me in the book how I do this je je , by the way thanks for making book for your help in advance.

    ABOUT ME : Im a javascript programmer with experience in angular and js framework, but I'm new to blender and the 3D World (1 month using blender), I love babylon it's all in javascript.

    I have been working with many 3D SDK's and platforms, but all comes to the same problem, animation issues.

    I try Blend4Web but they want $999 for the technical support and there is little info about sample code, but they have an addon that exports JSON/Bin files  and if I bake every single mesh animation it will work but I think it crashes blender after baking 10 parts of the mesh a 720 frames each.

    B4W.JPG

     

    then I try Play-Canvas (adult content) , it has VR camera ready and you can upload FBX files, so what I use to do is to Upload an FBX files for the mesh and another FBX with mesh and animations,  I delete it all in the one with the animation  and I use the just animation combined with the FBX with no animation and it works, but the platform is that it do not  accept may polygons meshes and you have to decimate making this more difficult and time consuming but works.

    I would like to try the previous method in blender but I dont know how can I combine the FBX files with the animation exported in a separate FBX in blender, so I can repeat this process on playcanvas .

    MY METHOD SO FAR so I also I import an alembic file

    Finally I created a .babylon file using alembics with cache vertex animation, http://brandsocialguru.com/files/RobDancer.abc , 

     

    here is information links for my files 

     

     it possible to do it with an vertex animation cache , meaning with out bones like an alembic file, I import the file into blender the animation plays well but I try the animated and its no working

    I created a .babylon file and added the animation attributes, e.g.' autoAnimate ... ' see below, then I drop the file in the sandbox

        "autoAnimate": true,
        "autoAnimateFrom": 0,
        "autoAnimateTo": 50,
        "autoAnimateLoop": true

    I tried before CTRL + A and add location, rotation, scale, and it worked on a simple animation

    http://brandsocialguru.com/files/cube.blend

    http://brandsocialguru.com/files/cube.babylon

    I repeat the same with my files and it does not work :( 

     

    the files are big so please download it from this links the first one is the alembic the other ones are FBX and a BVH to capture the animation and also below I put pictures of my export options and the cube babylon code animated ready  http://brandsocialguru.com/files/RobDancer.abc ,http://brandsocialguru.com/files/motionBUilder.fbx ,http://brandsocialguru.com/files/RobForum.fbxhttp://brandsocialguru.com/files/RRobForum_motion0.bvh

     

  17. Hello, I need to run a BJS scene on Chromium. Anyone have any pointers or aware of any current issues? I know of past issues, but none currently. Also, is it still more difficult to run Chromium on Windows as opposed to Linux? I assume so. Thanks, DB
  18. Hi everyone ! Being a newbie to a lot of things dev-wise, I only have the 'creative' approach, then learn what I can about how to do it, but some things are obviously out of my reach so far ... But I keep learning little bits by little bits, and hopefully someday I'll be able to contribute more deeply ! I have understood that Shaders can be powerful, and ran across that awesome site that some of you know : shadertoy.com. It has lots of amazing examples like those : Fog example : https://www.shadertoy.com/view/Msf3zX Clouds example : https://www.shadertoy.com/view/XslGRr So my question is quite simple, would Babylon.js be able to render something like those examples above ? They look amazing !
  19. Folks I am not sure whether this is a mathematical limitation or a babylon/javscript limitation (or a touslecoq limitation!). As part of the app I am developing I am comparing the normals of faces on 2 meshes in order to calculate the angle and axis of rotation required those faces. This works fine in most cases - however I found in certain cases that the rotation was seemingly random. Some investigation using the console and I determined that this occurs when the faces being compared are exactly 180 degrees apart. I have created a playground to recreate/illustrate the issue. This basically creates a mesh and rotates randomly in 3 dimensions; creates a second mesh with exactly the same rotation. calls a function to calculate the normals of a given face (0-12) for each mesh and calculate the angle between those normals and the axis of rotation (ie a vector that is 90 degrees to those normals). I call the function twice: comparing Mesh 1, Face 0 with Mesh 2, Face 2 - these faces are on opposite sides of the meshes. The angle (180 degrees) is correctly determined but the axis is calculated as (0,0,0). This I believe is the cause of the strange behaviour I have seen in my app. comparing Mesh 1, Face 0 with Mesh 2, Face 4 - these faces are on 2 perpendicular sides of the meshes and the angle (90 degrees) and axis are correctly determined See the console log for the outputs which include the vertices, normals of each selected face and the calculated angle and axis. Look out for axis = (0,0,0) for the second test. Re-run several times and it gets it wrong consistently. So ... million dollar (since pound is worthless now) question ... is there a workaround to calculate the normal to 2 vectors that are 180 degrees apart? http://www.babylonjs-playground.com/#VFKAZ#12 Cheers Rich
  20. Hi all ! Here's a little tweaked version of the LensRenderingPipeline demo : http://www.babylonjs-playground.com/#DX6AV#43 I've raised the grain amount, I really like what it does ! But the noise/grain is static : how would you make the noise more dynamic/moving ? I'd like the result to be more "video" than "photo". Anyone knows how to do this while keeping it simple ? Thanks !
  21. 3D website is "Creative Anarchy v.3" online ... You can see the project using the link below: http://www.cete.com.tr/
  22. Is there a way to transfer (some) properties of a Material imported from .babylon when constructing a pbr material? I looked into ambientColor and diffuseColor and they don't seem to provide an answer. For example, I have an object with greenish surface (ambient = [0.4, 0.8, 0.6], diffuse = [0.2, 0.43, 0.3]). But when I try to use these as a reflectivityColor, I get very unexpected results. By trial and error, I used reflectivityColor = [0.7, 1, 0.5] to get that greenish surface.
  23. Hi again! I have a little concept I can't wrap my head around. What I want to do is create Heightmap terrain (already done), then apply it to ribbon and dispose it(done as well). No the problem is I would like to divide up this ribbon into smaller pieces so that I could load them up on the fly like LOD terrain. This obviously would make the terrain generation a lot easier. I then plan taking the getHeightAtCoordinates and getNormalAtCoordinates and add it to a custom Ribbon function so I can do collision detection. So forget about the collision detection thing for now but how would you go about dividing up a riibbon like this: but with more subdivisions. var terrain = BABYLON.Mesh.CreateGroundFromHeightMap("terrain",createHeightMap(256),1000,1000,100,0,256,scene,true); terrain.onReady = function() { var paths = []; var step = (Math.PI - 1) / steps; var vertices = terrain.getVerticesData(BABYLON.VertexBuffer.PositionKind); var path = []; for(var i = 1; i < vertices.length; i++) { var x = vertices[i*3+0]; var y = vertices[i*3+1]; var z = vertices[i*3+2]; path.push(new BABYLON.Vector3(x, y, z)); } paths.push(path); var ribbonTest = BABYLON.Mesh.CreateRibbon("testRibbon",paths,false,false,20,scene); ribbonTest.position.y = 100; terrain.dispose(); } createHeightMap(256) being a function I made that generates simplex heightmap image data for a image 256 * 256. (turns out it actually doesn't work right)Maybe I don't want this, maybe I want to use vertexData? PG: http://www.babylonjs-playground.com/#296YBY#2
  24. As my little project is done using Babylon, I thought this would be the most fitting and active section. If not, mods may move the topic as they please. I am unsure as to how it is possible to apply Server Reconciliation when using physics to drive the movement, as I am using Cannon.js. The examples I've seen on SR are based on movement, by first applying the confirmed position, followed by applying all the unconfirmed input, and thereby smoothing the movement of a local player in a multiplayer setup. I don't really see how this is possible, as by far as I know, Cannon won't be able to simulate ahead of time, and by using velocities/forces/impulses, there is bound to be time involved due to acceleration etc. 1) Is it possible, and has it been done using either Cannon.js, or other of the physics implementations? 2) Are there any other ways of dealing with the apparent jitter/lag? Prediction is good as Cannon is deterministic, but the updates still create a very laggy feel. A good example is this: http://www.gabrielgambetta.com/fpm_live.html Turning on prediction, you'll get results identical to what I have now, but applying unconfirmed input after the confirmed server snapshot simply makes the movement seem slow and unresponsive.
  25. hi all, I use BABYLON.SceneLoader to load a maze scene with many walls, and also import a spider robot to this scene. But when I want to use moveWithCollision method to control robot moving, it's not work. Robot will cross the wall and not detect collision. If I create a scene manually and create many box instead of walls, the moveWithCollision method has worked. I'm sure all wall's checkCollisions property is true...kindly suggest me for this