基于babylon.js实现的三维草地模拟

grass simulation by babylonjs，性能很棒，真实感稍差一些。

webgl, babylon, grass, land

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2631
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function createScene(_a) {
    var engine = _a.engine;
    var scene = new Scene(engine);
    scene.clearColor.set(0, 0, 0, 1);
    var camera = new ArcRotateCamera('', -Math.PI / 2, Math.PI / 4, 2.2, new Vector3(0, 0.5, 0), scene);
    camera.attachControl(engine.getRenderingCanvas());
    camera.wheelPrecision = 100;
    camera.upperRadiusLimit = 15;
    camera.minZ = 0;
    var light0 = new PointLight('', new Vector3(10, 10, -10), scene);
    light0.intensity = 2.5;
    // basic ----
    var mesh = MeshBuilder.CreateDisc('', {
        radius: 1,
        tessellation: 16
    });

mesh.increaseVertices(32);
    mesh.rotation.x = Math.PI / 2;
    mesh.bakeCurrentTransformIntoVertices();
    var mat = createMaterial(scene, {
        grassHeight: 0.5,
        grassHeightContrast: 1.2
    });

mat.wireframe = false;
    mesh.material = mat;
    mesh.position.y = -0.1;
    // customize ----
    var mesh1 = MeshBuilder.CreateSphere('', {
        segments: 10,
        slice: 0.7,
        diameterX: 0.1,
        diameterY: 1,
        diameterZ: 0.1
    });

mesh1.material = createMaterial(scene, {
        grassHeight: 1,
        grassHeightContrast: 1
    });

mesh1.convertToFlatShadedMesh(); // <----
    mesh1.position.y = 0;
    // shadow
    var sg = new ShadowGenerator(256, light0);
    sg.bias = 0.0007;
    sg.setDarkness(0.5);
    sg.addShadowCaster(mesh1);
    mesh.receiveShadows = true;
    // anim
    var t = 0;
    var tn = new TransformNode('');
    mesh.parent = tn;
    mesh1.parent = tn;
    scene.onBeforeRenderObservable.add(function() {
        tn.rotation.y = t;
        t += 0.001;
    });
    return scene;
}

function createMaterial(scene, opt) {
    var nodeMaterial = new BABYLON.NodeMaterial("node");
    // InputBlock
    var position = new BABYLON.InputBlock("position");
    position.setAsAttribute("position");
    // VectorSplitterBlock
    var VectorSplitter = new BABYLON.VectorSplitterBlock("VectorSplitter");
    // AddBlock
    var Add = new BABYLON.AddBlock("Add");
    // VectorMergerBlock
    var VectorMerger = new BABYLON.VectorMergerBlock("VectorMerger");
    // ScaleBlock
    var Scale = new BABYLON.ScaleBlock("Scale");
    // VectorSplitterBlock
    var VectorSplitter1 = new BABYLON.VectorSplitterBlock("VectorSplitter");
    // TextureBlock
    var Texture = new BABYLON.TextureBlock("Texture");
    Texture.texture = new BABYLON.Texture("/uploads/1912/grass.jpg", scene);
    Texture.texture.wrapU = 1;
    Texture.texture.wrapV = 1;
    Texture.texture.uAng = 0;
    Texture.texture.vAng = 0;
    Texture.texture.wAng = 0;
    Texture.texture.uOffset = 0;
    Texture.texture.vOffset = 0;
    Texture.texture.uScale = 1;
    Texture.texture.vScale = 1;
    Texture.texture.gammaSpace = true;
    // VectorMergerBlock
    var VectorMerger1 = new BABYLON.VectorMergerBlock("VectorMerger");
    // AddBlock
    var Add1 = new BABYLON.AddBlock("Add");
    // VectorSplitterBlock
    var VectorSplitter2 = new BABYLON.VectorSplitterBlock("VectorSplitter");
    // InputBlock
    var uv = new BABYLON.InputBlock("uv");
    uv.setAsAttribute("uv");
    // AddBlock
    var Add2 = new BABYLON.AddBlock("Add");
    // ScaleBlock
    var Scale1 = new BABYLON.ScaleBlock("Scale");
    // TrigonometryBlock
    var Fract = new BABYLON.TrigonometryBlock("Fract");
    Fract.operation = BABYLON.TrigonometryBlockOperations.Fract;
    // ScaleBlock
    var Scale2 = new BABYLON.ScaleBlock("Scale");
    // InputBlock
    var Time = new BABYLON.InputBlock("Time");
    Time.value = 709.9331550000201;
    Time.min = 0;
    Time.max = 0;
    Time.matrixMode = 0;
    Time.animationType = BABYLON.AnimatedInputBlockTypes.Time;
    // InputBlock
    var TimeScale = new BABYLON.InputBlock("TimeScale");
    TimeScale.value = 0.01;
    TimeScale.min = 0;
    TimeScale.max = 0;
    TimeScale.matrixMode = 0;
    TimeScale.animationType = BABYLON.AnimatedInputBlockTypes.None;
    // RandomNumberBlock
    var Randomnumber = new BABYLON.RandomNumberBlock("Random number");
    // InputBlock
    var Seed = new BABYLON.InputBlock("Seed");
    Seed.value = new BABYLON.Vector2(-0.029, 0.02);
    Seed.isConstant = false;
    Seed.visibleInInspector = false;
    // MultiplyBlock
    var Multiply = new BABYLON.MultiplyBlock("Multiply");
    // InputBlock
    var Greenify = new BABYLON.InputBlock("Greenify");
    Greenify.value = new BABYLON.Color3(0, 0.43529411764705883, 0.10980392156862745);
    Greenify.isConstant = false;
    Greenify.visibleInInspector = false;
    // LightBlock
    var Lights = new BABYLON.LightBlock("Lights");
    // TransformBlock
    var worldPos = new BABYLON.TransformBlock("worldPos");
    worldPos.complementZ = 0;
    worldPos.complementW = 1;
    // InputBlock
    var world = new BABYLON.InputBlock("world");
    world.setAsSystemValue(BABYLON.NodeMaterialSystemValues.World);
    // TransformBlock
    var Worldnormal = new BABYLON.TransformBlock("World normal");
    Worldnormal.complementZ = 0;
    Worldnormal.complementW = 0;
    // InputBlock
    var normal = new BABYLON.InputBlock("normal");
    normal.setAsAttribute("normal");
    // TransformBlock
    var worldPosviewProjectionTransform = new BABYLON.TransformBlock("worldPos * viewProjectionTransform");
    worldPosviewProjectionTransform.complementZ = 0;
    worldPosviewProjectionTransform.complementW = 1;
    // InputBlock
    var viewProjection = new BABYLON.InputBlock("viewProjection");
    viewProjection.setAsSystemValue(BABYLON.NodeMaterialSystemValues.ViewProjection);
    // VertexOutputBlock
    var vertexOutput = new BABYLON.VertexOutputBlock("vertexOutput");
    // InputBlock
    var cameraPosition = new BABYLON.InputBlock("cameraPosition");
    cameraPosition.setAsSystemValue(BABYLON.NodeMaterialSystemValues.CameraPosition);
    // FragmentOutputBlock
    var fragmentOutput = new BABYLON.FragmentOutputBlock("fragmentOutput");
    // ScaleBlock
    var Scale3 = new BABYLON.ScaleBlock("Scale");
    // ScaleBlock
    var Scale4 = new BABYLON.ScaleBlock("Scale");
    // ScaleBlock
    var Scale5 = new BABYLON.ScaleBlock("Scale");
    // PowBlock
    var Pow = new BABYLON.PowBlock("Pow");
    // TextureBlock
    var Texture1 = new BABYLON.TextureBlock("Texture");
    Texture1.texture = new BABYLON.Texture("/uploads/1912/grass_texture.jpg", scene);
    Texture1.texture.wrapU = 1;
    Texture1.texture.wrapV = 1;
    Texture1.texture.uAng = 0;
    Texture1.texture.vAng = 0;
    Texture1.texture.wAng = 0;
    Texture1.texture.uOffset = 0;
    Texture1.texture.vOffset = 0;
    Texture1.texture.uScale = 10;
    Texture1.texture.vScale = 10;
    Texture1.texture.gammaSpace = true;
    // InputBlock
    var uv1 = new BABYLON.InputBlock("uv");
    uv1.setAsAttribute("uv");
    // InputBlock
    var GrassHeightContrast = new BABYLON.InputBlock("GrassHeightContrast");
    GrassHeightContrast.value = opt.grassHeightContrast;
    GrassHeightContrast.min = 0;
    GrassHeightContrast.max = 0;
    GrassHeightContrast.matrixMode = 0;
    GrassHeightContrast.animationType = BABYLON.AnimatedInputBlockTypes.None;
    // InputBlock
    var GrassHeight = new BABYLON.InputBlock("GrassHeight");
    GrassHeight.value = opt.grassHeight;
    GrassHeight.min = 0;
    GrassHeight.max = 0;
    GrassHeight.matrixMode = 0;
    GrassHeight.animationType = BABYLON.AnimatedInputBlockTypes.None;
    // InputBlock
    var GrassBias = new BABYLON.InputBlock("GrassBias");
    GrassBias.value = 0.5;
    GrassBias.min = 0;
    GrassBias.max = 0;
    GrassBias.matrixMode = 0;
    GrassBias.animationType = BABYLON.AnimatedInputBlockTypes.None;
    // Connections
    position.output.connectTo(VectorSplitter.xyzIn);
    VectorSplitter.xyzOut.connectTo(Add.left);
    uv.output.connectTo(VectorSplitter2.xyIn);
    VectorSplitter2.x.connectTo(Add1.left);
    Time.output.connectTo(Scale2.input);
    TimeScale.output.connectTo(Scale2.factor);
    Scale2.output.connectTo(Fract.input);
    Fract.output.connectTo(Scale1.input);
    Seed.output.connectTo(Randomnumber.seed);
    Randomnumber.output.connectTo(Scale1.factor);
    Scale1.output.connectTo(Add1.right);
    Add1.output.connectTo(VectorMerger1.x);
    VectorSplitter2.y.connectTo(Add2.left);
    Scale1.output.connectTo(Add2.right);
    Add2.output.connectTo(VectorMerger1.y);
    VectorMerger1.xy.connectTo(Texture.uv);
    Texture.rgb.connectTo(VectorSplitter1.xyzIn);
    VectorSplitter1.x.connectTo(Scale.input);
    uv1.output.connectTo(Texture1.uv);
    Texture1.g.connectTo(Pow.value);
    GrassHeightContrast.output.connectTo(Pow.power);
    Pow.output.connectTo(Scale5.input);
    GrassHeight.output.connectTo(Scale5.factor);
    Scale5.output.connectTo(Scale4.input);
    GrassBias.output.connectTo(Scale4.factor);
    Scale4.output.connectTo(Scale.factor);
    Scale.output.connectTo(VectorMerger.x);
    Scale5.output.connectTo(VectorMerger.y);
    VectorSplitter1.z.connectTo(Scale3.input);
    Scale4.output.connectTo(Scale3.factor);
    Scale3.output.connectTo(VectorMerger.z);
    VectorMerger.xyz.connectTo(Add.right);
    Add.output.connectTo(worldPos.vector);
    world.output.connectTo(worldPos.transform);
    worldPos.output.connectTo(worldPosviewProjectionTransform.vector);
    viewProjection.output.connectTo(worldPosviewProjectionTransform.transform);
    worldPosviewProjectionTransform.output.connectTo(vertexOutput.vector);
    worldPos.output.connectTo(Lights.worldPosition);
    normal.output.connectTo(Worldnormal.vector);
    world.output.connectTo(Worldnormal.transform);
    Worldnormal.output.connectTo(Lights.worldNormal);
    cameraPosition.output.connectTo(Lights.cameraPosition);
    Texture.rgb.connectTo(Multiply.left);
    Greenify.output.connectTo(Multiply.right);
    Multiply.output.connectTo(Lights.diffuseColor);
    Lights.diffuseOutput.connectTo(fragmentOutput.rgb);
    // Output nodes
    nodeMaterial.addOutputNode(vertexOutput);
    nodeMaterial.addOutputNode(fragmentOutput);
    nodeMaterial.build();
    return nodeMaterial;
}

编译

CSS

HTML

grass simulation by babylonjs，性能很棒，真实感稍差一些。

webgl, babylon, grass, land

编辑器支持Emmet

快捷键

grass simulation by babylonjs，性能很棒，真实感稍差一些。

webgl, babylon, grass, land

使用babylon.js模拟3D草地（带渐变色）

使用infamous实现的html普通元素和webgl三维模型融合场景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：