Additive per-pixel lights

    The following is an example of how to implement multiple lights based on multiple Pass with the default lighting material in Cocos Creator.

    First, create a new Sphere node in the Hierarchy panel, then continue to add a Directional Light and two Spotlights, setting them to surround the Sphere, as shown in the following image:

    using Light

    After the scene is built, select the browser preview above the editor and you can see the draw call in the bottom left corner of the web preview:

    We can use a third party software such as RenderDoc to open the Frame Debug to see how these lights are rendered to the screen:

    As shown in the image above, the first rendering is the lighting of Directional Light:

    main light pass

    The second rendering is the lighting of Spot Light 1:

    The third rendering is the lighting of Spot Light 2:

    This type of rendering is the Forward-Pipeline that supports multiple lighting models, and Forward generally consists of two passes: