I just did a quick test using node-canvas, but for some reason the height are off. I can’t spot any obvious errors on my part, so perhaps it’s due to differences in encoding or the sorts.
This Playground:
https://playground.babylonjs.com/#8YNWBF
logs:
0.47058823529411764
0.8823529411764711
0.47058823529411764
1.9215686274509804
Where as my NodeJS test logs:
0.47058823529411764
0.8823529411764705
0.47058823529411764
1.843137254901957
var BABYLON = require("babylonjs");
var LOADERS = require("babylonjs-loaders");
global.XMLHttpRequest = require('xhr2').XMLHttpRequest;
const { createCanvas, loadImage } = require('canvas')
var engine = new BABYLON.NullEngine();
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
var ground = CreateGroundFromHeightMap("ground", "https://d33wubrfki0l68.cloudfront.net/e07eb4ae422752ba27d10f0b4e47dae6be14405c/4dca2/img/how_to/heightmap/worldheightmap.jpg", 200, 200, 250, 0, 10, scene, false, function(){
var pos = ground.getHeightAtCoordinates(0, 0);
console.log(pos)
pos = ground.getHeightAtCoordinates(-50, 50);
console.log(pos)
pos = ground.getHeightAtCoordinates(50, -50);
console.log(pos)
pos = ground.getHeightAtCoordinates(60, 60);
console.log(pos)
});
scene.registerBeforeRender(function(){
scene.render();
});
function CreateGroundFromHeightMap(name, url, width,height,subdivisions,minHeight,maxHeight,scene,updatable,onReady) {
var options = {width:width,height:height,subdivisions:subdivisions,minHeight:minHeight,maxHeight:maxHeight,updatable:updatable,onReady:onReady};
return CreateGroundFromHeightMapGBR(name, url, options, scene);
}
function CreateGroundFromHeightMapGBR(name, url, options, scene) {
var width = options.width || 10.0;
var height = options.height || 10.0;
var subdivisions = options.subdivisions || 1 | 0;
var minHeight = options.minHeight || 0.0;
var maxHeight = options.maxHeight || 1.0;
var filter = options.colorFilter || new BABYLON.Color3(0.3, 0.59, 0.11);
var alphaFilter = options.alphaFilter || 0.0;
var updatable = options.updatable;
var onReady = options.onReady;
var ground = new BABYLON.GroundMesh(name, scene);
ground._subdivisionsX = subdivisions;
ground._subdivisionsY = subdivisions;
ground._width = width;
ground._height = height;
ground._maxX = ground._width / 2.0;
ground._maxZ = ground._height / 2.0;
ground._minX = -ground._maxX;
ground._minZ = -ground._maxZ;
ground._setReady(false);
var onload = (img) => {
var bufferWidth = img.width;
var bufferHeight = img.height;
const canvas = createCanvas(bufferWidth, bufferHeight)
const context = canvas.getContext('2d')
if (!context) {
throw new Error("Unable to get 2d context for CreateGroundFromHeightMap");
}
if (scene.isDisposed) {
return;
}
context.drawImage(img, 0, 0);
// Create VertexData from map data
// Cast is due to wrong definition in lib.d.ts from ts 1.3 - https://github.com/Microsoft/TypeScript/issues/949
var buffer = context.getImageData(0, 0, bufferWidth, bufferHeight).data;
var vertexData = BABYLON.VertexData.CreateGroundFromHeightMap({
width: width, height: height,
subdivisions: subdivisions,
minHeight: minHeight, maxHeight: maxHeight, colorFilter: filter,
buffer: buffer, bufferWidth: bufferWidth, bufferHeight: bufferHeight,
alphaFilter: alphaFilter
});
vertexData.applyToMesh(ground, updatable);
//execute ready callback, if set
if (onReady) {
onReady(ground);
}
ground._setReady(true);
};
loadImage(url).then((image) => onload(image))
return ground;
}