All Activity

This stream auto-updates     

  1. Past hour
  2. LineMesh and LineSystem Per Point Color

    little modification : http://playground.babylonjs.com/#W9LE0U#22 the drop length varies with the drop velocity
  3. Need advice for some project

    Good. Stars with texture from the same atlas will be the best solution.
  4. Need advice for some project

    No thanks, no Tint. Bunnies will be replaced with star textures. I want it as simple as possible.
  5. Today
  6. Frame Fit Error Override.

    Just add "eps=1e-7" there and it'll be fine.
  7. Work in Progress: Escaping Earth - 3D space platformer

    I just finished it. Really cool, I love the accurate ratio of orbit sizes (given my interest/hobby in astronomy, things like these are a big plus for me), the atmosphere and the music! I didn't catch that auto-pilot hint, I only see it now among the screenshots, but I wouldn't have used it anyway, where's the fun in that? (this is not a suggestion to take it out, just my hardcore preference) Great job so far, will be interesting to see where this develops, good luck!
  8. LineMesh and LineSystem Per Point Color

    garden hose : http://playground.babylonjs.com/#W9LE0U#19 please wait for the water jet to stabilize [EDIT] stress1 : 50K drops at 60 fps on my muscle desktop http://playground.babylonjs.com/#W9LE0U#20 with FF57 stress2 : 100K drops still at 60 fps with Chrome http://playground.babylonjs.com/#W9LE0U#21
  9. How to Clone a Loaded Mesh on Demand

    If it's undefined, it might mean that the model hasn't been loaded yet. Make sure all models have been loaded before allowing players to join.
  10. How to make FreeCamera push objects

    Aahh, you decided NOT to use a gizmo-mesh/impostor on the camera itself. Interesting. Very creative! I was assuming that you would, and MOST of my previous post was talking about how to move/stop the camera gizmo. An impostor on the camera would give your impacts... direction angles and restitution power... that the physics engine calculated. But, as we know... camera nav would be more of a challenge, if the camera parent/gizmo had physics. Anyway, direction. If you do... var dir = camera.position.subtract(collidedMesh.getAbsolutePosition())... you will get a direction... which might need a .negate() to turn it the correct direction. Or, instead of negate(), you can reverse the subtraction... var dir = collidedMesh.getAbsolutePosition().subtract(camera.position); You would do this direction-deriving... inside of your onCollide func. (You probably knew that already, but future readers might not.) And, you already know about scaling a vector3, so you know how to amplify or reduce the magnitude of that direction vector. Our lights have a .setDirectionToTarget(), useful for directional and spot lights. It uses the same positional subtraction method. Hope this helps. Hope I didn't tell you anything incorrect. Congrats on the successful PG tests... well done.
  11. Playground Based Tutorials

    @Wingnut Yes I always just use light theme and now I see the issue. Will find away to react to dark theme.
  12. 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.
  13. 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.
  14. Be careful to use version 3.0 or 3.1 of BabylonJS
  15. 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>
  16. 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
  17. 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>
  18. 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.
  19. 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>
  20. 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>
  21. 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
  22. 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>
  23. 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>
  24. 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?
  25. How to add collider for slide in BabylonJS

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

    I think reflectivityTexture would be the '_MetallicGlossMap' or '_SpecGlossMap' of the material
  27. 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 ?
  1. Load more activity