Leaderboard


Popular Content

Showing most liked content on 08/23/2017 in all areas

  1. 2 points
    ian

    30 in collections

  2. 2 points
    javalang

    PBR composer ( node based )

    Hello, I'm happy to announce that the node based PBR Composer is on the road. What is PBR Composer ? In short, PBR Composer helps you design and visualize a PBR Material in an efficient way. Parameterizing takes place by dragging and connecting specific nodes from a palette (typically textures, colors and uv-coordinates) to the output node, which represents the PBR Material. A preview panel lets you see all changes in realtime and the corresponding js-sourcecode will be updated as well. The resulting graph can be downloaded in JSON format for later use. Images can be inserted via preview fileselect dialog and/or Drag&Drop, in latter case the images will be transformed to embedded data-urls so the javascript functions can be reused without dependencies. Different meshes and environment-maps are available to see the material under different geometry and reflective light conditions. Motivation for PBR Composer: Due to the complexity of the PBR material (soo many combinations with soo much amazing effects) there is a need of having realtime feedback reflecting the changing parameters. Other than some editor already out using a bunch of parameters in confusing properties panels, nodes lets you to concentrate only on the parameters you need giving a nice overview in form of a graph. Nodes can also be shared and avoids therfore redundancy in the sourcecode. The goal is/was to make the user interface as efficient as possible. The idea for realizing the PBR Composer was inspired from Shader Editor. Technical details: PBR Composer is a web application based on dat.gui, w2ui, litegraph.js and of course on BABYLON.js TODO: At the moment, PBR Composer is customized for PBR-Glossy materials. The current activity is realizing a function for switching between Glossy and Metallic paradigms. Any questions? Let me know... PS: PBR Composer is still in alpha stage but will be deployed in beta stage soon Here it is te demo ...
  3. 2 points
    javalang

    PBR composer ( node based )

    @Sebavan @Deltakosh @satguru and all other members interested on PBRComposer, Project is still in alpha, but you can play live now on my homepage So what is still missing: several useXXX-Flags for the material and the light environment (Properties panel on the right) , but in general most of the work is done. There is no manual at the moment, so play around (dragging doubleclicking etc.) and you will see in short time the basic idea of operating. Because of the loading time of the ressources, I reduced the cubemaps to 2 pieces and shrinked the textures as well. After completing and cleanup the sources I will upload the whole software on github, but this will take some days more. Feel free to make comments and report problems.
  4. 1 point
    b10b

    convert a .svg in a .json

    Try the Cheerio lib within your node app - I've used it extensively for server-side SVG manipulation and found it to be a reliable and stable library. https://cheerio.js.org/
  5. 1 point
    Deltakosh

    Help wanted!

    hello, and thanks a lot for your help! 1. just go to netlify.com, create an deploy using this config: 2. You are right, we need to make sure all links still work. The good news is that we have a redirect file here: https://github.com/BabylonJS/Documentation/blob/master/public/html/_redirects Just add any redirect you need 3. This ones if for @Temechon or @brianzinn 4. Search index will be rebuilt automatically. No worry about that
  6. 1 point
    Hey! 1. Yes the accumulator needs 1s worth of data but you can still rely on https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.performanceMonitor.ts#L56 2. you can use TextureTools.CreateResizedCopy: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.textureTools.ts 3.You can turn individual channels with these booleans: https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/babylon.standardMaterial.ts#L1419 4.Culling is on by default. You can turn it off with material.backFaceCulling = false. Occlusion queries are coming to webgl2 part of the engine 5.Once your extensions will be in the Extension repo, you will be able to use it in the PG
  7. 1 point
    unrealnl

    parsing JSON in firefox fails

    Hi Ivan, you were right all along.. obviously i never doubted you Im using XAMPP as my local server, and it were indeed CORS issues. Create a file called ".htaccess" in the directory of my files and add the following to the file. Header set Access-Control-Allow-Origin "http://localhost:8080/" Works like a charm now! Thanks again!
  8. 1 point
    unrealnl

    parsing JSON in firefox fails

    Hey guys, I'm new to this forum! Use to be an oldschool flash developer (erik.newgrounds.com) and am now seriously looking at building games in HTML5. I had zero problems until i opened my game in Firefox (54.0.1 (32-bits), and Pixi v4.5.0..) and it threw the following error: TypeError: resources['assets/images/bodyparts.json'].textures is undefined[Meer info] After digging a bit deeper and logging the above mentioned resource object i see: Object { _flags: 2, name: "assets/images/bodyparts.json", url: "assets/images/bodyparts.json", extension: "json", data: null, crossOrigin: "", loadType: 1, xhrType: "json", metadata: Object, error: Error, nog 17… } When i click the Error message i see the following error: Error trying to parse loaded json: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data I cant find anything wrong with my json, even JSONLint tells me its ok. Also in Chrome everything works perfectly fine. JSON object is attached to this topic. Any idea whats going on here? Thanks for the help! Erik Firefox v bodyparts.json
  9. 1 point
    ivan.popelyshev

    parsing JSON in firefox fails

    Looks like UTF-16. Open it with notepad++ and convert to UTF-8. What's your web-server?
  10. 1 point
    ivan.popelyshev

    parsing JSON in firefox fails

    You can find "JSON.parse" line of resources-loader in pixi.js and place breakpoint there. Did you search for CORS and firefox issues? I'm sure there was that kind of problem.
  11. 1 point
    Outfire

    One atlas many json for spine

    I want to use one atlas for many spine animations in my game. I found the way how to do it with loader. I am loaded atlas with game loader (name other.atlas) and got in game.loader.resources.other. Then i am trying to load json file of my animation from console. otherLoader = new PIXI.loaders.Loader() spineLoaderOptions = { metadata: { spineAtlas: 'game.loader.resources.other' } }; otherLoader.add('someJson', 'static/img/content/fullHD/machine/elements/testJ.json', spineLoaderOptions) .load() But it will not work. Loader still wants to load atlas with name of my json. GET http://localhost:3004/static/img/content/fullHD/machine/elements/testJ.atlas 404 (Not Found) I think it is because of atlas parser . I need varibale "pages" in my metadataAtlas, but there is no pages. How atlas data looks like in console. I am doing something wrong and i dont know what.
  12. 1 point
    Outfire

    One atlas many json for spine

    Thanks! All is fine.
  13. 1 point
    ivan.popelyshev

    One atlas many json for spine

    You have to create "PIXI.spine.core.TextureAtlas", and use this method: https://github.com/pixijs/pixi-spine/blob/master/src/core/TextureAtlas.ts#L74 . Then pass it to the loader. Something like https://github.com/pixijs/pixi-spine/blob/master/examples/dynamic_texture_atlas.md , but you can just pass "resources['myAtlas'].textures" to addTextureHash. Btw, I'm working on automatic runtime atlas at the moment.
  14. 1 point
    Mezzorio

    New Idea

    That playground btw looks great! but do you know how to make it loop infinitely if we set it as a flat object moving left and right throughout the scene instead of using the current circle method!
  15. 1 point
    mattstyles

    convert a .svg in a .json

    You can use JS just fine, it won't be as quick as some other languages you could use but given that svg files are small and you're not doing much to it it will (almost certainly) be more than fast enough for your needs. Either pipe an svg file into your node process, or using `fs.readFile` or `fs.createReadStream` to grab the svg file you want to convert, then start parsing it. Work out what the rules are for your conversion. Svg is DOM, so I'm not sure how you're proposing to convert that to json, but, as you're doing it manually you're just following some conversion rules. You might get away with simple regex and replace for your rules, this is the simplest conceptually but can be quite error prone and its not very powerful if your rules get a bit more complex. The 2nd method is to convert the svg into an Abstract Syntax Tree (AST) and then use that to make a conversion before piecing it back together when you're done and have created your json representation (and which point use fs.createWriteStream or fs.writeFile or pipe it out of your process). Doing stuff with an AST can be a little trickier and it sounds like it's probably overkill for what you need but its an interesting topic and its widely used as JS firmly has a build process nowadays, check out how Babel, Traceur, JSX conversion etc etc work, they all use ASTs to implement more complex transformational logic.
  16. 1 point
    Hersir

    Android issue with normal maps

    Thats ok , right now I just removed bump map for that gpu, chrome combination, it anyway quit old device,
  17. 1 point
    amo yeh

    syncBoneWithImpostor function help

    I seem to made it work by using different approach. http://www.babylonjs-playground.com/#1ZCM3K#3 syncImpostorWithBone() works fine , the mesh is moved to bone position at beginning. to change boneA transformation to match meshA, for rotation, I used: For the position, the center point of the bone in 3ds max is different from the center point generated in Babylon physic objects. (see attached image) I had to move half of the width (as if the bone center point is at the center of the box) to make this work to further test it , I made a chain with three boxes, it seems working http://www.babylonjs-playground.com/#1ZCM3K#4 however , I still don't know if this is the correct way, and what will happen if more complex physic objects are added.
  18. 1 point
    Pardon my interrupt... I need to make a correction to an older playground. https://www.babylonjs-playground.com/#1QJUDF#24 In a previous version, I was using scene.executeWhenReady... incorrectly (causing playground loader to 'hang'). Dummy me. I'm getting some good console reports, now, even in mainline. But, it seems Mythros will still be required to put most of his entire project... inside-of scene.executeWhenReady wrapper. Not sure. @SinhNQ - I think the objective is: load one model per call. Models are put into a 'library' (and possibly .setEnabled(false), temporarily), where they can be "looked-up" and enabled/instanced/cloned later. (I hope I said that correctly) Looks like M is building a little in-scene database-o-mesh-refs.
  19. 1 point
    MackeyK24

    Physics Movement Is Gounded

    I use this in other places to detect collision so I know where to set it up... Also I found the THREE.JS/CANNON source for "CanJump" flag: var canJump = false; var contactNormal = new CANNON.Vec3(); // Normal in the contact, pointing *out* of whatever the player touched var upAxis = new CANNON.Vec3(0,1,0); cannonBody.addEventListener("collide",function(e){ var contact = e.contact; // contact.bi and contact.bj are the colliding bodies, and contact.ni is the collision normal. // We do not yet know which one is which! Let's check. if(contact.bi.id == cannonBody.id) // bi is the player body, flip the contact normal contact.ni.negate(contactNormal); else contactNormal.copy(contact.ni); // bi is something else. Keep the normal as it is // If contactNormal.dot(upAxis) is between 0 and 1, we know that the contact normal is somewhat in the up direction. if(contactNormal.dot(upAxis) > 0.5) // Use a "good" threshold value between 0 and 1 here! canJump = true; }); Ill try and mess with that... Thanks for the info... Ill let ya know how it works
  20. 1 point
    I think I got it... These are my little "Unity-Like" Helper functions on the SceneManager class: // *********************************** // // * Update Actor Helper Support * // // *********************************** // /** Applies force to actor using physics imposter. */ public addForce(owner:BABYLON.AbstractMesh, force:BABYLON.Vector3, contact:BABYLON.Vector3) : void { if (owner != null) { if (owner.physicsImpostor != null) { if (force != null && contact != null) owner.physicsImpostor.applyForce(force, contact); } else { BABYLON.Tools.Warn("Physics imposter not defined for mesh: " + owner.name); } } } /** Applies impulse to actor using physics imposter. */ public addImpulse(owner:BABYLON.AbstractMesh, force:BABYLON.Vector3, contact:BABYLON.Vector3) : void { if (owner != null) { if (owner.physicsImpostor != null) { if (force != null && contact != null) owner.physicsImpostor.applyImpulse(force, contact); } else { BABYLON.Tools.Warn("Physics imposter not defined for mesh: " + owner.name); } } } /** Moves actor using physics imposter. */ public moveWithPhysics(owner:BABYLON.AbstractMesh, velocity:BABYLON.Vector3, angular:BABYLON.Vector3 = null) : void { if (owner != null) { if (owner.physicsImpostor != null) { if (velocity != null) owner.physicsImpostor.setLinearVelocity(velocity); if (angular != null) owner.physicsImpostor.setAngularVelocity(angular); } else { BABYLON.Tools.Warn("Physics imposter not defined for mesh: " + owner.name); } } } /** Moves actor using camera collisions. */ public moveWithCollisions(owner:BABYLON.AbstractMesh, velocity:BABYLON.Vector3) : void { if (owner != null && velocity != null) { owner.moveWithCollisions(velocity); } } // ************************************ // // * Public Transform Tools Support * // // ************************************ // /** Transforms position from local space to world space. */ public transformPosition(owner: BABYLON.AbstractMesh | BABYLON.Camera, position:BABYLON.Vector3):BABYLON.Vector3 { return BABYLON.Vector3.TransformCoordinates(position, owner.getWorldMatrix()); } /** Transforms direction from local space to world space. */ public transformDirection(owner: BABYLON.AbstractMesh | BABYLON.Camera, direction:BABYLON.Vector3):BABYLON.Vector3 { return BABYLON.Vector3.TransformNormal(direction, owner.getWorldMatrix()); } // ************************************ // // * Scene Direction Helper Support * // // ************************************ // /** Gets the blue axis of the owner in world space. */ public getForwardVector(owner: BABYLON.AbstractMesh | BABYLON.Camera):BABYLON.Vector3 { return owner.getDirection(BABYLON.Vector3.Forward()) } /** Gets the red axis of the owner in world space. */ public getRightVector(owner: BABYLON.AbstractMesh | BABYLON.Camera):BABYLON.Vector3 { return owner.getDirection(BABYLON.Vector3.Right()); } /** Gets the green axis of the owner in world space. */ public getUpVector(owner: BABYLON.AbstractMesh | BABYLON.Camera):BABYLON.Vector3 { return owner.getDirection(BABYLON.Vector3.Up()); } // ************************************* // // * Public Quaternion Tools Support * // // ************************************* // /** Computes the Quaternion forward vector */ public getQuaternionForwardVector(quat:Quaternion):BABYLON.Vector3 { return new BABYLON.Vector3( 2 * (quat.x * quat.z + quat.w * quat.y), 2 * (quat.y * quat.x - quat.w * quat.x), 1 - 2 * (quat.x * quat.x + quat.y * quat.y)); } /** Computes the Quaternion right vector */ public getQuaternionRightVector(quat:Quaternion):BABYLON.Vector3 { return new BABYLON.Vector3( 1 - 2 * (quat.y * quat.y + quat.z * quat.z), 2 * (quat.x * quat.y + quat.w * quat.z), 2 * (quat.x * quat.z - quat.w * quat.y)); } /** Computes the Quaternion up vector */ public getQuaternionUpVector(quat:Quaternion): BABYLON.Vector3 { return new BABYLON.Vector3( 2 * (quat.x * quat.y - quat.w * quat.z), 1 - 2 * (quat.x * quat.x + quat.z * quat.z), 2 * (quat.y * quat.z + quat.w * quat.x)); } Working great so far
  21. 1 point
    javalang

    PBR composer ( node based )

    Thank you guys, some glass impressions
  22. 1 point
    Wingnut

    New Idea

    Not a problem, M-doggy. Doing that is a BREEZE with BJS... and in ANY of about 3-4 different ways. If you wanted, you and I could get the prototype for this done.... in about 10 minutes. Ready? It might be coolest... to make a huge circle of boxes (flat panels). Don't bother with sprites... they're boring. (just kidding) Then yeah, rotate the circle of panels past the camera, or pan the camera around the circle of panels. FUN little experiments galore! And, it need-not be a circle. It can easily be a straight line, too. No matter circle or straight line, it might be wise to parent all the panels/sprites to a central parent. Then moving ALL the panels at the same time... will be easier. Just move the parent, and all the kids come-along for the ride.
  23. 1 point
    samid737

    Online Body Editor

    For edge tracing, you can use marching squares algorithm to get the contour data and then filter/downsample the data: marching squares from here and douglas peucker found here.
  24. 1 point
    satguru

    PBR composer ( node based )

    litegraph.js seems interesting and so also some of the other tools there
  25. 1 point
    Thanks brianzinn! Behind the curtain Vectorize-library generate the vector polygons (with holes) from the image data of a canvas, I have just build the 3D polygon from BABYLON.PolygonMeshBuilder. So in fact it can generate polygons from any black & white (or color with some tricks) canvas content.
  26. 1 point
    http://www.babylonjs-playground.com/#URP3W#3 check it @amo yah