arpu
October 25, 2019, 3:55pm
1
Hello
i trying to make a HeighField cannonjs from a generated BufferGeometry
does anyone now a Threejs solution for this?
what i found is the babylon createHeighField
returnValue = new this.BJSCANNON.Particle();
break;
case PhysicsImpostor.NoImpostor:
returnValue = new this.BJSCANNON.Box(new this.BJSCANNON.Vec3(0, 0, 0));
break;
}
return returnValue;
}
private _createHeightmap(object: IPhysicsEnabledObject, pointDepth?: number) {
var pos = <FloatArray>(object.getVerticesData(VertexBuffer.PositionKind));
let transform = object.computeWorldMatrix(true);
// convert rawVerts to object space
var temp = new Array<number>();
var index: number;
for (index = 0; index < pos.length; index += 3) {
Vector3.TransformCoordinates(Vector3.FromArray(pos, index), transform).toArray(temp, index);
}
pos = temp;
var matrix = new Array<Array<any>>();
right now a generate the heighfield seperate from an heighmap image
arpu
October 26, 2019, 12:14pm
2
the Idea is to generate the visual heightmap from the heightmap png and optimize this, with rtin martini.
Usnul
October 27, 2019, 10:51am
3
Hey @arpu
Basically, i have a thing to represent 2D textures, it’s called Sampler2D in my engine, it’s just a convenient way to work with textures, and it gives you an interface that’s quite similar with GLSL sampler2d.
/**
* Created by Alex on 11/11/2014.
*/
import Vector2 from '../../../core/geom/Vector2';
import Vector3 from '../../../core/geom/Vector3';
import Vector4 from '../../../core/geom/Vector4';
import { clamp, min2 } from "../../../core/math/MathUtils";
import { mix } from "../../../core/math/MathUtils.js";
import { BlendingType } from "./BlendingType.js";
import { assert } from "../../../core/assert";
function makeVector1() {
return 0;
}
function makeVector2() {
return new Vector2();
}
show original
So you have a PNG, how do you represent it as a Sampler2D? there’s a utility function for that:
/**
* Created by Alex on 30/10/2014.
*/
import { Sampler2D } from './Sampler2D';
import { GameAssetType } from "../../../engine/asset/GameAssetType.js";
/**
*
* @param {string} url
* @param {AssetManager} assetManager
* @returns {Promise<Sampler2D>}
*/
export default function loadSampler2D(url, assetManager) {
return new Promise(function (resolve, reject) {
assetManager.get(url, GameAssetType.Image, (asset) => {
const imageData = asset.create();
const width = imageData.width;
const height = imageData.height;
show original
Okay, now we can actually make the geometry, that’s handled by this guy here:
/**
* Created by Alex on 29/05/2016.
*/
import ComputeNormals from '../../graphics/geometry/buffered/ComputeNormals';
/**
*
* @param {Sampler2D} samplerHeight
* @param {Vector2} position
* @param {Vector2} size
* @param {Vector2} scale
* @param {Vector2} totalSize
* @param {number} resolution
* @returns {{indices, vertices: Float32Array, normals: Float32Array, uvs: Float32Array}}
*/
function buildBufferGeometry(samplerHeight, position, size, scale, totalSize, resolution) {
const width = size.x;
show original
Hope that helps.
1 Like
arpu
October 29, 2019, 10:02am
4
Hey @Usnul
thx a lot for your detail answer! will looks at the meep code soon! looks awesome
1 Like
arpu
November 4, 2019, 10:24pm
5
ok i think i do not understand the code complete
at first idea is to have gltf/glb model → BufferGeometry and make a CannonJs compatible matrix
1 Like
Usnul
November 4, 2019, 10:32pm
6
Ah, I did not understand that. Then I suggest 2 approaches:
Iterate in a grid pattern, and ray-cast against your loaded GLTF geometry, this way you can “sample” a height-map from it.
Use Blender or something like that to bake your geometry into an actual height-map image, then load that into cannon.js
1 Like
arpu
November 11, 2019, 10:10am
7
hmm ok so its not possible to use the Vertices Positions from the BufferGeometry to generate the Cannonjs matrix direct?
( like Babylonjs is doing it)
Usnul
November 12, 2019, 6:11am
8
I don’t know cannon.js, but a height field is regular, so every vertex must be at a fixed pre-defined grid location. Arbitrary geometry won’t do. You can make some assumptions about your geometry and generate a grid that way - but you’d have to code that yourself, I think. I don’t know of an existing library that does exactly that for you.
1 Like
arpu
November 16, 2019, 2:06pm
9
i see
import HeightfieldWorker from "./heightfield.worker";
export default class HeightfieldClient {
constructor() {
this.worker = new HeightfieldWorker();
this.working = false;
}
async buildHeightfield(geometry, params, signal) {
if (this.working) {
throw new Error("Already building heightfield");
}
this.working = true;
if (geometry.attributes.position.count === 0) {
this.working = false;
return null;
}
show original
1 Like
