All Activity

This stream auto-updates     

  1. Past hour
  2. Frame Fit Error Override.

    Thanks for the answer Ivan. I'll try with a console warning with the measurements to know when and by how much the frame doesn't fit and check if it produces any subsequent errors.
  3. Pink Floyd! Cool! (Wingnut hugs you) Ok, let's talk for a moment about this "kept switching to latest". I don't think it's doing that. I think, when switching to stable version, a playground re-load needs to happen. The playground defaults to "Latest" for the selected choice in that selectbox. So when the PG reloads, it appears that we went back to "Latest" but that's a lie. Look at the URL - I think that is the only accurate indicator. Just thought I'd pass-on what little I know about it. Currently, I think the selector will indicate "Latest" no matter which version of BJS is selected. Sorry for the deek/foolery. I'm not sure it can be changed/fixed... but... we all can look it over and think about it, I suppose.
  4. Be careful to use version 3.0 or 3.1 of BabylonJS
  5. Let's create WebGL examples for practice

    WebGL 2.0. Pass a point color to a fragment shader https://jsfiddle.net/8Observer8/vm1m4xhm/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Pass a point color to a fragment shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `#version 300 es void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_PointColor; out vec4 outColor; void main() { outColor = vec4(u_PointColor, 1.0); } `; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var u_PointColor = gl.getUniformLocation(program, "u_PointColor"); var r = 0.5, g = 0.8, b = 0.5; gl.uniform3f(u_PointColor, r, g, b); gl.drawArrays(gl.POINTS, 0, 1); </script> </body> </html>
  6. OK thanks @jerome for this explanation. This is just a matter of shadow and light direction/position then. For your information in my scene I just add an hemispheric light that is opposite to my directionalLight so that the right color appears on the gradientMaterial I use. Cheers, Pichou
  7. Let's create WebGL examples for practice

    WebGL 1.0. Pass a point color to a fragment shader https://jsfiddle.net/8Observer8/x77vfnxk/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Pass a point color to a fragment shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_PointColor; void main() { gl_FragColor = vec4(u_PointColor, 1.0); } `; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var u_PointColor = gl.getUniformLocation(program, "u_PointColor"); var r = 0.5, g = 0.8, b = 0.5; gl.uniform3f(u_PointColor, r, g, b); gl.drawArrays(gl.POINTS, 0, 1); </script> </body> </html>
  8. Playground Based Tutorials

    *nod* I say these color things... because... https://www.babylonjs-playground.com/#NLMGJ2 In that playground, I can't read the code in the highlighted lines, and I can't highlight with mouse so it CAN be read. Line 7 and line 22 are almost-completely unreadable, due to light-colored text on light-colored backdrop. I use dark theme. Do you use light, John? Thx for consids on this.
  9. Let's create WebGL examples for practice

    WebGL 2.0. Drawing points in a circle by formulas: x = radius * cos(angle) y = radius * sin(angle) https://jsfiddle.net/8Observer8/6L2uyka4/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drawing points in a circle by formulas</title> </head> <body> <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 4.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); var radius = 0.7; for (var angle = 0; angle < 360; angle += 10) { var x = radius * Math.cos(angle * Math.PI / 180); var y = radius * Math.sin(angle * Math.PI / 180); gl.vertexAttrib2f(a_Position, x, y); gl.drawArrays(gl.POINTS, 0, 1); } } main(); </script> </body> </html>
  10. Let's create WebGL examples for practice

    WebGL 1.0. Drawing points in a circle by formulas: x = radius * cos(angle) y = radius * sin(angle) https://jsfiddle.net/8Observer8/k3o8yz4q/1/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drawing points in a circle by formulas</title> </head> <body> <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 4.0; }`; var fragmentShaderSource = `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); var radius = 0.7; for (var angle = 0; angle < 360; angle += 10) { var x = radius * Math.cos(angle * Math.PI / 180); var y = radius * Math.sin(angle * Math.PI / 180); gl.vertexAttrib2f(a_Position, x, y); gl.drawArrays(gl.POINTS, 0, 1); } } main(); </script> </body> </html>
  11. LineMesh and LineSystem Per Point Color

    Varying the alpha from 0.7 to 0.0 (instead from 1.0) gives a more realistic effect : http://playground.babylonjs.com/#W9LE0U#16
  12. Let's create WebGL examples for practice

    WebGL 2.0. Pass a point coordinate to a vertex shader https://jsfiddle.net/8Observer8/wabur00e/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pass a point coordinate to a shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttrib2f(a_Position, -0.7, 0.2); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html>
  13. Let's create WebGL examples for practice

    WebGL 1.0. Pass a point coordinate to a vertex shader https://jsfiddle.net/8Observer8/oLq23Lac/1/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pass a point coordinate to a shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttrib2f(a_Position, -0.7, 0.2); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html>
  14. Hi all, I have further test it on firefox, and it too is not working. I test it with the duck gltf, and its working in firefox and chrome. This is confusing to me. Is it the size of the gltf/glb, or how is it rendered?
  15. How to add collider for slide in BabylonJS

    The mesh impostor collides only against spheres, so your person should be a sphere
  16. BabylonJS Editor Toolkit - Version 3.1 Alpha

    I think reflectivityTexture would be the '_MetallicGlossMap' or '_SpecGlossMap' of the material
  17. Today
  18. Shader Texture Atlas Support

    Yo @Pryme8 ... Just for debugging the edge seams for now (I am however writing code to do all the border swapping and 9 image 3 x 3 center cropping). But just for debugging I actually paint ALL sub textures with just a solid color... because within the texture size (512 x 512 for example) the gutter, body and edges ... everything is one solid color. But I still get edge seams when mip mapping. Here is shot of solid color Texture Atlas: And here is Output: So mip level selection is off... I was reading something about manual mip selection and someone about half pixel correction... Any ideals about that ?
  19. How to add collider for slide in BabylonJS

    if i use mesh imposter the person goes through the slope. not jumping.
  20. Hi! This is a prototype for a 3D space platformer game that is in the design phase. You can play it here: http://pirron.one/escaping.earth4 We were able to develop this in a matter of days. Some features: Developed using PlayCanvas. p2.js is used for physics, planets create gravity fields that push objects that enter it, into orbit. solar system is an accurate representation of the real one, using the orbital elements from NASA. Planets were scaled up to help with game play. additional star systems can be added easily from the editor, just by inserting new (real or imaginary) orbital elements. orbits and gravity fields are rendered using "lines" to help the player navigate around. Touch controls are partially implemented, for the moment only to navigate around with the top down camera. This isn't an easy game, nor does it make much "sense" right now! But we are loving how easily it turns out to prototype in PlayCanvas. Stay tuned for feature updates: http://pirron.one/playingincanvas/escaping-earth-3d-space-platformer-prototype Thanks for playing!
  21. Hey, I have no problem with the free camera and quantum. Any specific scene/game you are referring to?
  22. Need advice for some project

    Generate 2-5 positions instead of one, take the one that is farthest away from other bunnies. Btw, if you want to use tint that make objects lighter and not darker like pixi default, try https://github.com/gameofbombs/pixi-heaven/ , just include "bin/pixi-heaven.js" and use "sprite.color.setDark".
  23. How to add collider for slide in BabylonJS

    Howdy! To get a slope working (assuming you really want to jump, like ice skating or something) you will need a physics engine . Here is a 101 course - http://doc.babylonjs.com/how_to/using_the_physics_engine Hope this helps!
  24. Hi Tomer, wouldn't it be simpler if you created a map of textures and load them using code? Having said that - you can technically use the MTL parser class (https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/OBJ/babylon.objFileLoader.ts#L8) to parse a downloaded MTL file (which you will need to download yourself). This will provide you with a list of materials that you will need to associated with your selected mesh.
  25. LineMesh and LineSystem Per Point Color

    Here's a rain shower : http://playground.babylonjs.com/#W9LE0U#12 Wait for seconds until the shower gets continuous. 5000 recycled drops. It's really naive, everything is randomized. I could have set the drop speed according to its length instead. I could also have set slightly different colors. Note that the alpha is used between the two drop segment points. More visible with a constant speed and longer drops : http://playground.babylonjs.com/#W9LE0U#13 You can play with the drop number, the drop length and the drop speed. Example : not more drops than before but longer and faster to simulate an intensive shower : http://playground.babylonjs.com/#W9LE0U#14 Have fun [EDIT] just change the camera position and target to get a budget starfield : http://playground.babylonjs.com/#W9LE0U#15
  1. Load more activity