Creating folds, curves and crumples for a paper

Hello folks,

I’ve a requirement where I should create curves, folds and crumples for an image (images are basically papers) where the amount of curves, folds and crumples to be applied on the image should be controlled.
I’m thinking of using PerlinNoise. I’m not sure whether I should be using it or there are more relevant things. And also not sure about how to use PerlinNoise.

Can someone guide me on this topic.

TIA.

I am not sure what you are trying to achieve with noise for fold ?

@jayanthi for folds, crumples and surface imperfections you can use pre-made normal or bump maps like these or these.

Or you could make your own using Blender 's new cloth sculpting brushes, then render out to normal maps.

@inteja Thanks for your references. But i’m actually looking the same which can be written in code. I want to perform the same operation on a large set of images, so that can be done with coding.

@sebavan Can you please suggest me how else I can achieve it.
My requirement is - For a set of images (these images are papers), I want either folds or crumples or curvatures to be done on them and take a screenshot of the result and save it.

@jayanthi it’s unclear to me exactly what you’re trying to achieve. When you say “images are papers” do you mean they’re images of pieces of paper? What’s a “curvature” in this context?

Either way, I think you could still do this in code with normal maps. Load in your set of images, apply as diffuse textures to planes, apply a series of fold or crumple normal maps to the planes, randomise them a bit (scale, rotation, uv offset etc), position lights to emphasize the folds and crumples, then save as screenshot.

@inteja yes the images are pieces of papers.
I’ve the same kind of flow in my mind as you said. But I’m really unsure how can I achieve it.
I’m very new to Babylon actually.
Can you please suggest me how can I do that. Here’s my piece of code which I’ve started with.
https://playground.babylonjs.com/#CPAT89

@Necips I’m not sure why this code is not showing up anything in my browser if I run it my local VS code.
I’m actually seeing blank space.

@jayanthi the playground is setup in a way to make it easy to get started straight away and see instant results, but if you want to integrate the code into your own local project you’ll need to add extra boilerplate stuff like an html page with a canvas element, then import babylon.js, instantiate the engine & scene and start the render loop.

Try going through the Getting Started documentation here:

Especially Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation

Also to get up and running quickly if you know how to use npm and typescript, try using one on the starter templates like this:

And there’s some explanatory documentation here:

@inteja I’ve all the setup done in my local machine.
I do coding from my local machine only always. But what I meant in the above comment is, the code is not showing up anything in my browser if I run it from my VS code.

It’s impossible to answer your question without further information. It could be anything.

I believe none of us in this forum did really understand the scope or the purpose.
Can you provide some example and details. Of what you have and want to achieve.
Is this a dynamic effect you want to apply or do you need to tweak or randomize it for each image? How do you select the amount of ‘effect’ (folding, crumple, etc…) on the picture? How many pictures? If you end-up with a PNG, why do you need a 3D real time approach?

@mawa Your question has my answer actually.

  1. I want the effect to be on large set of images.
  2. For each set, I’ve to define the amount of effect (that’s the reason why I prefer this effect via coding, so that I can define the effect for each set).
  3. It may or may not be a PNG file. I need image.

No console errors.

@inteja I’m looking something this way. this is the first step in my requirement.
https://playground.babylonjs.com/#T0MH37

Now, I want map images on top of this mesh.
And it will be great if you could help me how I can remove a black line coming at the bottom of the mesh.

@jayanthi your playground link doesn’t display anything for me and the code seems unrelated to what you’re trying to achieve.

Have you read the docs on how to add materials and textures to meshes?

https://playground.babylonjs.com/#T0MH37#3
can you try to open the link now

It does not work. Have you successfully opened the link and it displays something?

@jayanthi here’s a very simple PG with a mesh, paper texture and bump texture (for crumpled look).

https://playground.babylonjs.com/#VGIXRW

yes, this has been created by myself. I tried opening in another browser when I’ve not logged in and it opened.