Search the Community

Hello, I have a scene which allows you to paint on 3D objects. In addition to painting on 3D objects, I need to add a function in which you can load an existing texture, and paint on the already textured object directly. In the link below, you'll see a sphere which you can paint directly onto - if you want to change the brush color, click the color icons on the right side of the interface. The rest of the interface is not yet connected to any functions. You'll also see a plane in the scene which is rendered white - although I have applied a MultiMaterial containing 3 materials onto this plane object; one which has a color value of white (1,1,1), a second material which has a texture applied to it, and a 3rd material which has the same dynamic texture applied to the sphere which allows you to paint on the sphere. I'm pushing all 3 materials into a single MultiMaterial "var multimat", but only the first material with the color value of (1,1,1) is rendered. The dynamic material is functioning on the plane, as you can paint on the plane directly (with no result on the plane) since it shares the same dynamic material as the sphere, and you'll see the paint appear on the sphere when painting on the plane. The link to this scene is: http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index.html Below is a portion of the script which is used for the scene elements which are having issues. The code below is not useful for testing or building a playground scene, as it is a small portion of just one java script to define the app. The code containing the multi-material for the plane is placed between two long lines of "//" remarks which are repeated numerous times to make the problematic code easier to locate in the script: function init3d (scene, canvas) { //var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); // var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene); //camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -15), scene); //camera.setTarget(BABYLON.Vector3.Zero()); var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.55, -10, BABYLON.Vector3.Zero(), scene); //camera.setPosition(new BABYLON.Vector3(-15, 3, 0)); //camera.attachControl(canvas, true); // Skybox var skybox = BABYLON.Mesh.CreateBox("skyBox", 200.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("./skybox/TropicalSunnyDay", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial; skybox.layerMask = 1; // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.7; // light for video screen var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 80, -80), scene); /////////////////////////////////////////////////////////////////////////////////////////////////////// var groundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); var dynamicMaterial = new BABYLON.StandardMaterial('mat', scene);dynamicMaterial.diffuseTexture = groundTexture;dynamicMaterial.specularColor = new BABYLON.Color3(0, 0, 0);dynamicMaterial.backFaceCulling = false; // Create sphere var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 5, scene); sphere.material = dynamicMaterial; sphere.rotation.x = -Math.PI / 2; // Move the sphere upward 1/2 its height sphere.position.y = 1; // Create ground var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 2, scene); ground.position = new BABYLON.Vector3(-200,0,0); ground.material = dynamicMaterial; ground.visibility = 0 var material0 = new BABYLON.StandardMaterial("mat0", scene); material0.diffuseColor = new BABYLON.Color3(1, 1, 1); var material1 = new BABYLON.StandardMaterial("mat1", scene); material1.diffuseColor = new BABYLON.Color3(0, 0, 1); material1.diffuseTexture = new BABYLON.Texture("./textures/video_screen_512.png", scene); var material2 = new BABYLON.StandardMaterial("mat2", scene); material2.diffuseTexture = groundTexture; var multimat = new BABYLON.MultiMaterial("multi", scene); multimat.subMaterials.push(material0); multimat.subMaterials.push(material1); multimat.subMaterials.push(material2); //Creation of a video plane var plane = BABYLON.Mesh.CreatePlane("plane", "10", scene); plane.position = new BABYLON.Vector3(0,0.1,0); plane.scaling = new BABYLON.Vector3(.95,0.5,1); plane.visibility = 1; plane.material = multimat; /////////////////////////////////////////////////////////////////////////////////////////////////////// var clearColor = "#555555";var font = "bold 70px Segoe UI";var invertY = true;var text = "test";var color = "white"var x = 10;var y = 80; var context = groundTexture._context;var size = groundTexture.getSize(); if (clearColor) {context.fillStyle = clearColor;context.fillRect(0, 0, size.width, size.height);} groundTexture.update(invertY); If anyone can help me with the correct code to get the multi-material to function correctly where I can display the "video_screen_512.png" texture and also paint directly on the plane, it would be much appriciated. FYI - If I remove the material which is set as "var material0" from the script and from the MultiMaterial (this is the material which has the color value of (1,1,1)), then the material which is set as "var material1" containing the "video_screen_512.png" texture appears correctly on the plane.In addition, if I switch the order of the materials I'm pushing to the MultiMaterial where material2 is pushed before material1, then only the dynamic texture is displayed, and I can paint directly onto the plane. ( "var material1" containing the "video_screen_512.png" texture is not displayed.) An example of this code is below: var multimat = new BABYLON.MultiMaterial("multi", scene); multimat.subMaterials.push(material2); multimat.subMaterials.push(material1); Thanks, DB