The code is here, in github:
How to make true glass and not a bug? Im making a new city generator, but the throuble is that the holes are generating, but the side where is not the stairs, in surface, or another configuration, when i load the glass, the glass give me x-rays without requesting them, and, ¿How to fix that? Thanks anyway!
PD: Im using copilot, and mainly voxel.js .
Nice little demo. But where is the glass supposed to be?
On all sides of the apartment blocks except where stairs are.
You have a screenshot of the building and that is exactly what I am seeing in the demo. But I don’t see any glass.- buggy or otherwise. I am able to walk between the pillars in all the buildings without being stopped by any glass.
Perhaps you could circle where on the picture of the building there is supposed to be glass?
Or share your material definition? The png texture above should work as a material map. You need to set transparent = true and opacity = 0. I also set depthWrite = false. You may also need additional instructions (like a cut-off) if the transparent materials are appearing over other transparent materials (like in the Minecraft-type example above).
Cubes with transparent textures need to use transparent:true on their material to get them into a separate rendering pass.
Also.. on your transparent material, you probably want to have alphaTest: 0.5
What this does is prevents writing a depth value when the alpha of the texture is below .5.
Solid cubes should ideally NOT have transparent:true on their material.
Threejs renders solid materials first, followed by transparent materials.
In your image, it looks like all materials have .transparent = true on them.
If you want help debugging it, place some of the glass cubes in your scene.
The first thing to try is setting alphaTest: .5 on your material. see if that fixes your visual issue. If it fixes that visual issue, it may be enough for your case, but for truly optimal rendering, you’re going to want to differentiate between solid and transparent cubes.. and have each type use different materials.
So… its impossible?
I tried alphaTest but it doesnt work. And the transparent and opacity doesnt work neither in this cases. I dont remember more things you said but i will try alphaTest=0.5
EDIT 1:
I tried to put the mesh at 0.05 and it says many errors at different configurations, but any doesnt work.
and when i change depthWrite it says `mat.slice is not a function`
`mat.slice is not a function`
sounds like you’re trying to treat mesh.material as an array (which it isn’t unless it’s been set up that way)
You’re repo just has different .zip files of the code checked into it… that’s not really how a repo is supposed to work. You’re supposed to check in the code itself as individual files, so that it can be versioned and have history.
Ask copilot to walk you through checking your code into your repo for you…
And also ask copilot to implement the changes we are suggesting here instead of trying to do it yourself, and give it the URL to this thread, and ask it to read it and try to fix your code.
Yes, i tried to make a better bundle.js some years ago and it doesnt worked too with voxel-glass, it failed the instalation… what could y do?
EDIT: I tried to recreate the bundle.js but browserifiy doesnt work
The bug persist with bundeling this script:
createGame=require(‘voxel-engine’)
game= createGame({
texturePath: ‘textures/’
})
container=document.body
game.appendTo(container)
createPlayer= require(‘voxel-player’)(game)
dude = createPlayer(‘dude.png’)
dude.possess()
dude.yaw.position.set(0,100,0)
EDIT 3: I tried this script:
const createGame = require(‘voxel-engine’);
const createPlayer = require(‘voxel-player’);
const game = createGame({
texturePath: ‘textures/’,
// Definimos los materiales (el índice será 1, 2, 3…)
materials: [‘brick’,‘glass’],
// El motor necesita esta función para saber qué hay en cada coordenada
generate: function(x, y, z) {
// Ejemplo: Suelo de pasto en y=0
if (y === 0) return 1;
// Ejemplo: Paredes de ladrillo
if (y > 0 && y < 5) return 2;
// Si devuelves 0, es aire
return 0;
},
// Opcional: configuraciones de renderizado
chunkDistance: 2,
worldOrigin: [0, 0, 0]
});
game.appendTo(document.body);
// Configuración de materiales tras el inicio
game.on(‘init’, () => {
const glass = game.materials.get(‘glass’);
if (glass) {
glass.transparent = true;
glass.opacity = 0.5;
glass.depthWrite = false;
}
});
// Configuración del jugador
const createDude = createPlayer(game);
const dude = createDude(‘dude.png’);
dude.possess();
dude.yaw.position.set(0, 100, 0);
And after that this is the bundeling of it:
Is bundle.js part of your program?
I searched the file for obvious issues, like (as manthrax noted) the use of transparent materials with shapes other than planes. I did not find anything that said “windows” or “glass”. Using the search term “transparent”, I did see some interesting things:
Perhaps it would help to create a separate category for windows objects
I neither, no glass found in any site which is programmable with voxel.js 
And the others engine than threejs are harder to programm, like divine-voxel-engine, etc.
EDIT 1:
I also found some cubes made with 6 planes, but this is pretty laggy for our proyect. The best solution is to use instanced mesh that is so dificult, because requires sincronization with the voxel script…
EDIT 2:
As an easier solution, is to modify the properties of each material in threejs, is this:
materials: ['brick','asfalto','chapa','grass','leaves']
Or more if you want:
materials: ['brick','asfalto','chapa','grass','leaves','glass']
Here’s some gemini generate code showing how to set up solid vs transparent blocks:
gemini-code-1782311798331.html (6.1 KB)
Sorry my impertinence but i want those transparents block in the (x,y,z) function
EDIT 1:
`// Cutout Transparent Material using alphaTest
const materialCutout = new THREE.MeshStandardMaterial({
map: textureCutout,
transparent: false, // Crucial: We keep this false so it writes to the depth buffer normally!
alphaTest: 0.5, // Pixels with alpha values < 0.5 will be discarded entirely
side: THREE.DoubleSide // Show inside faces if we peer into it
});`
In my script that’s impossible…
And… where i import the glass function into it?
EDIT 2:
Your configuration doesnt make glass acts correctly:
materials: {
brick: new THREE.MeshStandardMaterial({ map: textureBrick,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
asfalto: new THREE.MeshStandardMaterial({ map: textureAsfalto,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
chapa: new THREE.MeshStandardMaterial({ map: textureBrick,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
grass: new THREE.MeshStandardMaterial({ map: textureAsfalto,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
leaves: new THREE.MeshStandardMaterial({ map: textureBrick,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
glass: new THREE.MeshStandardMaterial({ map: textureBrick,transparent:false, alphaTest: 0.5, side: THREE.DoubleSide }),
}
It says THREE is not defined ...
EDIT 3: Maybe this trouble is impossible with voxel engine. I comment this because i tried so far commands and is not any form to keep glass as I want.
EDIT 4: GitHub - voxel/voxel-glass: transparent and translucent glass blocks (voxel.js plugin) · GitHub is ded.
Its impossible literaly xddddd.
Bye, i suppose…