@inteja
Copy pasting the code here for reference, as my playground is not opening. Whatever the image I’m loading here is not getting displayed on the mesh.
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, -30, -35), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
var positions = []
var indices = []
var counter = 0
for (var i = 0; i< 20; i++)
{
for (var j = -10; j< 10; j++)
{
positions[counter] = j;
positions[counter + 1] = i;
positions[counter + 2] = 0;
positions[counter + 3] = j + 1 ;
positions[counter + 4] = i;
positions[counter + 5] = 0;
positions[counter + 6] = j;
positions[counter + 7] = i + 1;
positions[counter + 8] = 0;
positions[counter + 9] = j;
positions[counter + 10] = i + 1;
positions[counter + 11] = 0;
positions[counter + 12] = j + 1 ;
positions[counter + 13] = i;
positions[counter + 14] = 0;
positions[counter + 15] = j + 1;
positions[counter + 16] = i + 1;
positions[counter + 17] = 0;
counter += 18;
}
}
var vertex_count = (counter + 1)/3;
for ( var i =0; i< vertex_count; i++)
{
indices[i] = i;
}
for(var i = 2; i<counter; i += 3 )
{
positions[i] = (positions[ i - 2]) * (positions[ i - 2])/20;
}
var positions_1 = []
for(var i = 0; i<counter; i += 3 )
{
positions_1[i] = positions[i] - 20;
positions_1[i + 1] = positions[i + 1];
positions_1[i + 2] = positions[i + 2];
}
//Empty array to contain calculated values or normals added
var normals = [];
//Calculations of normals added
BABYLON.VertexData.ComputeNormals(positions, indices, normals);
var vertexData = new BABYLON.VertexData();
vertexData.positions = positions;
vertexData.indices = indices;
vertexData.normals = normals;
var customMesh = new BABYLON.Mesh("custom", scene);
vertexData.applyToMesh(customMesh);
var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
customMesh.material = materialforbox;
materialforbox.wireframe = true;
//Empty array to contain calculated values or normals added
var normals_1 = [];
//Calculations of normals added
BABYLON.VertexData.ComputeNormals(positions_1, indices, normals_1);
var vertexData_1 = new BABYLON.VertexData();
vertexData_1.positions = positions_1;
vertexData_1.indices = indices;
vertexData_1.normals = normals_1;
var customMesh_1 = new BABYLON.Mesh("custom_1", scene);
vertexData_1.applyToMesh(customMesh_1);
var materialforbox_1 = new BABYLON.StandardMaterial("texture2", scene);
materialforbox_1.diffuseColor = new BABYLON.Texture('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/multi-colored-crumpled-paper-balls-pattern-royalty-free-image-1617394797.?crop=0.66682xw:1xh;center,top&resize=640:*', scene);
materialforbox_1.specularColor = new BABYLON.Color3(1,0,1);
customMesh_1.material = materialforbox_1;
//materialforbox_1.wireframe = true;
return scene;
};
@jayanthi I’m sorry I don’t think I can add anything more to this conversation.
You don’t have a working PG and you haven’t responded to my suggestions to date.
Start with a simpler PG (like the one I posted) rather than trying to generate a mesh dynamically with vertexData. Your mesh isn’t displaying at all, even before you try to apply a texture. You’re also setting wireframe true, so even if the mesh were ok, you’d not see the texture anyway. Even if you have a working mesh, that texture url likely won’t work because it points to a script with params that retrieves an image, but is not the image url directly. Try images from the PG texture library or reference external images directly e.g. http://www.example.com/path/to/image.png
@inteja My requirement of creating a mesh is like that, so i’ve created a custom mesh.
I have to map the textures form my local computer on top of the created mesh.
I’ve created the curvature in my code.
I read the post and all answers again. I’m afraid we are going nowhere with this (at least for me). I’ve still no idea of what you want to achieve. I’m a very visual person. I can best visualize pictures but I’m also able to assess a visual result using code. Here, I just have no idea. I can’t figure the source nor the desired effect (or range of effect). Really it would make things so much easier for us to try give you some valuable input if you could provide with just an example of your source and an example of the desired effect. Also to understand what you will do with this image output. What are the requirements. Like I still don’t know if the image will be 2D or if you need the mesh transformation because the image capture will be done with a 3D cam perspective or something. Just give us some food for our imagination to work, please…
As a side note, the code didn’t work for me and looking at it just like that, I don’t really feel like looking into this (actually I have no idea what this is supposed to do) Let’s just go back to the basics for a minute if this is ok with you?
@mawa thanks for your response.
Let me put my requirement this way. Hope this will make you understand.
Let’s say I’ve an image (my images are captures of papers). I want to present that image in different ways (which should be representative of realistic images) like the paper has been folded in the middle or in the edges. For example, let’s take very old book, the papers in that book have folds at the corners (just an example).
Yes, I think I got this point. What I still don’t know is what sort of quality you require, what sort of style you want and overall why does it have to be 3D. And will you do with your final effect version. Is it for print, for web, in 4K. Really, I don’t know how secret your project is but you should be able to share at least an example (of the source) and an example of the desired result. That would make things just so much easier. I mean I’ve worked for print for 15years and I also did many 2D paper effects (using PSD or AE). You know you can script them as well, right? I’m just still not understanding why it needs to be done with a 3D real time engine…
Else, I was thinking (if it needs to be a mesh deformation) what about using a terrain generator as a base instead of redoing the entire code. I guess this would work and there are already a number of pretty good dev in BJS for procedural terrain. Coupled with say a node material and/or bumb/normal/parallax, it could end up with a nice result I suppose…
Edit: OK, may be you could start by trying to play around a little with this one:
You would just need to have a bit of imagination about the result if
you where to replace the heightmaps and of course the textures.
lower or change the range of some parameters. Remove or ignore some (many actually because the project is really broad and cool).
You can already remove the trees and tweak a number of parameters that makes one think (me) that it wouldn’t be all too hard to get something out of it (just something?!…).
You would indeed need to lower all parameters, remove trees,etc… start with the threshold of geo to the lowest (not low enough:( but as you can see (imagine) pretty much everything in my opinion would be already there… and if your project is serious stuff and you’d like to use this base and technique, then may be @dunk would kindly give you a hand with it…?
If i’m interpreting the original poster correctly, they want an image on a crumpled plane.
I wouldn’t use my demo for that; it is optimized to make rivers flow down hill so the algorithm used is going to complicate things without adding any real benefit.
Having given the problem all of 30 seconds thought…
and assuming i understand the requirement correctly…
i suspect achieving this accurately will require modeling actual folds in a plane; Any attempt to map an image to an irregular plane will require stretching the image in places.
Accurately modeling folds in a plane sounds computationally expensive and complicated to me. I presume it’s a solved problem though. Try searching for academic mathematical papers on the subject.
If distorting the image via stretching it is acceptable, you could create a crumpled-looking plane using Delaunay Triangulation on a set of random points. Offset each point by a random height.
You’ll find libraries to compute Delaunay Triangulation for most lanuges.
Here’s a fun online demo that popped to the top of my search:
@mawa As per my project policy, I’m not supposed to disclose what’s the final purpose.
But I can give some info.
We will be providing some set of options (on our app) where user can select how his image wants to look alike. And this book curvature is one among them.
It would be great if this links opens up for you https://www.babylonjs-playground.com/#JIZN8I#6
I achieved what I wanted (tried with parabolic equation, now trying with other things like poisson and log curves), but the image is not mapping correctly.
@inteja you can download the image to your machine and provide that path instead of referring it from the url. The other way is this can be modified in your browser settings.
I also faced the same error. That’s because accessing settings in your browser.
If you really want to test the code, then download image and give the image path.
You asked why your image wasn’t displaying. I answered your question and provided a link. Use playground textures for testing as I’ve already said, or upload images to an online location that can be accessed from external domains.
Okay leave about texture mapping.
Can you pls point to line number 67 in my PG.
That’s where I’m doing all the curve manipulations.
I am trying for Poisson’s distribution now at the same line.
Edit: I also saw the crumpled paper ball texture used and this is nothing like I had imagined. Not even close to it. Even though I cannot see the result just now.
