Skip to content

Commit c3f30bd

Browse files
author
gamedevgrunt
committed
?scene=builder for left drag to create tiles, right click on objects or floors to remove
1 parent 6c0a2b2 commit c3f30bd

10 files changed

Lines changed: 1437 additions & 4 deletions

File tree

‎src/GLOBALS.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const DEBUG = true;
1+
let DEBUG = false;
22

33
let SCENE_MANAGER = {};
44

‎src/movement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ function handleClick() {
210210
}
211211

212212
// mousedown versus click
213-
document.getElementById("renderCanvas").addEventListener('click', handleClick);
213+
// document.getElementById("renderCanvas").addEventListener('click', handleClick);
214214

215215

216216
window.addEventListener('keydown', onKeyDown);

‎src/scene/gen/procedural/grid/floor.js‎

Whitespace-only changes.

‎src/scene/gen/procedural/grid/grid.js‎

Lines changed: 535 additions & 0 deletions
Large diffs are not rendered by default.

‎src/scene/gen/procedural/procedural.js‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
import { createGrid } from "./grid/grid.js";
2+
export function setupProcedural(scene, engine, meshes) {
3+
// setupEditableTerrain(scene);
4+
5+
// exterior
6+
// setupGeneratedTerrain(scene);
7+
// createBox(scene);
8+
9+
//interior
10+
createGrid(scene, meshes);
11+
12+
// setupBoxBuilder(scene, meshes);
13+
}
14+
15+
16+
17+
function createBox(scene) {
18+
let base = createBoxBase(scene);
19+
// setupBoxRoof(scene).setParent(base);
20+
}
21+
function createCircle(scene) {
22+
let base = createCircleBase(scene);
23+
setupBoxRoof(scene).setParent(base);
24+
}
25+
26+
function createBase(scene) {
27+
28+
}
29+
30+
31+
let defaultBaseHeight = 10;
32+
function createCircleBase(scene) {
33+
const cylinder = BABYLON.MeshBuilder.CreatePolygon("roof", {
34+
shape: [
35+
new BABYLON.Vector3(-5, 0, 0),
36+
new BABYLON.Vector3(5, 0, 0),
37+
new BABYLON.Vector3(0.5, 0, -5),
38+
new BABYLON.Vector3(-0.5, 0, -5)
39+
// add 4 more sides, then rotate it.
40+
],
41+
depth: defaultBaseHeight
42+
}, scene);
43+
// r
44+
45+
// addTools(scene, box);
46+
return box;
47+
}
48+
function createBoxBase(scene) {
49+
const box = BABYLON.MeshBuilder.CreatePolygon("roof", {
50+
shape: [
51+
new BABYLON.Vector3(0, 0, 5),
52+
new BABYLON.Vector3(5, 0, 0),
53+
new BABYLON.Vector3(0, 0, -5),
54+
new BABYLON.Vector3(-5, 0, 0)
55+
],
56+
depth: defaultBaseHeight
57+
}, scene);
58+
box.rotation.x = BABYLON.Tools.ToRadians(180);
59+
box.position.z = -50;
60+
const boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);
61+
boxMaterial.backFaceCulling = false;
62+
63+
box.material = boxMaterial;
64+
65+
addTools(scene, box);
66+
return box;
67+
}
68+
69+
function setupBoxRoof(scene) {
70+
const roof = BABYLON.MeshBuilder.CreatePolygon("roof", {
71+
shape: [
72+
new BABYLON.Vector3(-5, 0, 0),
73+
new BABYLON.Vector3(5, 0, 0),
74+
new BABYLON.Vector3(0.5, 0, -5),
75+
new BABYLON.Vector3(-0.5, 0, -5)
76+
],
77+
depth: 0.1
78+
}, scene);
79+
// roof.rotation.x = Math.PI / 2; // Adjust rotation to make the roof flat
80+
// roof.rotation.x = BABYLON.Tools.ToRadians(180);
81+
roof.scaling.x = 1;
82+
roof.scaling.y = 1;
83+
roof.scaling.z = 1;
84+
85+
addTools(scene, roof);
86+
87+
88+
// // Assuming roof is already created as a Babylon.js mesh
89+
// const pointerDragBehavior = new BABYLON.PointerDragBehavior({ dragAxis: new BABYLON.Vector3(0, 0, 1) });
90+
91+
// // Modify the pivot point so that the roof scales from the bottom
92+
// roof.setPivotPoint(new BABYLON.Vector3(0, 0, 0)); // Adjusting the pivot point to the bottom of the roof
93+
// pointerDragBehavior.onDragObservable.add(function (event) {
94+
// let newHeight = roof.scaling.y + event.delta.y / 100;
95+
// console.log("Dragging", event.delta.y / 100);
96+
97+
// roof.scaling.y = newHeight;
98+
// // roof.scaling.y = 100;
99+
// // roof.position.y = (newHeight - 1) / 2;
100+
// });
101+
102+
// roof.addBehavior(pointerDragBehavior); // Add behavior directly to the roof
103+
104+
}
105+
106+
function addTools(scene, object) {
107+
addScaleUp(scene, object);
108+
109+
}
110+
111+
function addScaleUp(scene, object) {
112+
const line = BABYLON.MeshBuilder.CreateLines("line", {
113+
points: [
114+
new BABYLON.Vector3(0, -5, -1.5),
115+
new BABYLON.Vector3(0, 5, -1.5)
116+
],
117+
updatable: true
118+
}, scene);
119+
line.setParent(object);
120+
line.position.y = object.position.y - 5;
121+
// get bounding box of object and set to x and z position
122+
line.position.x = 6;
123+
line.color = new BABYLON.Color3.White();
124+
line.visibility = 0; // Initially invisible
125+
line.enableEdgesRendering();
126+
line.edgesWidth = 3;
127+
line.edgesColor = new BABYLON.Color4(1, 0, 0, 1);
128+
129+
object.actionManager = new BABYLON.ActionManager(scene);
130+
object.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function (ev) {
131+
line.visibility = 1; // Show line on hover
132+
}));
133+
object.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function (ev) {
134+
line.visibility = 0; // Hide line when not hovering
135+
}));
136+
137+
addScaleZ(object);
138+
}
139+
140+
function addGuideLines() {
141+
142+
}
143+
function addMoveZ(object) {
144+
const pointerDragBehavior = new BABYLON.PointerDragBehavior({ dragAxis: new BABYLON.Vector3(0, 0, 1) });
145+
object.addBehavior(pointerDragBehavior); // Add behavior directly to the roof
146+
}
147+
148+
const SCALING_SLOW = 10;
149+
const OBJECT_MIN = 0.1;
150+
151+
152+
function addScaleZ(object) {
153+
const pointerDragBehavior = new BABYLON.PointerDragBehavior({ dragAxis: new BABYLON.Vector3(0, 1, 0) });
154+
pointerDragBehavior.moveAttached = false;
155+
pointerDragBehavior.onDragObservable.add(function (event) {
156+
let newHeight = object.scaling.y + (event.delta.y / SCALING_SLOW);
157+
if (newHeight > OBJECT_MIN) {
158+
object.scaling.y = newHeight;
159+
// object.scaling.y = 100;
160+
// object.position.y = (newHeight - 1) / 2;
161+
162+
}
163+
});
164+
165+
object.addBehavior(pointerDragBehavior); // Add behavior directly to the roof
166+
}
167+
168+
function setupBoxBuilder(scene, meshes) {
169+
let startPoint, endPoint;
170+
let walls = [];
171+
172+
console.log(meshes[1].name);
173+
174+
scene.onPointerDown = (evt) => {
175+
if (evt.button === 0) { // Left click
176+
startPoint = scene.pick(scene.pointerX, scene.pointerY).pickedPoint;
177+
}
178+
};
179+
180+
scene.onPointerUp = (evt) => {
181+
if (evt.button === 0 && startPoint) {
182+
endPoint = scene.pick(scene.pointerX, scene.pointerY).pickedPoint;
183+
createWalls();
184+
startPoint = null;
185+
}
186+
};
187+
188+
function createWalls() {
189+
const width = Math.abs(endPoint.x - startPoint.x);
190+
const depth = Math.abs(endPoint.z - startPoint.z);
191+
const height = 2; // Adjust as needed
192+
193+
const positions = [
194+
[startPoint.x, startPoint.z],
195+
[endPoint.x, startPoint.z],
196+
[endPoint.x, endPoint.z],
197+
[startPoint.x, endPoint.z]
198+
];
199+
200+
walls.forEach(wall => wall.dispose());
201+
walls = [];
202+
203+
for (let i = 0; i < 4; i++) {
204+
const wall = meshes[1].createInstance(`wall${i}`);
205+
wall.position = new BABYLON.Vector3(
206+
(positions[i][0] + positions[(i + 1) % 4][0]) / 2,
207+
height / 2,
208+
(positions[i][1] + positions[(i + 1) % 4][1]) / 2
209+
);
210+
wall.rotation.y = i % 2 === 0 ? 0 : Math.PI / 2;
211+
wall.scaling = new BABYLON.Vector3(i % 2 === 0 ? depth : width, height, 1);
212+
walls.push(wall);
213+
}
214+
}
215+
}
216+
217+
function setupEditableTerrain(scene) {
218+
// Create ground
219+
const groundSize = 100;
220+
const subdivisions = 100;
221+
const ground = BABYLON.MeshBuilder.CreateGround("ground", {
222+
width: groundSize,
223+
height: groundSize,
224+
subdivisions: subdivisions
225+
}, scene);
226+
227+
// Create dynamic texture for heightmap
228+
const heightMapSize = 256;
229+
const heightMap = new BABYLON.DynamicTexture("heightMap", heightMapSize, scene, false);
230+
const ctx = heightMap.getContext();
231+
232+
// Function to update heightmap
233+
const updateHeightMap = function () {
234+
const buffer = ctx.getImageData(0, 0, heightMapSize, heightMapSize);
235+
236+
for (let i = 0; i < heightMapSize; i++) {
237+
for (let j = 0; j < heightMapSize; j++) {
238+
const height = 1;
239+
buffer.data[i * heightMapSize * 4 + j * 4] = height * 255 / 10;
240+
buffer.data[i * heightMapSize * 4 + j * 4 + 1] = height * 255 / 10;
241+
buffer.data[i * heightMapSize * 4 + j * 4 + 2] = height * 255 / 10;
242+
buffer.data[i * heightMapSize * 4 + j * 4 + 3] = 255;
243+
}
244+
}
245+
246+
ctx.putImageData(buffer, 0, 0);
247+
heightMap.update();
248+
};
249+
250+
updateHeightMap();
251+
252+
// Create custom shader material
253+
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
254+
vertex: "custom",
255+
fragment: "custom",
256+
},
257+
{
258+
attributes: ["position", "normal", "uv"],
259+
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
260+
});
261+
262+
// Set shader code
263+
BABYLON.Effect.ShadersStore["customVertexShader"] = `
264+
precision highp float;
265+
attribute vec3 position;
266+
attribute vec2 uv;
267+
uniform mat4 worldViewProjection;
268+
varying vec2 vUV;
269+
uniform sampler2D heightMapSampler;
270+
void main(void) {
271+
vUV = uv;
272+
vec4 heightMapColor = texture2D(heightMapSampler, uv);
273+
float height = heightMapColor.r * 10.0;
274+
vec3 newPosition = vec3(position.x, position.y + height, position.z);
275+
gl_Position = worldViewProjection * vec4(newPosition, 1.0);
276+
}
277+
`;
278+
279+
BABYLON.Effect.ShadersStore["customFragmentShader"] = `
280+
precision highp float;
281+
varying vec2 vUV;
282+
uniform sampler2D heightMapSampler;
283+
void main(void) {
284+
vec4 heightMapColor = texture2D(heightMapSampler, vUV);
285+
gl_FragColor = vec4(heightMapColor.rgb, 1.0);
286+
}
287+
`;
288+
289+
// Set heightmap texture
290+
shaderMaterial.setTexture("heightMapSampler", heightMap);
291+
292+
// Apply material to ground
293+
ground.material = shaderMaterial;
294+
295+
// Example: Update heightmap on click
296+
scene.onPointerDown = function () {
297+
updateHeightMap();
298+
heightMap.update();
299+
};
300+
301+
}

0 commit comments

Comments
 (0)