Loading the same .glb error

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(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
119 draw calls
0 animations
0 materials
79736 vertices
70573 triangles
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?

        () => {

          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.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!

        () => {

          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.resource.model);

It shouldn’t be unless the model has been compress with Draco :thinking:

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,

1 Like

Looks like a 2x2 texture generated in code.

Example: https://playcanvas.com/editor/scene/940147

Make sure the texture is clamped

He said so

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",
    // 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;

    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,