How can I generate crumples, folds and curves on an image

Questions
,
1

I want to load an image from my local, and generate folds/crumples/curves on it. Can someone help me to achieve this. Currently, i’m able to load the image from my local. But I’m not sure how can I fold it or crumple it.

const canvas = document.getElementById(‘renderCanvas’);

const engine = new BABYLON.Engine(canvas, true);

var createScene = function () {

var scene = new BABYLON.Scene(engine);

scene.clearColor = new BABYLON.Color3(.5, .5, .5);

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, -1), scene);

light.intensity = 0.8;

// camera

var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);

camera.setPosition(new BABYLON.Vector3(0, 2, -8));

camera.attachControl(canvas, true);

var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);

materialPlane.diffuseTexture = new BABYLON.Texture("assets/task.PNG", scene);

materialPlane.visibility = 0.9;

materialPlane.transparencyMode = BABYLON.Engine.ALPHA_BLEND;

var gl = new BABYLON.GlowLayer("glow", scene);

gl.addIncludedOnlyMesh(materialPlane)

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {

    width: 20,

    height: 10,

  }, scene);

  plane.rotation.x = Math.PI / 2;

  plane.material = materialPlane;


return scene;

};

var scene = createScene();

engine.runRenderLoop(function() {

scene.render();

});

2

You should provide a repro in the Playground, it will be easier for people to help.

Also, that thread may be a starting point: Fold paper by mid-axis several times

1 Like