A Cesium demo for creating a custom wallpaper material

WallpaperMaterial.js

//Call this once at application startup
Cesium.Material._materialCache.addMaterial('Wallpaper', {
    fabric : {
        type : 'Wallpaper',
        uniforms : {
            image : Cesium.Material.DefaultImageId,
            anchor : new Cesium.Cartesian2(0, 0)
        },
        components : {
            diffuse : 'texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).rgb',
            alpha : 'texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).a'
        }
    },
    translucent : false
});

//Create an instance and assign to anything that has a material property.
//scene - the scene
//image - the image (I think both a url or Image object are supported)
//anchor - A Cartesian3 that is the most southern and westard point of the geometry
var WallPaperMaterialProperty = function(scene, image, anchor) {
    this._scene = scene;
    this._image = image;
    this._anchor = anchor;
    this.definitionChanged = new Cesium.Event();
    this.isConstant = true;
};

WallPaperMaterialProperty.prototype.getType = function(time) {
    return 'Wallpaper';
};

WallPaperMaterialProperty.prototype.getValue = function(time, result) {
    if (!Cesium.defined(result)) {
        result = {
            image : undefined,
            anchor : undefined
        };
    }
    
    result.image = this._image;
    result.anchor = Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates(this._scene, this._anchor, result.anchor);
    if(Cesium.defined(result.anchor)){
        result.anchor.x = Math.floor(result.anchor.x);
        result.anchor.y = Math.floor(result.anchor.y);
    } else {
        result.anchor = new Cesium.Cartesian2(0, 0);
    }
    return result;
};

WallPaperMaterialProperty.prototype.equals = function(other) {
    return this === other || //
           (other instanceof  WallPaperMaterialProperty && //
            this._image === other._image);
};

//Here's a working example.
var viewer = new Cesium.Viewer('cesiumContainer');

var entity = viewer.entities.add({
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -107.0, 33.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0]),
        material : new WallPaperMaterialProperty(viewer.scene, '../images/checkerboard.png', Cesium.Cartesian3.fromDegrees(-115.0, 31))
    }
});

viewer.zoomTo(viewer.entities);

@dmyrto-roshchupkin This is because CesiumJS is now WebGL 2 by default. Change texture2D -> texture and it will work.

yes, it works! Thanks!

Is wgs84ToDrawingBufferCoordinates() function still exists or is it renamed? It says undefined for it and I can't the function at: https://cesium.com/learn/cesiumjs/ref-doc/SceneTransforms.html

Is wgs84ToDrawingBufferCoordinates() function still exists or is it renamed? It says undefined for it and I can't the function at: https://cesium.com/learn/cesiumjs/ref-doc/SceneTransforms.html

The function is renamed, it works if you replace wgs84ToDrawingBufferCoordinates() with worldToDrawingBufferCoordinates()