I can load the same file .glb in tools/views, but I get an error with the following method, why? Where is it not configured?
app.assets.loadFromUrlAndFilename(model1, "", "container", function (err, asset: any) {
console.log(err);
// console.log(asset.resource.model);
});
Error loading model: 422246d5ccc9594bd7afb56e8894fd86.glb [TypeError: Cannot read property 'buffer' of undefined]
The model doesnât have any error loading in WEBGL correct? Just check once in https://gltf-viewer.donmccurdy.com/
It can be opened here, I donât know why, just use that method.
Can be opened, but there is a warning
Validation report
Format: glTF 2.0
Generator: Khronos glTF Blender I/O v0.9.36
Stats:
119 draw calls
0 animations
0 materials
79736 vertices
70573 triangles
Extensions:
KHR_draco_mesh_compression
NOTE: Extensions above are present in the model, but may or may not be recognized by this viewer. Any "UNSUPPORTED_EXTENSION" warnings below refer only to extensions that could not be scanned by the validation suite, and may still have rendered correctly. See: three-gltf-viewer#122
UNSUPPORTED_EXTENSION Cannot validate an extension as it is not supported by the validator: 'KHR_draco_mesh_compression'. /extensionsUsed/0
Not sure what these mean, not an expert with three.js tbh. Iâd recommend looking up these errors and seeing what you get.
This file must be loaded to execute, why?
loadWasmModuleAsync(
"DracoDecoderModule",
"../../examples/lib/draco/draco.wasm.js",
"../../examples/lib/draco/draco.wasm.wasm",
() => {
var canvas = document.querySelector('#application-canvas')
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(canvas),
touch: new pc.TouchDevice(canvas),
});
app.assets.loadFromUrlAndFilename("./model1.glb", "", "container", function (err, asset) {
console.log(asset);
// console.log(asset.resource.model);
});
}
);
Iâm guessing the file needs the âDracoDecoderModuleâ.
Can you share the GLB file? DM if a private file.
select images or files from your device (jpg, jpeg, png, gif, mp4)
How to upload it, I have basically solved it, it is necessary to load these two files first, although I donât know whyďź
loadWasmModuleAsync(
"DracoDecoderModule",
"../../examples/lib/draco/draco.wasm.js",
"../../examples/lib/draco/draco.wasm.wasm",
() => {
var canvas = document.querySelector('#application-canvas')
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(canvas),
touch: new pc.TouchDevice(canvas),
});
app.assets.loadFromUrlAndFilename("./model1.glb", "", "container", function (err, asset) {
console.log(asset);
// console.log(asset.resource.model);
});
}
);
It shouldnât be unless the model has been compress with Draco 
If you can host the file somewhere like Dropbox, Google Drive mediafire erc
Edit: looking at an earlier post, it looks like it was exported with Draco compression hence you need the libraries to be loaded first
I downloaded it from here, the biggest one is .glb, this person may have compressed it, it means that I donât understand very much, I just learned it,
By the way, itâs convenient for me to ask, how do I design the sky and its four corners are different in color! Its code is like this, I didnât find what to do in Playcanvas
const topLeft = new THREE.Color(0x00ffff)
const topRight = new THREE.Color(0xffffff)
const bottomRight = new THREE.Color(0xff00ff)
const bottomLeft = new THREE.Color(0x0000ff)
const data = new Uint8Array([
Math.round(bottomLeft.r * 255), Math.round(bottomLeft.g * 255), Math.round(bottomLeft.b * 255),
Math.round(bottomRight.r * 255), Math.round(bottomRight.g * 255), Math.round(bottomRight.b * 255),
Math.round(topLeft.r * 255), Math.round(topLeft.g * 255), Math.round(topLeft.b * 255),
Math.round(topRight.r * 255), Math.round(topRight.g * 255), Math.round(topRight.b * 255)
])
const backgroundTexture = new THREE.DataTexture(data, 2, 2, THREE.RGBFormat)
backgroundTexture.magFilter = THREE.LinearFilter
backgroundTexture.needsUpdate = true
material.uniforms.tBackground.value = backgroundTexture
Judging from the output on this post: Loading the same .glb error it is Draco compressed so you will need to load the library for it.
As for the texture effect, that is a really nice effect. Not sure off the top of my head how to achieve that, will have to look into it.
Okay, let me study it, he may have written a background color with shader,
Looks like a 2x2 texture generated in code.
Example: https://playcanvas.com/editor/scene/940147
Make sure the texture is clamped
He said so
Floor
The floor is composed of a simple plane always filling the screen. A simple 2x2 texture created directly in JS is sent and the shaders uses the UVs to color each corner. Those colors are then naturally interpolated for the whole surface.
I will study it again, his color can be changed manually,
like this, add debug
Yeah, it looks like the same effect and method I used above. I just used an actual image for it instead.
If you want to make the texture yourself, you can use https://developer.playcanvas.com/en/api/pc.Texture.html to create one and setSource to set the pixel data, add it to a StandardMaterial and apply that to a plane.
Okay, thanks, Iâll study it
Here is an example, that should help you create a gradient texture procedurally, similar to the example you showed.
var Script = pc.createScript('script');
// initialize code called once per entity
Script.prototype.initialize = function() {
var plane = new pc.Entity();
plane.addComponent("model", {
type: "plane",
});
this.app.root.addChild(plane);
// Create a 8x8x24-bit texture
var device = this.app.graphicsDevice;
var texture = new pc.Texture(device, {
width: 8,
height: 8,
format: pc.PIXELFORMAT_R8_G8_B8,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE
});
var topLeft = new pc.Color(1, 0, 0, 1); // red
var topRight = new pc.Color(1, 1, 1, 1); // white
var bottomRight = new pc.Color(1, 1, 0, 1); // yellow
var bottomLeft = new pc.Color(0, 0, 1, 1); // blue
// Fill the texture with a gradient
var pixels = texture.lock(); // Locks mip level (level of detail) of the texture
// and get an array with pixel data for us to fill.
// Array type in this case will be pc.PIXELFORMAT_R8_G8_B8,
// which has a size = width * height * depth * 3.
// - width and height are the texture sizes
// - depth will be 1 by default, unless you change it manually
// - 3 is amount of colors per pixel (red, green, blue)
var count = 0;
var top = new pc.Color();
var bottom = new pc.Color();
var result = new pc.Color();
for (var w=0; w<8; w++) { // pixel row
for (var h=0; h<8; h++) { // pixel column
// find a linearly interpolated color horizontally
top.lerp(topLeft, topRight, w/8); // between top left and right
bottom.lerp(bottomLeft, bottomRight, w/8); // between bottom left and right
// then find the final color by interpolating top and bottom vertically
result.lerp(top, bottom, h/8);
// assign the result color to each texture pixel:
pixels[count++] = result.r * 32; // red
pixels[count++] = result.g * 32; // green
pixels[count++] = result.b * 32; // blue
}
}
texture.unlock(); // unlock miplevel and send it to VRAM
var material = new pc.StandardMaterial();
material.diffuseMap = texture;
material.update();
plane.model.material = material;
};
Thanks for sharing this @LeXXik!
@yaustar maybe this a good example project on procedural texture generation for the tutorials section?
Wow, cool, thank you very much! Love you, haha,