Search the Community
Showing results for tags 'dynamic texture'.
Found 11 results
-
Hi all, I am doing a test to a client who ask me to build a dynamic using a sequence of 3D rendered images, I told him than that is not the right way in WebGl, the correct is to convert the 3D objects and use than. But he said than right now they can not do that. So I tryed to use Dynamic Texture with canvas method and it works, but I wanna know if somebody knows a way to preload the sequence of images in BJS, to get better? Because I think that has a delay right now about the loading issue. You can see it here http://iprojects.space/upwork/laval/ Thanks
-
Hello. I have this Seat.gltf model in my scene that I exported it from 3ds Max. Anyways, how do I change the diffuse texture on it? The seat imports with a black texture (SeatBlack_baseColorTexture.png). I'd like to change it to this (SeatLime_baseColorTexture.png). My goal eventually is to let the user pick from a variety of seat colors. Any pointers in the right direction would be appreciated. Thanks. var mySeat = BABYLON.SceneLoader.Append("./models/", "Seat.gltf", scene, function (scene) { }, null, function (scene) { var LimeTexture = new BABYLON.PBRMaterial("", scene); LimeTexture.baseColorTexture = new BABYLON.Texture("models/SeatLime_baseColorTexture.png", scene); mySeat.material = LimeTexture; });
-
I'm using fabric.js to create a dynamic texture over a mesh. It works well except when the dynamic texture is moved through a UV seam. Does anyone know how I can get this working over a seam? Here's the playground http://www.babylonjs-playground.com/#9U086#118 If you drag the "webGL" text or rectangle around the cylinder you'll see it break when it hits the seam. I've attached a photo to demonstrate
-
Hello, Does anyone have an example on how to stream video into a scene and apply onto an object as part of a dynamic texture? Also, in a recent post I had discovered that when loading many textures into an array, the last texture is often not loaded, and sometimes more than one texture is not loaded. My solution was to load a small texture that isn't used in the scene, and then all textures except the last "dummy" texture almost always loads correctly. Wingnut and others tried to duplicate this in the playground as I did, as was unable to reproduce. However, I recall using a babylon.js function which waits for all textures to load before continuing the script. I can't locate the scripts I used this, so if anyone can point me to these functions, I would be grateful. However, streaming video onto an object as a texture (dynamice texture) is most important - as I'll find my lod scripts on disk when I really put in the effort. It's simply that I need streaming video on an object as soon as I can figure it out, or as soon as one of the genius' on this forum provides an example. As always, thanks for any help you might provide. Cheers, DB
-
Little fun for the week-end : http://www.babylonjs-playground.com/#1MURF7 A dynamic texture applied on a SPS composed with many little planes stuck together. Press "SPACE" then ... BOOM The same with an opaque texture to better understand : http://www.babylonjs-playground.com/#1MURF7#1 From the line 32, you can change some parameters. example : http://www.babylonjs-playground.com/#1MURF7#2 or something more dynamic : http://www.babylonjs-playground.com/#1MURF7#4 much more : http://www.babylonjs-playground.com/#1MURF7#5 Just make sure that your mouse pointer is NOT in the editor part, but in the scene part, else you can have some funny effect by pressing SPACE (or keeping it pressed)
-
hi, my problem is that i'm not able to use canvas as texture for my sprite. i tried to write the following code, someone can help me telling what i wrong? the code: <body> <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script> <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script> <script> var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700), MainRenderer = new PIXI.autoDetectRenderer(1355, 700), LightStage = new PIXI.Container(), MainStage = new PIXI.Stage(0x000000), lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4) PIXI.loader .add('bg','maschera.png') .add('bg_normal','maschera_n.png') .add('block_diffuse', 'developer_2.png') .add('block_normal', 'developer_normal.png') .load(function (loader, res) { var bg = new PIXI.Sprite(res.bg.texture); var block = new PIXI.Sprite(res.block_diffuse.texture); bg.normalTexture = res.bg_normal.texture; block.normalTexture = res.block_normal.texture; block.position.set(100,70); LightStage.addChild(bg); LightStage.addChild(block); var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7); ambientLight.position.set(100,100); LightStage.addChild(ambientLight); LightStage.addChild(lightOnDeveloper); LightRenderer.view.addEventListener('mousemove', function (e) { var rect = e.target.getBoundingClientRect(); lightOnDeveloper.position.x = e.clientX - rect.left; lightOnDeveloper.position.y = e.clientY - rect.top; }); animate(); }); function animate() { requestAnimationFrame(animate); LightRenderer.render(LightStage); } document.body.appendChild(MainRenderer.view); var canvas = LightRenderer.view; var LightStageBaseTexture = new PIXI.BaseTexture.fromCanvas(canvas,PIXI.SCALE_MODES.LINEAR); var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);var spriteLightStage = new PIXI.Sprite.(LightStageTexture);MainStage.addChild(LightStageTexture);// other code to add sprite to MainStageanimateMainStage();function animateMainStage() { requestAnimationFrame(animateMainStage);MainRenderer.render(MainStage);} </script> </body>i would like to know why the canvas don't display and why it isn't update. thanks in advance!
-
Dear All, Below is the code listing to try out the dynamic texture on imported mesh, but kind of fail on the "targetMesh". It only works when I'm using Plane mesh "newPlane" produced from the code using BABYLON.Mesh.CreatePlane. Am I missing something here? BABYLON.SceneLoader.Load("", "plane.babylon", engine, function (newScene) { newScene.executeWhenReady(function () { var canvas = engine.getRenderingCanvas(); //newScene.activeCamera.attachControl(canvas); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -125), newScene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); newScene.activeCamera = camera; //now here I want to select some meshes from the active scene var targetMesh = newScene.getMeshByName('plane'); if(targetMesh) { // debugger; // Create new standard material var stdMat = new BABYLON.StandardMaterial('Material', newScene); stdMat.alpha = 1; stdMat.backFaceCulling = true; stdMat.specularPower = 64; stdMat.useSpecularOverAlpha = true; stdMat.useAlphaFromDiffuseTexture = false; // emissive definitions; stdMat.emissiveColor = new BABYLON.Color3(0.00, 0.00, 0.00); // ambient definitions; stdMat.ambientColor = new BABYLON.Color3(0.00, 0.00, 0.00); // specular definitions; stdMat.specularColor = new BABYLON.Color3(1.00, 1.00, 1.00); var dynTexture = new BABYLON.DynamicTexture("Dynamic texture", 1024, newScene, true); dynTexture.uScale = 1; dynTexture.vScale = 1; dynTexture.coordinatesMode = 0; dynTexture.uOffset = 0; dynTexture.vOffset = 0; dynTexture.uAng = 0; dynTexture.vAng = 0; dynTexture.level = 1; dynTexture.coordinatesIndex = 0; dynTexture.hasAlpha = false; dynTexture.getAlphaFromRGB = false; // set stdMat diffuse texture stdMat.diffuseTexture = dynTexture; // draw text dynTexture.drawText("Eternalcoding", null, 100, "70px Segoe UI", "red", "#555555"); // set sub mesh material targetMesh.material = stdMat; // calculate mesh size var vectorsWorld = targetMesh.getBoundingInfo().boundingBox.vectorsWorld; var size = vectorsWorld[1].subtract(vectorsWorld[0]).length(); // distance between summit 0 and summit 1 // New Plane var newPlane = BABYLON.Mesh.CreatePlane("New Plane", size, newScene, false); newPlane.scale = 0.5; newPlane.position.z = targetMesh.position.z; newPlane.position.y = targetMesh.position.y; newPlane.position.x = targetMesh.position.x+(size/2); // newPlane.parent = targetMesh; // set sub mesh material newPlane.material = stdMat; stdMat.diffuseTexture.update(); } engine.runRenderLoop(function() { newScene.render(); }); });});Here is the "plane.babylon" {"autoClear":true,"clearColor":[0.0,0.0,0.0],"ambientColor":[0.0,0.0,0.0],"fogMode":0,"fogColor":null,"fogStart":0.0,"fogEnd":0.0,"fogDensity":0.0,"gravity":[0.0,0.0,0.0],"cameras":[{"name":"Camera001","id":"a713edbb-dbb0-4077-a018-06a07e8fb30c","parentId":null,"lockedTargetId":"5523fadc-396d-4b51-b859-4b9df68f56dd","type":"FreeCamera","position":[-202.8126,116.4834,-271.5265],"rotation":[0.0,0.0,0.0],"target":null,"fov":0.6024,"minZ":0.1,"maxZ":10000.0,"speed":1.0,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.0,0.0,0.0],"autoAnimate":false,"autoAnimateFrom":0,"autoAnimateTo":0,"autoAnimateLoop":false,"animations":[]}],"activeCameraID":"a713edbb-dbb0-4077-a018-06a07e8fb30c","lights":[{"name":"Default light","id":"2baddbc0-0c64-46ee-89ac-aa01cd23c503","parentId":null,"position":null,"direction":[0.0,1.0,0.0],"type":3,"diffuse":[1.0,1.0,1.0],"specular":[1.0,1.0,1.0],"intensity":1.0,"range":3.40282347E+38,"exponent":0.0,"angle":0.0,"groundColor":[0.0,0.0,0.0],"excludedMeshesIds":null,"includedOnlyMeshesIds":null,"autoAnimate":false,"autoAnimateFrom":0,"autoAnimateTo":0,"autoAnimateLoop":false,"animations":null}],"meshes":[{"id":"a2652875-3a25-4d9c-97ab-1d7d038c5f8e","parentId":null,"materialId":null,"isEnabled":true,"isVisible":true,"pickable":false,"pivotMatrix":null,"positions":[-56.0677,0.0,-45.6579,56.0677,0.0,-45.6579,56.0677,0.0,45.6579,56.0677,0.0,45.6579,-56.0677,0.0,45.6579,-56.0677,0.0,-45.6579],"normals":[0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0],"uvs":[0.0,1.0,1.0,1.0,1.0,2.0,1.0,2.0,0.0,2.0,0.0,1.0],"uvs2":null,"colors":null,"hasVertexAlpha":false,"matricesIndices":null,"matricesWeights":null,"indices":[0,1,2,3,4,5],"checkCollisions":false,"receiveShadows":true,"infiniteDistance":false,"billboardMode":0,"visibility":1.0,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":6,"indexStart":0,"indexCount":6}],"instances":[],"skeletonId":-1,"showBoundingBox":false,"showSubMeshesBoundingBox":false,"applyFog":true,"alphaIndex":1000,"physicsImpostor":0,"physicsMass":0.0,"physicsFriction":0.0,"physicsRestitution":0.0,"name":"plane","position":[0.0,0.0,0.0],"rotation":[-1.5708,0.0,0.0],"scaling":[1.0,1.0,1.0],"rotationQuaternion":null,"actions":null,"animations":[],"autoAnimate":true,"autoAnimateFrom":0,"autoAnimateTo":100,"autoAnimateLoop":true},{"id":"5523fadc-396d-4b51-b859-4b9df68f56dd","parentId":null,"materialId":null,"isEnabled":true,"isVisible":true,"pickable":false,"pivotMatrix":null,"positions":null,"normals":null,"uvs":null,"uvs2":null,"colors":null,"hasVertexAlpha":false,"matricesIndices":null,"matricesWeights":null,"indices":null,"checkCollisions":false,"receiveShadows":true,"infiniteDistance":false,"billboardMode":0,"visibility":1.0,"subMeshes":null,"instances":[],"skeletonId":-1,"showBoundingBox":false,"showSubMeshesBoundingBox":false,"applyFog":true,"alphaIndex":1000,"physicsImpostor":0,"physicsMass":0.0,"physicsFriction":0.0,"physicsRestitution":0.0,"name":"Camera001.Target","position":[-3.9516,-2.5059,23.297],"rotation":[-1.2479,0.5934,0.0],"scaling":[1.0,1.0,1.0],"rotationQuaternion":null,"actions":null,"animations":[],"autoAnimate":true,"autoAnimateFrom":0,"autoAnimateTo":100,"autoAnimateLoop":true}],"sounds":[],"materials":[],"multiMaterials":[],"particleSystems":null,"lensFlareSystems":null,"shadowGenerators":[],"skeletons":[],"actions":null}
-
Hello guys, I want to know if it's possible to use an image as a texture for a plane or a box and use a control panel to resize, move, etc the image on the plane. I suppose i have to use dynamic textures but i'm not very sure that will be the best way to have the result.
-
Hello to all the rouges out there, I have a scene with a GUI (interface) that uses 28 textures on babylon plane objects. I'm using bGUI for the interface, however, this appears to have nothing to do with bGUI as I've observed this behavior in previous scenes without any interface or GUI. The problem is that once I reached approximately 10+ textures (in this case), I began to notice that about 10 percent of the time any one of the textures (chosen at random) weren't loading, and the scene was displaying black on the plane mesh - appearing as though the texture didn't load into memory. I had to refresh (sometimes more than once) to load all textures. This only occurs for a single texture everytime it occurs, and my largest texture resolution is 300px X 300px. I am using a dynamic texture and painting on an object through the canvas - if this provides any additional useful information. However, in increasing the number of textures, this problem increased slightly - until I reached 28 textures, when the problem wouldn't resolve even with repeated refresh. It is always one texture, and no more. I also removed a texture and it's associated code, and the problem persists every time. I've tried adding texture.update(); and textureComplete = true; but perhaps I'm not using these correctly or in the best location in my script. I welcome any suggestions, and thank everyone in advance for reading this post. Cheers, DB -
Hello Everyone! I am wondering is there a way to save a dynamic texture to disk for later use?
-
Hello, I'm wrapping up a realtime multi-user drawing app using elements from an example joshcamas posted recently. I'm not including the GUI and much of the server calls in my example below, so running this script wil provide errors, but the whole script is 3x as large. However, if someone might help me to accomplish 2 things, I would be grateful. 1. Draw on a plane using a dynamic texture. 2. The base color of the plane is a color3 white (or other.) Here's the example: Thanks, DB
