Search the Community

Showing results for tags 'material'.



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 72 results

  1. Hello, I have a little Problem with my Mirror Material. I cant get the Blur to work. If I try to blur the reflections in this playground Example http://www.babylonjs-playground.com/#EKFLA#13 by adding the lines: mirrorMaterial.reflectionTexture.blurKernel = 64; mirrorMaterial.reflectionTexture.blurRatio = 1; everything works fine. But If i try it in my own Scene nothing happens (changing the Values has zero Effect). Does anybody have an idea why it works in the playground but not in my scene?
  2. Hi all, I want to make a gradient material, which has silver color from top and purple color at bottm ( pls. see attached pic); I found "babylon.gradientMaterial.min.js" this file from github. and copied code from https://doc.babylonjs.com/extensions/gradient ; var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene); var gradientMaterial = new BABYLON.GradientMaterial("grad", scene); gradientMaterial.topColor = BABYLON.Color3.Red(); // Set the gradient top color gradientMaterial.bottomColor = BABYLON.Color3.Blue(); // Set the gradient bottom color gradientMaterial.offset = 0.25; sphere.material = gradientMaterial; but I came across the problem with "Uncaught TypeError: Cannot read property 'getTextureMatrix' of null" Can anybody help me what caused this error? can you suggest any other solution to gradient effect, except shadows, coz it's quite hard for me to learn in short time in my project. Thanks in advance.
  3. Hi, what would be the best way to crate lamp like mesh, that is half transparent and is lightened from inside (emits light). Thanks.
  4. solved

    Hi, just pulled newest version of babylonjs and got some problems with PBR material for chrome, it is just black and don't use environment texture from scene anymore. Texture is created in code: this.scene.environmentTexture = new HDRCubeTexture( "environment.hdr", this.scene, ); Material is inside babylon json file part of multi material, { customType: "BABYLON.PBRMaterial", name: "material name", id: "material-id", microSurface: 0.9, reflectivity: [0.8, 0.8, 0.8], albedo: [0.02, 0.02, 0.02], environmentIntensity: 0.5, } Something changed in serialisation of material or I am missing some props in json? as it worked before Also texture is loaded.
  5. Hello, After one year of the PBR Material, we collected most of the required feedback to make it Awesome. But unfortunately, this will go with some breaking changes.. I am really not happy to integrate them but they are for the best and I will fully document them. Knowing our backward compatibility Philosophy in BJS, I just want to give a long time ahead with our plan to ensure this will cause the lowest level of disruption on your projects. Strikeout tasks have been completed. First thing, is the migration of the current PBRMaterial in MaterialsLibrary under the name LegacyPBRMaterial to ensure that the ones among you relying on it can continue to find the current version as of today. This will not be fully maintained but mainly keep for reference during the time everybody migrates to the newer/greater one. Only urgent fixes will be addressed on it. As nobody seems to rely on them, the overloaded values used for debug but taking quite a big amount of code will be removed from the material. All the scalar values will be multiply by their respective maps like albedoColor * albedoTexureSampled (currently it is totally inconsistent and depends of the channel) The different channels will be renamed to map with the GLTF nomenclature (At least I will not have anymore issues in naming :-) ) to allow an easier adoption of BJS and less ramp up for everybody. For example, the material microsurface will be named back to glossiness and reflectivity to specular... All the Maths issues and bugs presents in the material will be fixed. The environment blur will be fixed through offline and/or loadtime GPU generation. (This should be compatible with browser not supporting both FullFloat and Texture LOD) A migration from full float to LUV is in our minds for the environment to allow the use of none full float buffers with HDR compatibility. UBO, Push Mode and the full sets of greatest new features will be added to the new version. A new light type will be created to ensure an easier management of the intensity value in PBR mode. I should not forget a lot here and I hope you understand the future change. This is planned to happen during this month so do not hesitate if you have any feedback, think about any blockers or other evolution you would like to see in. As a consolation gift for the breaking change, I can propose to add the pbr exporter in 3dsMax or blender ?
  6. Hi everyone, I need help. Could someone write for me function 'myFunction' which changes the colour of the material. I don't know in which place I need add this. Commented function setTimeot change the colour. When I added function 'myFunction' in this place i have error 'myFunction is not defined'. Do you have good tutorials for the beginners? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.5.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas"></canvas> <div> <button onclick="myFunction()">Click me</button> </div> <script> window.addEventListener('DOMContentLoaded', function() { // your code here var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { // create a basic BJS Scene object var scene = new BABYLON.Scene(engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // target the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas camera.attachControl(canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // create a built-in "sphere" shape; its constructor takes 4 params: name, subdivisions, radius, scene var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape; its constructor takes 5 params: name, width, height, subdivisions and scene var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene); // Define a material var material = new BABYLON.StandardMaterial("std", scene); material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5); //setTimeout(function(){ material.diffuseColor = new BABYLON.Color3(0.5, 1, 2); }, 3000); // Apply the material sphere.material = material; // return the created scene return scene; } var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); window.addEventListener('resize', function() { engine.resize(); }); }); </script> </body> </html>
  7. Hi, I'm trying to reproduce ocean shader like this one: https://jbouny.github.io/fft-ocean/#day I know we have waterMaterial in Babylon (which is gorgeous!) but not quite what I'm after: it only works with windForce/windDirection which looks like you're constantly moving or as if water is constantly flowing. I've tried to use shader which you can find at https://github.com/jbouny/fft-ocean but it's just waaaay over my head! First of all, I can't figure out how to split it into vertex/fragment shaders to use in Babylon. Any shader/GLSL gurus out there, any help hugely appreciated!
  8. Hi all, I found something weird while optimizing my code: I was using InstancedMesh as much as possible, and switched all my materials to ShaderMaterial. And then boom, everything disappeared. After a bit of research, it seems instanced meshes will simply not be drawn when their source has a ShaderMaterial assigned. Playground repro: http://www.babylonjs-playground.com/#TWDEA#6 Uncomment lines 40 to 44 to see for yourself. It's actually a bit more complex than that: when you assign a shader material to it, even the source mesh disappears if it has been instantiated (?), but only if its instances are in the field of view. I'm currently looking at BJS code and ANGLE_instanced_arrays doc (the extension used for drawing instanced meshes), but I thought I'd come here to fish for ideas... FYI these are two errors I noticed in the log when this problem showed (errors not always there): drawElementsInstancedANGLE: at least one enabled attribute must have a divisor of 0glDrawElementsInstancedANGLE: attempt to draw with all attributes having non-zero divisorsThanks
  9. I'm trying to use a video to set the alpha information on a standard material. The video displays fine(passed into the diffuse) but can't figure out how to pass this into the alpha with correct results. My code.. Ref: http://doc.babylonjs.com/tutorials/materials scene.seaPlane = BABYLON.Mesh.CreateGround("ground1", 36,36, 2, scene); var mat = new BABYLON.StandardMaterial("mat", scene); var videoTexture = new BABYLON.VideoTexture("video", ["textures/waterRing.mp4"], scene, true, true); mat.diffuseTexture = videoTexture; mat.diffuseTexture.hasAlpha = true; mat.useAlphaFromDiffuseTexture = true; scene.seaPlane.material = mat; videoTexture.video.play(); There is no explicit alpha channel in my video file, so perhaps this is where I'm going wrong? Maybe it's better to render the video out as a sequence of pngs Thanks,
  10. Hi, I want to clone meshes that I load with the obj loader. The problem seems to be that the material is assigned somewhat later, so when I clone the mesh directly in the callback from the SceneLoader.ImportMesh function, it has no material. If I make another clone from the very same instance some time later, it has material. For example this would lead to no material in the clone: BABYLON.SceneLoader.ImportMesh("", this.serverUrl, encodeURIComponent(fileName + ".obj"), this.scene, (mesh) => { meshContainer = mesh.clone(name, undefined, false); resolve(meshContainer); } while this would: BABYLON.SceneLoader.ImportMesh("", this.serverUrl, encodeURIComponent(fileName + ".obj"), this.scene, (mesh) => { setTimeout(() => { meshContainer = mesh.clone(name, undefined, false); resolve(meshContainer); }, 100); } (It is wrapped inside a Promise) Is this an expected behaviour? Is it possible to get the callback when everything is loaded completely? Many thanks, Cheers, janx
  11. Hi everybody! I get the following errors (relevant excerpt) in the console: BJS - [13:19:53]: Unable to compile effect:... ... BJS - [13:19:53]: Error: ERROR: 0:1001: 'vBumpInfos' : undeclared identifier ERROR: 0:1001: 'y' : field selection requires structure or vector on left hand side meanwhile trying to add a normal map (by means of bump texture) to any PBR Material. My material definition is: var myMaterial=new BABYLON.PBRMaterial("plastic",Scene); myMaterial.reflectionTexture=txtHDR; myMaterial.bumpTexture=new BABYLON.Texture("assets/textures/11_onetile.png",Scene); myMaterial.cameraExposure=exposure; myMaterial.cameraContrast=contrast; myMaterial.microSurface=0.96; myMaterial.albedoColor=BABYLON.Color3.White(); myMaterial.albedoTexture=new BABYLON.Texture("assets/textures/QIS_Exterior_BaseColor.png",Scene); myMaterial.reflectivityColor=new BABYLON.Color3(0.07,0.07,0.07); myMaterial.metallicTexture=new BABYLON.Texture("assets/textures/QIS_Exterior_Metallic_PBR.png",Scene); myMaterial.useRoughnessFromMetallicTextureAlpha=false; myMaterial.useRoughnessFromMetallicTextureGreen=true; If I remove the offending line: myMaterial.bumpTexture=new BABYLON.Texture("assets/textures/11_onetile.png",Scene); the material works flawless (but of course without normal map). My question: Are BJS PBR Materials compatible with Normal Maps?
  12. Hello I am still somewhat new to Babylon and i'm having the following problem. I am loading an .obj model into my scene and I wish to apply a standard material onto the meshes, after the model has loaded. But my problem is, that the materials are not applied in the success callback. I have a button to maually apply the materials and it works fine. document.getElementById("applyMaterials").addEventListener("click", function(e) { var meshMaterial = new BABYLON.StandardMaterial("meshMaterial", scene); meshMaterial.backFaceCulling = false; meshesGlobal.forEach(function(element) { element.material = meshMaterial; }, this); }); I have tried my code in the playground with the skull.babylon model and it works fine. http://www.babylonjs-playground.com/index.html#EAY2GH Am I missing someting? Thanks!
  13. Hi guys! I have small problem, If I dispose WorldSpaceCanvas2D, material from canvas stay on the scene Example http://www.babylonjs-playground.com/#JG2PA5, you need look in console, you can see after disposing canvas the material on scene "myCanvas_Material" How I can dispose this material? Thanks!
  14. Hi, We are developing an archviz application with Babylon. So, obviously, we are looking for the most realistic render. In the archviz world (outside babylon), PBR is currently the way to go, so we plan to create PBR materials. But what is the babylon roadmap regarding this? Is it just a (really cool) feature added without further development, or a real direction took by the development team ? What about performance ? Are the PBR materials using more resources than Standards ? Thanks for your expertise.
  15. Maybe I have to explain it a bit more: I have a mesh-model (laptop screen) and I wish to see NO reflections looking in the normal of the surface but the more I turn the laptop, the more reflections should appear. Is this possible? Greetings and thank you
  16. i'm very sorry to bother the forum again, but this is for the benefit of learning i applied material from the blender color palette to my model, but it seems not to be exporting here's my blender file https://www.dropbox.com/s/y6j5sfro9t52vdn/venom joker riggedddd.blend?dl=0
  17. Hey @Deltakosh, @Sebavan or @RaananW can i pick you guys brains for a sec... I am trying to use the Simple Material with lighting support. But for some reason the 'BACK-SIDE' of the lighted surface is really black. This is the simple code i use to create a SimpleMaterial: var tester:BABYLON.AbstractMesh = this.scene.getMeshByName("Tester Cube 3"); var material:BABYLON.SimpleMaterial = new BABYLON.SimpleMaterial("simpleMaterial", this.scene); material.diffuseColor = BABYLON.Color3.White(); material.diffuseTexture = new BABYLON.Texture("/scenes/amiga.png", this.scene); tester.material = material; But take a look a t the Cube on the LEFT... That is using the BABYLON.SimpleMaterial and the Cube on the right with looks perfect is using a standard shader and material. Why is the back side too black when i thought SimpleMaterial supports the basic lighting workflow??? Note the Beautiful shadows ... One is BAKED using Lightmaps and the Other is realtime ... But the look beautiful
  18. PBR RESEARCH its amazing what you can do to these pbr materials , light settings, cameras, physics ... First PBR materials test Shader samplers of properties BABYLONJS Features Here is a small reminder of the PBR material supported features: Albedo, Reflectivity, Microsurface Reflection / Refraction Normal Map / Parallax Shadows (as the standard material) Energy Conservation Gamma Correction Inversed squared light Falloff and Light Radius HDR Texture and Seamless Cubemap (LOD extension required) Environment Irradiance Camera controls: Contrast and Exposure Camera controls: Color Grading and Color Curves Zero Light Lighting Debug Controls BABYLONJS PARAMS directIntensity: Controls the amount of diffuse and specular the material is reflecting. emissiveIntensity: Controls the level of emissive light the material is emitting. environmentIntensity: Controls the level of the reflected light from the environment. specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity. MicroSurface (AKA Glossiness or specular power) reflectivityTexture= texture; useMicroSurfaceFromReflectivityMap = true; useMicroSurfaceFromReflectivityMapAlpha = true; reflectionColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective. OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1 overloadedAlbedo = new BABYLON.Color3(0, 0, 1); overloadedAlbedoIntensity = overloadedIntensity; // Creates a reflection texture. var reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene); // Creates the pbr material to use in the scene var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.reflectionTexture = reflectionTexture; pbr.reflectivityColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective. The diffuse reflection will be described later in the Environment Irradiance section. Another interesting addition to the reflection is the ability to keep the most luminous part of the reflection over transparent surface... Yeah, it does not make much sense... Actually if you look through a window at night from a lit room, you can see the reflection of lights or TV on the glass. This is the same for reflection in the PBR Material. A special property pbr.useRadianceOverAlpha = true; has been added to allow you to control this effect. Not only reflection (AKA radiance) but specular highlights can be seen on top of transparency. glass.reflectionTexture = hdrTexture; glass.alpha = 0.5; // realism reflection material.emissiveFresnelParameters = new BABYLON.FresnelParameters(); material.emissiveFresnelParameters.bias = 0.4; material.emissiveFresnelParameters.power = 140; material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Red(); material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Blue(); Camera Control Photographic tone mapping and deals with the contrast directly from the material. var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.cameraExposure = 0.66; pbr.cameraContrast = 1.66; //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Roughness: parameter can “flatten” the color transitions. You can use it to make your material appear dusty and flat Reflections: Black color makes the material non-reflective, white color makes it fully reflective. All the gray scale values between increase or decrease the reflection strength Just like with the Diffuse, you can use Color, Bitmap or Procedural map in the Reflect slot. Glossiness: This is the parameter that controls how sharp/blurred are the reflections. Some real world objects, like polished metal, mirror, chrome, have very sharp reflections, while other materials, such as wood, concrete, plastic, etc., have blurred reflections. BABYLONJS //MicroSurface (AKA Glossiness or specular power) BABYLON The micro-surface of a material defines the way it is reflecting the incoming lights. It is not defining the amount, only how. A glossy material will tend to reflect the light in the same direction it is incoming. On a Matte one the reflected light will vary in contact of the surface. http://babylonjs-playground.com/#1LZALU#5 Tips: To achieve the best results, you can store the glossiness in the alpha channel of the reflectivity map (this prevents having a constant gloss on one material): materialSphere.reflectivityTexture = texture; materialSphere.useMicroSurfaceFromReflectivityMap = true; Ligthing Intensity In order to allow finer grain control of the lighting, the following properties have been added in the material. directIntensity: Controls the amount of diffuse and specular the material is reflecting. emissiveIntensity: Controls the level of emissive light the material is emitting. environmentIntensity: Controls the level of the reflected light from the environment. specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity. Fresnel changes the reflection strength depending on the viewing angle. General rule is that reflections are weaker if the surface is facing you perpendicularly and increase in strength as the surface approaches parallel position relative to your viewing angle. As a general guideline, here are the Reflect IOR values for some common object types: water 1.33 plastic 1.45 glass 1.5-1.8 diamond 2.4 compound materials like wood, stone, concrete etc 3-6 metals 20-100 Reflection Depth: This is the number of times a light ray is reflected before stopping the calculations. When the set number of reflections has been calculated, the rest are simply displayed as the Exit color. You can try setting a bright color as the Exit color to see how much information you lose. BABYLONJS Reflectivity (AKA specular color) The reflectivity of a material defines the amount of light it is reflecting. Basically, a black specular will mean almost no reflection and white will be close from a perfect mirror: Tips: To achieve the best results use a specular map stored in a texture: materialSphere.reflectivityTexture = texture; Reflection The key purpose of a PBR material is to conserve the energy (not emitting more light than it receives). If a lot of light is reflected from the environment the diffuse reflected light will drop. This means that without Reflection Map the material would be black if the specular is close to white (reflecting nothing). This is why we introduce in the material a Reflection Color parameter to ensure the material still works without Reflection texture. var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.reflectionColor = new BABYLON.Color3(1.0, 0.0, 0.0); Refractions: These settings control if and how the material let’s the light through it. Common materials that have refractive properties are glass, water, gems, transparent plastics, etc. First parameter that controls the refractions is Refract color. As before, it goes from black (no refractions) to white (full refractions) and everything in between is a mix between Diffuse and Refraction. OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1 materialSphere.overloadedAlbedo = new BABYLON.Color3(0, 0, 1); materialSphere.overloadedAlbedoIntensity = overloadedIntensity; Refraction glossiness: Just like with the reflections, you can change how blurry are the refractions. This effect is great for frosted glass or any other rough surface that lets through the light but distorts it along the way. This one increases render times and noise a lot so be careful with it. No need to go lower than 0.6 for most materials. INDEX of REFRACTION: has been calculated for many materials, so you don’t need to guess. You can find various IOR tables on the internet. Here is one of them: Acetone 1.36 Actinolite 1.618 Agalmatoite 1.550 Agate 1.544 Agate, Moss 1.540 Air 1.0002926 Alcohol 1.329 Amber 1.546 Amethyst 1.544 Crystal 2.00 Diamond 2.417 Emerald 1.576 Ethanol 1.36 Ethyl Alcohol 1.36 Glass 1.51714 Glass, Albite 1.4890 Glass, Crown 1.520 Glass, Crown, Zinc 1.517 Glass, Flint, Dense 1.66 Glass, Flint, Heaviest 1.89 Glass, Flint, Heavy 1.65548 Glass, Flint, Lanthanum 1.80 Glass, Flint, Light 1.58038 Glass, Flint, Medium 1.62725 Gold 0.47 Ice 1.309 Ivory 1.540 Jade, Nephrite 1.610 Jadeite 1.665 Lead 2.01 Malachite 1.655 Methanol 1.329 Moonstone, Albite 1.535 Nylon 1.53 Onyx 1.486 Opal 1.450 Oxygen (gas) 1.000276 Oxygen (liq) 1.221 Pearl 1.530 Plastic 1.460 Plexiglas 1.50 Polystyrene 1.55 Quartz 1.544 Quartz, Fused 1.45843 Rock Salt 1.544 Rubber, Natural 1.5191 Ruby 1.760 Sapphire 1.760 Silicon 4.24 Steel 2.50 Tiger eye 1.544 Topaz 1.620 Tourmaline 1.624 Turpentine 1.472 Turquoise 1.610 Water (gas) 1.000261 Water 35’C (Room temp) 1.33157 Zirconia, Cubic 2.170 Max depth works just like with the reflections. The default value is usually fine, but for scenes with large amount of refractions, you should increase it. Fog Color. It is great if you want to tint the glass in a realistic way. Using the Fog color makes thinner parts lighter and thicker parts darker. You can use the Fog multiplier value to adjust how strong is the tint. I suggest using colors with less than 255 lightness and saturation for realistic results. You can control the relationship between object thickness and Fog intensity by using the Fog value. Look at the examples to see how it works. Negative values make the tinting stronger and color transitions more extreme, while positive values make the fog smoother and weaker. Use it together with fog multiplier to get the effect you need. The biggest drawback of the Fog color is that you can not use a map in this slot, this means you can only use a single color. If you want to create a stained glass material or glass with multiple colors, you will have to do that by using the Refract color and not the Fog. It is, however, great for those single-colored materials and much more realistic than simply changing the Refract color. Anisotropy allows you to create stretched highlights. In real world these are most commonly seen on brushed metal surfaces with long, parallel ‘scratches’. Anisotropy allows you to fake this by stretching and rotating the highlights as you like. Bump and Displace slots first. Both of these slots allow you to assign a bitmap or procedural map to simulate unevenness and deformation of the objects surface. Bump does so without changing the overall geometry of the object, but Displace actually subdivides and deforms the object during rendering. The deformations work like this – middle grey [128;128;128] of the map does not change anything on the object, darker values push the surface inwards while lighter values pull it out. The further this value is from medium gray, the stronger is the effect. Color of the map is not taken into account and only the lightness value is used. Last map we are going to look at is the Opacity map. It works very simple. Pure white value is used for the non-transparent parts of the material and pure black is for completely invisible parts of the material, everything in between is more or less half transparent. It is great if you need to simulate stuff like tree leaves or lace fabric without using a large amount of polygons. BRDF DOCS ~ref:http://doc.babylonjs.com/tutorials/Advanced_Texturing ~ref:http://doc.babylonjs.com/tutorials/Advanced_Texturing ~ref:http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master ~ref:http://blog.selfshadow.com/publications/s2012-shading-course/burley/s2012_pbs_disney_brdf_slides_v2.pdf
  19. WebGL supports textures with base64 Data URLs, following the format "data:[mediatype];base64,[base64string]". However, when creating a texture with a data url in Babylon.js: var material = new BABYLON.StandardMaterial("0", scene);material.diffuseTexture = new BABYLON.Texture(dataUrl, scene, false, false, BABYLON.Texture.CUBIC_MODE);the browser console shows the message: Uncaught TypeError: Cannot read property 'replace' of nullIs there something I am doing wrong or is it a Babylon bug? I attached my full test code. Thanks! index.html
  20. I'd like to tint a model to black with a certain amount of transparency, let's say 60%, in a way that you'll be able to see the model's texture beneath the black tint, at 40% clarity. I created a material with black diffuse color, and applied it to the model's meshes. It is pitch black though, is there a way to make it only 60% tinted? http://www.babylonjs-playground.com/#1SVN3I#57
  21. I have a mesh (container) that contains another mesh (sphere). I'd like to set a material to the container mesh, in a way that it is applied to all the meshes it's parenting. (sphere in this case) I created a PG showing that it doesn't work: http://www.babylonjs-playground.com/#L69M2#1 Is such a thing not supposed to work? My main reason for doing it is adding a material on top of a mesh that already has a material without overriding the previous material. (stacking materials) e.g. adding a material that adds a 50% transparent black tint to a mesh that already has a material, without touching that mesh's material (sort of adding a material on top of it).
  22. Hi all, I tried to set up a scene in the playground with a custom cubeTexture, but playground doesn't like it https://www.babylonjs-playground.com/#1XOKHQ#1 So for now my simple scene is on my ftp : https://www.nothing-is-3d.com/tmp/cubemapBJS/ This is a screenshot from the photoshop file used to generate the cubemap (based from the famous tropicalSunnyDay) Exported files are located here : https://www.nothing-is-3d.com/tmp/cubemapBJS/cubemap/ And here what i get, check how the pz is mapped : So simple question why the cubemap is inverted ? Is it me who is doing it wrong ?
  23. Hi All, I would like to replicate what I've seen referred to in some other engines as ambient light; definition of which being - a light that evenly distributes across the whole scene; e.g. doesn't cast shadows, and no parts of the scene look darker / lighter than any other part. My main reason for this is that some of my 3D content will need to have light maps baked into the texture images (for other non-babylon related reasons) & I don't want the default babylon lighting to affect this light mapping. I noticed this topic asked a similar question: However the answer they got didn't seem to satisfy my requirements. So far - the closest solution I've come up with is: for (i = 0; i < newScene.lights.length; i++){ newScene.lights.setEnabled(false); } for (i = 0; i < newScene.materials.length; i++){ newScene.materials.emissiveColor = newScene.materials.diffuseColor; } However this assumes that all my materials are solid colour; which they won't all be; some of them will have image textures. Any advice would be greatly appreciated? Perhaps a shader effect might be of help? Thanks!
  24. Hello I am unable to apply material to objects loaded in .gltf/.glb format but am able to do so for objects loaded in .obj formal. I have attached chair_gltf.png, chair_obj.png and relevant code below. I would like to create a demonstration in the babylon playground but cant since I dont know how to add assets to the playground. Questions 1) Can someone help me figure out how to apply materials to models loaded via gltf? 2) How does one add static assets to babylon playground? function addObject(scene, model){ var scale = model.scale; var pos = function(t) { t.loadedMeshes.forEach(function(m) { console.log(m.material) m.scaling = new BABYLON.Vector3(scale,scale,scale); let materialSphere1 = new BABYLON.StandardMaterial("texture1", scene); materialSphere1.alpha = 0.5; materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7); m.material = materialSphere1; console.log(m.material) }); }; var loader = new BABYLON.AssetsManager(scene); let file_dir = dirname(model.gltf_url).substring(1) + '/' let file_name = basename(model.gltf_url) var object = loader.addMeshTask(model.title, "", file_dir, file_name); object.onSuccess = pos loader.load(); }
  25. Hello, I'm realy new to this and i want to apologize in advance if this question already had been handled a couple of times, but i could not find a solution after 2 days. So i'll give it a try and ask you guys What i want: I do expect Points (x,y,z) which build a closed custom shape. The shape may consist of n-Points (in my Example there are 5). The shape also has to be extruded by a specific length. Everything will be extruded into the Z-Axis. Next step is creating a material and applying it to the Mesh. The Problem: Because of the CAP_ALL parameter my texture is not aligned properly (see related question: related post). I can't use the MeshBuilder.CreateBox because my shapes are not always boxes and i could not find any way to fix my Mesh's uvs You can see my example here: http://www.babylonjs-playground.com/#ULTEI#3 My Solution: I create a box and subtract each face. This is the only possible solution i found. (Yet it's not acceptable) You can see the shame here: http://www.babylonjs-playground.com/#ULTEI#4 Can anyone point me in the right direction how to manage this? Any help would be appreciated. Thank you all in advance