Repository: playcanvas/engine
File: scripts/esm/grid.mjs (JavaScript)

Code before:
    _colorX = new Color(1, 0.3, 0.3);

    /**
     * @type {Color}
     * @private
     */
    _colorZ = new Color(0.3, 0.3, 1);

    /**
     * @type {number}
     * @private
     */
    _resolution = Grid.RESOLUTION_HIGH;

    initialize() {

        // ensure the entity has a render component
        if (!this.entity.render) {
            this.entity.addComponent('render');
        }

        // create shader material
        this._material = new ShaderMaterial({
            uniqueName: 'grid-shader',
            vertexCode,
            fragmentCode,
            attributes: {
                vertex_position: SEMANTIC_POSITION,
                aUv0: SEMANTIC_TEXCOORD0
            }
        });
        this._material.blendType = BLEND_NORMAL;
        this._material.cull = CULLFACE_NONE;
        this._material.update();

        // create mesh
        const mesh = Mesh.fromGeometry(this.app.graphicsDevice, new PlaneGeometry());
        this._meshInstance = new MeshInstance(mesh, this._material);
        this.entity.render.meshInstances = [this._meshInstance];

        // set the initial values
        this.colorX = this._colorX;
        this.colorZ = this._colorZ;
        this.resolution = this._resolution;

        // calculate half extents
        this._set('uHalfExtents', this._calcHalfExtents(tmpVa));

        // update the half extents when the entity scale changes
        this.app.on('prerender', () => {
            if (!this.enabled) {

Review comment (suggestion):
this should be
```
            this._addedRender = !!this.entity.addComponent('render', {
                castShadows: false
            });
```
as when the component was already there, addComponent returns null.
But then - this will not work correctly if the renderer is already there and user has some instances in it.

So I think the better way here would be to do something like
```
if(this.entity.render) console.error('entity cannot already have the render component');

Code after:
    /**
     * @type {Color}
     * @private
     */
    _colorX = new Color(1, 0.3, 0.3);

    /**
     * @type {Color}
     * @private
     */
    _colorZ = new Color(0.3, 0.3, 1);

    /**
     * @type {number}
     * @private
     */
    _resolution = Grid.RESOLUTION_HIGH;

    initialize() {

        // ensure the entity has a render component
        if (!this.entity.render) {
            this.entity.addComponent('render', {
                castShadows: false
            });
            this._addedRender = true;
        }

        // create shader material
        this._material = new ShaderMaterial({
            uniqueName: 'grid-shader',
            vertexCode,
            fragmentCode,
            attributes: {
                vertex_position: SEMANTIC_POSITION,
                aUv0: SEMANTIC_TEXCOORD0
            }
        });
        this._material.blendType = BLEND_NORMAL;
        this._material.cull = CULLFACE_NONE;
        this._material.update();

        // create mesh
        const mesh = Mesh.fromGeometry(this.app.graphicsDevice, new PlaneGeometry());
        this._meshInstance = new MeshInstance(mesh, this._material);
        this.entity.render.meshInstances = [this._meshInstance];

        // set the initial values
        this.colorX = this._colorX;
        this.colorZ = this._colorZ;
        this.resolution = this._resolution;