Lights in pixi.js

Discussion in 'Editor Suggestions and Improvement' started by Jonforum, Jul 16, 2017.

?

Would you like this feature?

  1. Yes

    17 vote(s)
    85.0%
  2. No

    0 vote(s)
    0.0%
  3. Yes but not important

    3 vote(s)
    15.0%
  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    Description of the Feature:
    pixi-lights


    Hi. Are you planning to include the module pixi-lights ?
    It is still experimental, but I think that is just fabulous and very simple to use.

    You can take a look DEMO it's here , it's just beautiful and amazing !!!

    http://proclive.io/lights-in-pixi-js/
    I absolutely want to be able to use it with PIXI :guffaw:!
    ps: move your mouse on the picture in the demo
    and for test performance you can click on picture to add more lights


    This module comes with a couple different objects. The important bits are that is comes with a custom renderer that does deferred shading, the WebGLDeferredRenderer. There also multiple light objects that can be added to your scene like normal objects and they will emit light.
    MIT License




    Code for Implementation:
    the module are here, This modules requires v3.0.7 of PIXI sor we are ok with the V4
    https://github.com/pixijs/pixi-lights
    after Method to create new pixi ligth point are like this
    PHP:
    var DirectionalLight PIXI.lights.DirectionalLight;
    var 
    PointLight PIXI.lights.PointLight;
    // create example
    var dirLight = new DirectionalLight({
        
    color0xffdd66,
        
    brightness0.25,
        
    ambientColor0x555555,
        
    ambientBrightness0.6,
        
    position: {
            
    x0,
            
    y0,
            
    zlightHeight,
        },
        
    target: {
            
    x0,
            
    y0,
            
    z0,
        }
    });
    implementation light js
    PHP:
    /**
     * @class
     * @extends PIXI.DisplayObject
     * @memberof PIXI.lights
     *
     * @param [color=0xFFFFFF] {number} The color of the light.
     * @param [brightness=1] {number} The brightness of the light, in range [0, 1].
     */
    function Light(colorbrightnessverticesindices) {
        if (
    this.constructor === Light) {
            throw new 
    Error('Light is an abstract base class, it should not be created directly!');
        }
        
        
    PIXI.DisplayObject.call(this);

        
    /**
         * An array of vertices
         *
         * @member {Float32Array}
         */
        
    this.vertices vertices || new Float32Array(8);

        
    /**
         * An array containing the indices of the vertices
         *
         * @member {Uint16Array}
         */
        
    this.indices indices || new Uint16Array([0,1,20,2,3]);

        
    /**
         * The blend mode to be applied to the light.
         *
         * @member {number}
         * @default CONST.BLEND_MODES.ADD;
         */
        
    this.blendMode PIXI.BLEND_MODES.ADD;

        
    /**
         * The draw mode to be applied to the light geometry.
         *
         * @member {number}
         * @default CONST.DRAW_MODES.TRIANGLES;
         */
        
    this.drawMode PIXI.DRAW_MODES.TRIANGLES;

        
    /**
         * When set, the renderer will reupload the geometry data.
         *
         * @member {boolean}
         */
        
    this.needsUpdate true;

        
    /**
         * The height of the light from the viewport.
         *
         * @member {number}
         * @default 0.075
         */
        
    this.height 0.075;

        
    /**
         * The falloff attenuation coeficients.
         *
         * @member {number[]}
         * @default [0.75, 3, 20]
         */
        
    this.falloff = [0.75320];

        
    /**
         * The name of the shader plugin to use.
         *
         * @member {string}
         */
        
    this.shaderName null;

        
    /**
         * By default the light uses a viewport sized quad as the mesh.
         */
        
    this.useViewportQuad true;

        
    this.visible false;

        
    // webgl buffers
        
    this._vertexBuffer null;
        
    this._indexBuffer null;

        
    // color and brightness are exposed through setters
        
    this._color 0x4d4d59;
        
    this._colorRgba = [0.30.30.350.8];

        
    // run the color setter
        
    if (color || color === 0) {
            
    this.color color;
        }
        
        
    // run the brightness setter
        
    if (brightness || brightness === 0) {
            
    this.brightness brightness;
        }
    }

    Light.prototype Object.create(PIXI.DisplayObject.prototype);
    Light.prototype.constructor Light;
    module.exports Light;

    Object.defineProperties(Light.prototype, {
        
    /**
         * The color of the lighting.
         *
         * @member {number}
         * @memberof Light#
         */
        
    color: {
            
    get: function ()
            {
                return 
    this._color;
            },
            
    set: function (val)
            {
                
    this._color val;
                
    PIXI.utils.hex2rgb(valthis._colorRgba);
            }
        },

        
    /**
         * The brightness of this lighting. Normalized in the range [0, 1].
         *
         * @member {number}
         * @memberof Light#
         */
        
    brightness: {
            
    get: function ()
            {
                return 
    this._colorRgba[3];
            },
            
    set: function (val)
            {
                
    this._colorRgba[3] = val;
            }
        }
    });

    Light.prototype.syncShader = function (shader) {
        
    shader.uniforms.uUseViewportQuad.value this.useViewportQuad;

        
    shader.uniforms.uLightColor.value[0] = this._colorRgba[0];
        
    shader.uniforms.uLightColor.value[1] = this._colorRgba[1];
        
    shader.uniforms.uLightColor.value[2] = this._colorRgba[2];
        
    shader.uniforms.uLightColor.value[3] = this._colorRgba[3];

        
    shader.uniforms.uLightHeight.value this.height;

        
    shader.uniforms.uLightFalloff.value[0] = this.falloff[0];
        
    shader.uniforms.uLightFalloff.value[1] = this.falloff[1];
        
    shader.uniforms.uLightFalloff.value[2] = this.falloff[2];
    };

    Light.prototype.renderWebGL = function (renderer)
    {
        
    // add lights to their renderer on the normals pass
        
    if (!renderer.renderingNormals) {
            return;
        }

        
    // I actually don't want to interrupt the current batch, so don't set light as the current object renderer.
        // Light renderer works a bit differently in that lights are draw individually on flush (called by WebGLDeferredRenderer).
        //renderer.setObjectRenderer(renderer.plugins.lights);

        
    renderer.plugins.lights.render(this);
    };

    Light.prototype.destroy = function ()
    {
        
    PIXI.DisplayObject.prototype.destroy.call(this);

        
    // TODO: Destroy buffers!
    };

    Light.DRAW_MODES = {
        
    };
    Mockups:
    http://proclive.io/lights-in-pixi-js/
    https://github.com/pixijs/pixi-lights

    [​IMG]
    Why is this feature good?
    This feature is great because of the following:


      • Allow FX light with bump (map)
      • Easy to use
      • awsome performance filter
    Possible issues with this feature?
    Issues that might arise from this feature:


     
    Last edited: Aug 3, 2017
    #1
  2. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,922
    Likes Received:
    9,906
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    It looks great, but I'm not sure how they would implement it to stock editor that still uses canvas, not necessarily webgl :/
     
    #2
  3. peq42_

    peq42_ Yeet Veteran

    Messages:
    456
    Likes Received:
    269
    Location:
    Brazil
    First Language:
    Portuguese(BR)
    Primarily Uses:
    RMMV
    Well, maybe it's time to "upgrade" isn't it?

    By the way: Agree 200%. We may have Khas lights and stuff, but if that option allows the same thing with better performance and easier use, why not?
     
    #3
  4. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,922
    Likes Received:
    9,906
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Time to "upgrade"? Thanks to the Community basic plugin It's not the engine's fault for using canvas, to be honest. Canvas is great, just slower than webgl and misses some features. However, some browsers don't support webgl, iOS devices don't support webGL (although Apple may have finally implemented it to the latest iPhone, since they invested a lot of money to develop a good graphical chip and it had been quite pointed out that they completely overslept on WebGL), some graphics cards don't support webGL and many android devices don't support webGL (although majority of mid range ones do nowadays, but for example a comparison I use a lot: Samsung Galaxy S5, a popularly used android device, has partial support for WebGL. Samsung galaxy S6 does not have any support for WebGL and I've seen quite a lot of topics (not lot like actually lot, but lot comparing only the posts related to android development) regarding rendering bugs on Samsung galaxy s6 on this forum. Samsung galaxy S7 renders WebGL without a problem), which leaves canvas as the only option for those devices.
    Of course the amount of devices that don't support WebGL diminishes and will diminish over time, but I think it is still a bit too soon for implementing something that requires WebGL, since that pretty much forces the WebGL rendering.
     
    #4
  5. peq42_

    peq42_ Yeet Veteran

    Messages:
    456
    Likes Received:
    269
    Location:
    Brazil
    First Language:
    Portuguese(BR)
    Primarily Uses:
    RMMV
    Well, why not add that to the engine, but turned off by default, and allow the user to choose if he wish to turn on?(And if so, it simply add a new feature to the editor, with these new functions, after showing a warning message)
     
    #5
  6. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,922
    Likes Received:
    9,906
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    That will slightly drop the performance in terms of if commands. Maybe it would be better to just use it as a plugin instead :)
     
    #6
  7. Rukiri

    Rukiri I like to make Action-RPGs Veteran

    Messages:
    838
    Likes Received:
    503
    Location:
    Unity3D Land
    First Language:
    English
    Primarily Uses:
    Other
    webgl works on iPhone 8 and the X should as well, by iPhone it's just safari just download firefox or chrome as they support it.
     
    #7
  8. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    well now you have new filter added
    Godray
    [​IMG]
    and SimpleLightmapFilter
    [​IMG]
    with that awsome filter, no more need add pixi ligth !
     
    #8
  9. Liquidize

    Liquidize Caffeine Overload Developer

    Messages:
    466
    Likes Received:
    455
    Location:
    Somewhere.
    First Language:
    English
    Primarily Uses:
    RMMV
    This isn't really possible. The editor doesn't use canvas or webgl at all and displaying the lighting effects in the editor due to this isn't possible. That aside, this isn't possible because you need Normal maps. I'm no artist, but I'm fairly certain creating accurate normal maps for a tileset....may be hard.
     
    #9
  10. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    codeandweb make a very fast and easy tool for make normal map.
    everything is automatic, no need to be an artist.
    https://www.codeandweb.com/spriteilluminator
     
    #10
    Poryg likes this.
  11. Maycon Gama Ribeiro

    Maycon Gama Ribeiro Heroes Of Equilibrium Veteran

    Messages:
    129
    Likes Received:
    15
    Location:
    Brasil - Brazil
    First Language:
    Português
    Primarily Uses:
    RMMV
    Amazing!
     
    #11

Share This Page