补充某些必要的文件

2026-01-10 09:36:54 +00:00 · 2022-06-25 11:52:00 +08:00
parent 4ecc470f86
commit 03533b046c
2869 changed files with 1345388 additions and 2 deletions
--- a/engine/cocos2d/renderer/build/build-mapping.js
+++ b/engine/cocos2d/renderer/build/build-mapping.js
@@ -0,0 +1,59 @@
+'use strict';
+
+const Path = require('path');
+const resolve = require('rollup-plugin-node-resolve');
+const rollup = require('rollup');
+const typescript = require('rollup-plugin-typescript');
+
+let src = Path.join(__dirname, './mappings/offline-mappings.ts');
+let dest = Path.join(__dirname, './mappings');
+let name = 'index';
+let sourcemap = false;
+let globals = {};
+
+console.log('rollup mappings...');
+
+// see below for details on the options
+const inputOptions = {
+  input: src,
+  plugins: [
+    typescript({lib: ["es5", "es6", "dom"], target: "es5"}),
+    resolve({
+      jsnext: false,
+      main: false,
+      root: process.cwd()
+    }),
+  ],
+};
+const outputOptions = {
+  file: Path.join(dest, name+'.js'),
+  format: 'cjs',
+  name,
+  globals,
+  sourcemap,
+};
+
+async function build() {
+  // create a bundle
+  let bundle;
+
+  try {
+    bundle = await rollup.rollup(inputOptions);
+  }
+  catch (err) {
+    console.error(err);
+    return;
+  }
+
+  // console.log(bundle.imports); // an array of external dependencies
+  // console.log(bundle.exports); // an array of names exported by the entry point
+  // console.log(bundle.modules); // an array of module objects
+
+  // generate code and a sourcemap
+  const { code, map } = await bundle.generate(outputOptions);
+
+  // or write the bundle to disk
+  await bundle.write(outputOptions);
+}
+
+build();
--- a/engine/cocos2d/renderer/build/chunks/alpha-test.inc
+++ b/engine/cocos2d/renderer/build/chunks/alpha-test.inc
@@ -0,0 +1,20 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+#if USE_ALPHA_TEST
+  
+  uniform ALPHA_TEST {
+    float alphaThreshold;
+  };
+#endif
+
+void ALPHA_TEST (in vec4 color) {
+  #if USE_ALPHA_TEST
+      if (color.a < alphaThreshold) discard;
+  #endif
+}
+
+void ALPHA_TEST (in float alpha) {
+  #if USE_ALPHA_TEST
+      if (alpha < alphaThreshold) discard;
+  #endif
+}
--- a/engine/cocos2d/renderer/build/chunks/cc-global.inc
+++ b/engine/cocos2d/renderer/build/chunks/cc-global.inc
@@ -0,0 +1,23 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+// have to specify precisions explicitly
+// if shared among stages with different precisions
+#pragma builtin(global)
+uniform CCGlobal {
+  mat4 cc_matView; // view matrix
+  mat4 cc_matViewInv; // inverse view matrix
+  mat4 cc_matProj; // projection matrix
+  mat4 cc_matProjInv; // inverse projection matrix
+  mat4 cc_matViewProj; // view-projection matrix
+  mat4 cc_matViewProjInv; // inverse view-projection matrix
+  vec4 cc_cameraPos; // xyz: camera position
+  vec4 cc_time; // x: global time since started in seconds, y: delta time for current frame, z: total frames since started
+  mediump vec4 cc_screenSize; // xy: screen size, zw: inverse screen size
+  mediump vec4 cc_screenScale; // xy: screen scale, zw: inverse screen scale
+  // mediump vec4 cc_nativeSize; // xy: shading size, zw: inverse shading size
+  // mediump vec4 cc_exposure; // x: exposure, y: inverse exposure, z: HDR flag, w: exposure scale
+  // mediump vec4 cc_mainLitDir; // xyz: main direcitonal light direction
+  // mediump vec4 cc_mainLitColor; // xyz: main direcitonal light color, w: intensity
+  // mediump vec4 cc_ambientSky; //xyz: sky illumination color, w: intensity
+  // mediump vec4 cc_ambientGround; // xyz: ground albedo color, w: envmap LOD
+};
--- a/engine/cocos2d/renderer/build/chunks/cc-lights.inc
+++ b/engine/cocos2d/renderer/build/chunks/cc-lights.inc
@@ -0,0 +1,110 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+
+// TODO: lights uniform should move back to cc-global
+
+#include <shadow>
+
+#define CC_MAX_LIGHTS 4
+
+#if CC_NUM_LIGHTS > 0
+
+// directional lights
+#pragma builtin(global)
+uniform CCLIGHTS {
+  vec4 cc_lightPositionAndRange[CC_MAX_LIGHTS];    // xyz range
+  vec4 cc_lightDirection[CC_MAX_LIGHTS];           // xyz spotAngle
+  vec4 cc_lightColor[CC_MAX_LIGHTS];               // xyz spotExp
+};
+
+#endif
+
+struct LightInfo {
+  vec3 lightDir;
+  vec3 radiance;
+  vec4 lightColor;
+};
+
+// directional light
+LightInfo computeDirectionalLighting(
+  vec4 lightDirection,
+  vec4 lightColor
+) {
+  LightInfo ret;
+  ret.lightDir = -normalize(lightDirection.xyz);
+  ret.radiance = lightColor.rgb;
+  ret.lightColor = lightColor;
+  return ret;
+}
+
+// point light
+LightInfo computePointLighting(
+  vec3 worldPosition,
+  vec4 lightPositionAndRange,
+  vec4 lightColor
+) {
+  LightInfo ret;
+  vec3 lightDir = lightPositionAndRange.xyz - worldPosition;
+  float attenuation = max(0., 1.0 - length(lightDir) / lightPositionAndRange.w);
+  
+  ret.lightDir = normalize(lightDir);
+  ret.radiance = lightColor.rgb * attenuation;
+  ret.lightColor = lightColor;
+  return ret;
+}
+
+// spot light
+LightInfo computeSpotLighting(
+  vec3 worldPosition,
+  vec4 lightPositionAndRange,
+  vec4 lightDirection,
+  vec4 lightColor
+) {
+  LightInfo ret;
+  vec3 lightDir = lightPositionAndRange.xyz - worldPosition;
+  float attenuation = max(0., 1.0 - length(lightDir) / lightPositionAndRange.w);
+  lightDir = normalize(lightDir);
+  float cosConeAngle = max(0., dot(lightDirection.xyz, -lightDir));
+  cosConeAngle = cosConeAngle < lightDirection.w ? 0. : cosConeAngle;
+  cosConeAngle = pow(cosConeAngle, lightColor.w);
+  
+  ret.lightDir = lightDir;
+  ret.radiance = lightColor.rgb * attenuation * cosConeAngle;
+  ret.lightColor = lightColor;
+  return ret;
+}
+
+struct Lighting {
+  vec3 diffuse;
+  vec3 specular;
+};
+
+#define CC_CALC_LIGHT(index, surface, result, lightFunc, ambientFunc) \
+  #if CC_NUM_LIGHTS > index \
+    #if CC_LIGHT_##index##_TYPE == 3 \
+      result.diffuse += ambientFunc(s, cc_lightColor[index]); \
+    #else \
+      LightInfo info##index; \
+      #if CC_LIGHT_##index##_TYPE == 0 \
+        info##index = computeDirectionalLighting(cc_lightDirection[index], cc_lightColor[index]); \
+      #elif CC_LIGHT_##index##_TYPE == 1 \
+        info##index = computePointLighting(s.position, cc_lightPositionAndRange[index], cc_lightColor[index]); \
+      #elif CC_LIGHT_##index##_TYPE == 2 \
+        info##index = computeSpotLighting(s.position, cc_lightPositionAndRange[index], cc_lightDirection[index], cc_lightColor[index]); \
+      #endif \
+      \
+      Lighting result##index = lightFunc(surface, info##index); \
+      CC_CALC_SHADOW(index, result##index) \
+      result.diffuse += result##index.diffuse; \
+      result.specular += result##index.specular; \
+    #endif \
+  #endif
+
+#define CC_CALC_LIGHTS(surface, result, lightFunc, ambientFunc) \
+  result.diffuse = vec3(0, 0, 0); \
+  result.specular = vec3(0, 0, 0); \
+  \
+  CC_CALC_LIGHT(0, surface, result, lightFunc, ambientFunc) \
+  CC_CALC_LIGHT(1, surface, result, lightFunc, ambientFunc) \
+  CC_CALC_LIGHT(2, surface, result, lightFunc, ambientFunc) \
+  CC_CALC_LIGHT(3, surface, result, lightFunc, ambientFunc)
--- a/engine/cocos2d/renderer/build/chunks/cc-local.inc
+++ b/engine/cocos2d/renderer/build/chunks/cc-local.inc
@@ -0,0 +1,7 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+#pragma builtin(local)
+uniform CCLocal {
+  mat4 cc_matWorld;
+  mat4 cc_matWorldIT;
+};
--- a/engine/cocos2d/renderer/build/chunks/common.inc
+++ b/engine/cocos2d/renderer/build/chunks/common.inc
@@ -0,0 +1,12 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+// common module
+
+// constant value
+#define PI 3.14159265359
+#define PI2 6.28318530718
+#define EPSILON 1e-6
+#define LOG2 1.442695
+
+// common function
+#define saturate(a) clamp( a, 0.0, 1.0 )
--- a/engine/cocos2d/renderer/build/chunks/gamma.inc
+++ b/engine/cocos2d/renderer/build/chunks/gamma.inc
@@ -0,0 +1,7 @@
+// Copyright (c) 2017-2019 Xiamen Yaji Software Co., Ltd.
+
+// #define SRGBToLinear(gamma) pow(gamma, vec3(2.2))
+#define SRGBToLinear(gamma) (gamma * gamma)
+
+// #define LinearToSRGB(linear) pow(linear, vec3(0.454545))
+#define LinearToSRGB(linear) sqrt(linear)
--- a/engine/cocos2d/renderer/build/chunks/input-standard.inc
+++ b/engine/cocos2d/renderer/build/chunks/input-standard.inc
@@ -0,0 +1,76 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+#include <skinning>
+
+struct StandardVertInput {
+  vec2 uv;
+  vec4 position;
+  vec3 normal;
+  vec4 tangent;
+  vec4 color;
+};
+
+in vec3 a_position;
+
+#if CC_USE_ATTRIBUTE_UV0
+in vec2 a_uv0;
+#endif
+
+#if CC_USE_ATTRIBUTE_COLOR
+in vec4 a_color;
+#endif
+
+#if CC_USE_ATTRIBUTE_NORMAL
+in vec3 a_normal;
+#endif
+
+#if CC_USE_ATTRIBUTE_TANGENT
+in vec4 a_tangent;
+#endif
+
+void CCAttribute (out StandardVertInput In) {
+  In.position = vec4(a_position, 1.0);
+
+  #if CC_USE_ATTRIBUTE_UV0
+    In.uv = a_uv0;
+  #else
+    In.uv = vec2(0.0);
+  #endif
+  
+  #if CC_USE_ATTRIBUTE_COLOR
+    In.color = a_color;
+  #else
+    In.color = vec4(1.0);
+  #endif
+  
+  #if CC_USE_ATTRIBUTE_NORMAL
+    In.normal = a_normal;
+  #else
+    In.normal = vec3(0.0, 1.0, 0.0);
+  #endif
+
+  #if CC_USE_ATTRIBUTE_TANGENT
+    In.tangent = a_tangent;
+  #else
+    In.tangent = vec4(1.0, 0.0, 0.0, 0.0);
+  #endif
+}
+
+
+void CCVertInput(out StandardVertInput In) {
+  CCAttribute(In);
+
+  #if CC_USE_SKINNING
+    mat4 m = skinMatrix();
+
+    In.position = m * In.position;
+
+    #if CC_USE_ATTRIBUTE_NORMAL
+      In.normal = (m * vec4(In.normal, 0)).xyz;
+    #endif
+
+    #if CC_USE_ATTRIBUTE_TANGENT
+      In.tangent = m * In.tangent;
+    #endif
+  #endif
+}
--- a/engine/cocos2d/renderer/build/chunks/output.inc
+++ b/engine/cocos2d/renderer/build/chunks/output.inc
@@ -0,0 +1,9 @@
+// Copyright (c) 2017-2019 Xiamen Yaji Software Co., Ltd.
+#include <gamma>
+
+vec4 CCFragOutput (vec4 color) {
+  #if OUTPUT_TO_GAMMA
+    color.rgb = LinearToSRGB(color.rgb);
+  #endif
+	return color;
+}
--- a/engine/cocos2d/renderer/build/chunks/packing.inc
+++ b/engine/cocos2d/renderer/build/chunks/packing.inc
@@ -0,0 +1,12 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+vec4 packDepthToRGBA(float depth) {
+  vec4 ret = vec4(1.0, 255.0, 65025.0, 160581375.0) * depth;
+  ret = fract(ret);
+  ret -= ret.yzww * vec4(1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0, 0.0);
+  return ret;
+}
+
+float unpackRGBAToDepth(vec4 color) {
+  return dot(color, vec4(1.0, 1.0 / 255.0, 1.0 / 65025.0, 1.0 / 160581375.0));
+}
--- a/engine/cocos2d/renderer/build/chunks/rect-area-light.inc
+++ b/engine/cocos2d/renderer/build/chunks/rect-area-light.inc
@@ -0,0 +1,175 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+mat3 transpose(mat3 v) {
+    mat3 tmp;
+    tmp[0] = vec3(v[0].x, v[1].x, v[2].x);
+    tmp[1] = vec3(v[0].y, v[1].y, v[2].y);
+    tmp[2] = vec3(v[0].z, v[1].z, v[2].z);
+
+    return tmp;
+}
+
+void ClipQuadToHorizon(inout vec3 L[5], out int n) {
+    // detect clipping config
+    int config = 0;
+    if (L[0].z > 0.0) config += 1;
+    if (L[1].z > 0.0) config += 2;
+    if (L[2].z > 0.0) config += 4;
+    if (L[3].z > 0.0) config += 8;
+    config = 15;
+
+    // clip
+    n = 0;
+
+    if (config == 0)
+    {
+        // clip all
+    }
+    else if (config == 1) // V1 clip V2 V3 V4
+    {
+        n = 3;
+        L[1] = -L[1].z * L[0] + L[0].z * L[1];
+        L[2] = -L[3].z * L[0] + L[0].z * L[3];
+    }
+    else if (config == 2) // V2 clip V1 V3 V4
+    {
+        n = 3;
+        L[0] = -L[0].z * L[1] + L[1].z * L[0];
+        L[2] = -L[2].z * L[1] + L[1].z * L[2];
+    }
+    else if (config == 3) // V1 V2 clip V3 V4
+    {
+        n = 4;
+        L[2] = -L[2].z * L[1] + L[1].z * L[2];
+        L[3] = -L[3].z * L[0] + L[0].z * L[3];
+    }
+    else if (config == 4) // V3 clip V1 V2 V4
+    {
+        n = 3;
+        L[0] = -L[3].z * L[2] + L[2].z * L[3];
+        L[1] = -L[1].z * L[2] + L[2].z * L[1];
+    }
+    else if (config == 5) // V1 V3 clip V2 V4) impossible
+    {
+        n = 0;
+    }
+    else if (config == 6) // V2 V3 clip V1 V4
+    {
+        n = 4;
+        L[0] = -L[0].z * L[1] + L[1].z * L[0];
+        L[3] = -L[3].z * L[2] + L[2].z * L[3];
+    }
+    else if (config == 7) // V1 V2 V3 clip V4
+    {
+        n = 5;
+        L[4] = -L[3].z * L[0] + L[0].z * L[3];
+        L[3] = -L[3].z * L[2] + L[2].z * L[3];
+    }
+    else if (config == 8) // V4 clip V1 V2 V3
+    {
+        n = 3;
+        L[0] = -L[0].z * L[3] + L[3].z * L[0];
+        L[1] = -L[2].z * L[3] + L[3].z * L[2];
+        L[2] =  L[3];
+    }
+    else if (config == 9) // V1 V4 clip V2 V3
+    {
+        n = 4;
+        L[1] = -L[1].z * L[0] + L[0].z * L[1];
+        L[2] = -L[2].z * L[3] + L[3].z * L[2];
+    }
+    else if (config == 10) // V2 V4 clip V1 V3) impossible
+    {
+        n = 0;
+    }
+    else if (config == 11) // V1 V2 V4 clip V3
+    {
+        n = 5;
+        L[4] = L[3];
+        L[3] = -L[2].z * L[3] + L[3].z * L[2];
+        L[2] = -L[2].z * L[1] + L[1].z * L[2];
+    }
+    else if (config == 12) // V3 V4 clip V1 V2
+    {
+        n = 4;
+        L[1] = -L[1].z * L[2] + L[2].z * L[1];
+        L[0] = -L[0].z * L[3] + L[3].z * L[0];
+    }
+    else if (config == 13) // V1 V3 V4 clip V2
+    {
+        n = 5;
+        L[4] = L[3];
+        L[3] = L[2];
+        L[2] = -L[1].z * L[2] + L[2].z * L[1];
+        L[1] = -L[1].z * L[0] + L[0].z * L[1];
+    }
+    else if (config == 14) // V2 V3 V4 clip V1
+    {
+        n = 5;
+        L[4] = -L[0].z * L[3] + L[3].z * L[0];
+        L[0] = -L[0].z * L[1] + L[1].z * L[0];
+    }
+    else if (config == 15) // V1 V2 V3 V4
+    {
+        n = 4;
+    }
+
+    if (n == 3)
+        L[3] = L[0];
+    if (n == 4)
+        L[4] = L[0];
+}
+
+// https://eheitzresearch.wordpress.com/415-2/
+float IntegrateEdge(vec3 v1, vec3 v2) {
+    float cosTheta = dot(v1, v2);
+    float theta = acos(cosTheta);
+    return cross(v1, v2).z * ((theta > 0.001) ? theta/sin(theta) : 4.0);
+}
+
+vec3 LTC_Evaluate(vec3 N, vec3 V, vec3 P, mat3 Minv, vec3 points[4]) {
+    // construct orthonormal basis around N
+    vec3 T1, T2;
+    T1 = normalize(V - N*dot(V, N));
+    T2 = cross(N, T1);
+
+    // rotate area light in (T1, T2, N) basis
+    Minv = Minv * transpose(mat3(T1, T2, N));
+
+    // polygon (allocate 5 vertices for clipping)
+    vec3 L[5];
+    L[0] = Minv * (points[0] - P);
+    L[1] = Minv * (points[1] - P);
+    L[2] = Minv * (points[2] - P);
+    L[3] = Minv * (points[3] - P);
+
+    int n;
+    ClipQuadToHorizon(L, n);
+
+    if (n == 0)
+        return vec3(0, 0, 0);
+
+    // project onto sphere
+    L[0] = normalize(L[0]);
+    L[1] = normalize(L[1]);
+    L[2] = normalize(L[2]);
+    L[3] = normalize(L[3]);
+    L[4] = normalize(L[4]);
+
+    // integrate
+    float sum = 0.0;
+
+    sum += IntegrateEdge(L[0], L[1]);
+    sum += IntegrateEdge(L[1], L[2]);
+    sum += IntegrateEdge(L[2], L[3]);
+    if (n >= 4)
+        sum += IntegrateEdge(L[3], L[4]);
+    if (n == 5)
+        sum += IntegrateEdge(L[4], L[0]);
+
+    sum = max(0.0, sum);
+
+    vec3 Lo_i = vec3(sum, sum, sum);
+
+    return Lo_i;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/particle-common.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/particle-common.inc
@@ -0,0 +1,62 @@
+
+uniform Constants{
+    vec4 mainTiling_Offset;
+    vec4 frameTile_velLenScale;
+    vec4 scale;
+};
+
+#include <cc-global>
+#include <cc-local>
+#include <transform>
+
+out vec2 uv;
+out vec4 color;
+
+void computeVertPos(inout vec4 pos, vec2 vertOffset, vec4 q, vec3 s
+#if CC_USE_BILLBOARD || CC_USE_VERTICAL_BILLBOARD
+    , mat4 viewInv
+#endif
+#if CC_USE_STRETCHED_BILLBOARD
+    , vec3 eye
+    , vec4 velocity
+    , float velocityScale
+    , float lengthScale
+    , float xIndex
+#endif
+) {
+#if CC_USE_BILLBOARD
+    vec3 viewSpaceVert = vec3(vertOffset.x * s.x, vertOffset.y * s.y, 0.);
+    vec3 camX = normalize(vec3(viewInv[0][0], viewInv[1][0], viewInv[2][0]));
+    vec3 camY = normalize(vec3(viewInv[0][1], viewInv[1][1], viewInv[2][1]));
+    vec3 camZ = normalize(vec3(viewInv[0][2], viewInv[1][2], viewInv[2][2]));
+    pos.xyz += rotateInLocalSpace(viewSpaceVert, camX, camY, camZ, q);
+#elif CC_USE_STRETCHED_BILLBOARD
+    vec3 camRight = normalize(cross(pos.xyz - eye, velocity.xyz)) * s.x;
+    vec3 camUp = velocity.xyz * velocityScale + normalize(velocity.xyz) * lengthScale * s.y;
+    pos.xyz += (camRight * abs(vertOffset.x) * sign(vertOffset.y)) - camUp * xIndex;
+#elif CC_USE_HORIZONTAL_BILLBOARD
+    vec3 viewSpaceVert = vec3(vertOffset.x * s.x, vertOffset.y * s.y, 0.);
+    vec3 camX = vec3(1, 0, 0);
+    vec3 camY = vec3(0, 0, -1);
+    pos.xyz += rotateInLocalSpace(viewSpaceVert, camX, camY, cross(camX, camY), q);
+#elif CC_USE_VERTICAL_BILLBOARD
+    vec2 viewSpaceVert = vec2(vertOffset.x * s.x, vertOffset.y * s.y);
+    rotateCorner(viewSpaceVert, q.z);
+    vec3 camX = normalize(vec3(cc_matView[0][0], cc_matView[1][0], cc_matView[2][0]));
+    vec3 camY = vec3(0, 1, 0);
+    vec3 offset = camX * viewSpaceVert.x + camY * viewSpaceVert.y;
+    pos.xyz += offset;
+#else
+    pos.x += vertOffset.x;
+    pos.y += vertOffset.y;
+#endif
+}
+
+vec2 computeUV(float frameIndex, vec2 vertIndex, vec2 frameTile){
+    vec2 aniUV = vec2(0, floor(frameIndex * frameTile.y));
+    aniUV.x = floor(frameIndex * frameTile.x * frameTile.y - aniUV.y * frameTile.x);
+#if !CC_USE_MESH
+    vertIndex.y = 1. - vertIndex.y; // if using billboard ,y must be flipped.but mesh does not,why?
+#endif
+    return (aniUV.xy + vertIndex) / vec2(frameTile.x, frameTile.y);
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/particle-trail.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/particle-trail.inc
@@ -0,0 +1,33 @@
+
+precision mediump float;
+#include <particle-common>
+in vec3 a_position; // center position
+in vec4 a_texCoord;  // x:index y:size zw:texcoord
+in vec3 a_texCoord1; // xyz:velocity
+in vec3 a_texCoord2;
+in vec4 a_color;
+
+#if CC_DRAW_WIRE_FRAME
+    out vec3 vBarycentric;
+#endif
+
+vec4 vs_main() {
+    highp vec4 pos = vec4(a_position, 1);
+    vec4 velocity = vec4(a_texCoord1.xyz, 0);
+
+#if !CC_USE_WORLD_SPACE
+    pos = cc_matWorld * pos;
+    velocity = cc_matWorld * velocity;
+#endif
+
+    float vertOffset = (a_texCoord.x - 0.5) * a_texCoord.y;
+    vec3 camUp = normalize(cross(pos.xyz - cc_cameraPos.xyz, velocity.xyz));
+    pos.xyz += camUp * vertOffset;
+    pos = cc_matViewProj * pos;
+    uv = a_texCoord.zw * mainTiling_Offset.xy + mainTiling_Offset.zw;;
+    color = a_color;
+#if CC_DRAW_WIRE_FRAME
+    vBarycentric = a_texCoord2;
+#endif
+    return pos;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/particle-vs-gpu.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/particle-vs-gpu.inc
@@ -0,0 +1,395 @@
+
+precision mediump float;
+#include <particle-common>
+#define MAX_KEY_NUM 8
+#define CURVE_MODE_CONSTANT 0
+#define CURVE_MODE_RANDOM_CONSTANT 1
+#define CURVE_MODE_CURVE 2
+#define CURVE_MODE_RANDOM_CURVE 3
+
+#define GRADIENT_MODE_FIX 0
+#define GRADIENT_MODE_BLEND 1
+
+#define GRADIENT_RANGE_MODE_COLOR 0
+#define GRADIENT_RANGE_MODE_TWO_COLOR 1
+#define GRADIENT_RANGE_MODE_RANDOM_COLOR 2
+#define GRADIENT_RANGE_MODE_GRADIENT 3
+#define GRADIENT_RANGE_MODE_TWO_GRADIENT 4
+
+#define SIMULATE_SPACE_LOCAL 0
+#define SIMULATE_SPACE_WORLD 1
+
+#define ANIMATION_MODE_WHOLE_SHEET 0
+#define ANIMATION_MODE_SINGLE_ROW 1
+
+#define COLOR_OVERTIME_RAND_OFFSET 91041.
+#define FORCE_OVERTIME_RAND_OFFSET 212165.
+#define ROTATION_OVERTIME_RAND_OFFSET 125292.
+#define SIZE_OVERTIME_RAND_OFFSET 39825.
+#define TEXTURE_ANIMATION_RAND_OFFSET 90794.
+#define VELOCITY_OVERTIME_RAND_OFFSET 197866.
+
+#define DECL_CURVE_STRUCT(name) \
+  uniform CurveStruct_##name## { \
+    int u_##name##_curveMode; \
+    float u_##name##_minConstant; \
+    float u_##name##_maxConstant; \
+    float u_##name##_minKeyTime[MAX_KEY_NUM]; \
+    vec4 u_##name##_minKeyCoef[MAX_KEY_NUM]; \
+    vec4 u_##name##_maxKeyCoef[MAX_KEY_NUM]; \
+    float u_##name##_maxKeyTime[MAX_KEY_NUM]; \
+  };
+
+#define DECL_CURVE_STRUCT_INT(name) \
+  uniform CurveStructInt_##name## { \
+    int u_##name##_curveMode; \
+    float u_##name##_minConstant; \
+    float u_##name##_maxConstant; \
+    float u_##name##_minKeyTime[MAX_KEY_NUM]; \
+    vec4 u_##name##_minKeyCoef[MAX_KEY_NUM]; \
+    vec4 u_##name##_maxKeyCoef[MAX_KEY_NUM]; \
+    float u_##name##_maxKeyTime[MAX_KEY_NUM]; \
+    float u_##name##_minIntegral[MAX_KEY_NUM - 1]; \
+    float u_##name##_maxIntegral[MAX_KEY_NUM - 1]; \
+  };
+
+#define DECL_GRADIENT_STRUCT(name) \
+  uniform GradientStruct_##name## { \
+    int u_##name##_rangeMode; \
+    int u_##name##_minGradMode; \
+    int u_##name##_maxGradMode; \
+    vec4 u_##name##_minColor; \
+    vec4 u_##name##_maxColor; \
+    vec3 u_##name##_minColorKeyValue[MAX_KEY_NUM]; \
+    float u_##name##_minColorKeyTime[MAX_KEY_NUM]; \
+    float u_##name##_minAlphaKeyValue[MAX_KEY_NUM]; \
+    float u_##name##_minAlphaKeyTime[MAX_KEY_NUM]; \
+    vec3 u_##name##_maxColorKeyValue[MAX_KEY_NUM]; \
+    float u_##name##_maxColorKeyTime[MAX_KEY_NUM]; \
+    float u_##name##_maxAlphaKeyValue[MAX_KEY_NUM]; \
+    float u_##name##_maxAlphaKeyTime[MAX_KEY_NUM]; \
+  };
+
+#define EVAL_CURVE_RANGE(name, t, rnd) \
+  evaluateCurveRange(u_##name##_curveMode, u_##name##_minConstant, u_##name##_maxConstant, u_##name##_minKeyTime, u_##name##_minKeyCoef, u_##name##_maxKeyTime, u_##name##_maxKeyCoef, t, rnd)
+
+#define EVAL_CURVE_INTEGRAL(name, t, ts, rnd) \
+  evaluateCurveRangeIntegral(u_##name##_curveMode, u_##name##_minConstant, u_##name##_maxConstant, u_##name##_minKeyTime, u_##name##_minKeyCoef, u_##name##_minIntegral, u_##name##_maxKeyTime, u_##name##_maxKeyCoef, u_##name##_maxIntegral, t, ts, rnd)
+
+#define EVAL_CURVE_INTEGRAL_TWICE(name, t, ts, rnd) \
+  evaluateCurveRangeIntegralTwice(u_##name##_curveMode, u_##name##_minConstant, u_##name##_maxConstant, u_##name##_minKeyTime, u_##name##_minKeyCoef, u_##name##_minIntegral, u_##name##_maxKeyTime, u_##name##_maxKeyCoef, u_##name##_maxIntegral, t, ts, rnd)
+
+#define EVAL_GRADIENT_RANGE(name, t, rnd) \
+  evaluateGradientRange(u_##name##_rangeMode, u_##name##_minColor, u_##name##_maxColor, \
+  u_##name##_minGradMode, u_##name##_minColorKeyValue, u_##name##_minColorKeyTime, u_##name##_minAlphaKeyValue, u_##name##_minAlphaKeyTime, \
+  u_##name##_maxGradMode, u_##name##_maxColorKeyValue, u_##name##_maxColorKeyTime, u_##name##_maxAlphaKeyValue, u_##name##_maxAlphaKeyTime, t, rnd);
+
+in vec4 a_position_starttime; // center position,particle start time
+in vec4 a_vertIdx_size_angle;  // xy:vertex index,z:size,w:angle
+in vec4 a_color;
+in vec4 a_dir_life;  // xyz:particle start velocity,w:particle lifetime
+in float a_rndSeed;
+
+uniform Constants2 {
+  vec4 u_worldRot;
+  float u_psTime;
+  int u_velocity_space;
+  float u_speedModifier;
+  int u_force_space;
+};
+
+#if VELOCITY_OVERTIME_MODULE_ENABLE
+// DECL_CURVE_STRUCT_INT(velocity_pos_x)
+// DECL_CURVE_STRUCT_INT(velocity_pos_y)
+// DECL_CURVE_STRUCT_INT(velocity_pos_z)
+  #if USE_STRETCHED_BILLBOARD
+    // DECL_CURVE_STRUCT(velocity_x)
+    // DECL_CURVE_STRUCT(velocity_y)
+    // DECL_CURVE_STRUCT(velocity_z)
+  #endif
+#endif
+
+#if FORCE_OVERTIME_MODULE_ENABLE
+// DECL_CURVE_STRUCT_INT(force_pos_x)
+// DECL_CURVE_STRUCT_INT(force_pos_y)
+// DECL_CURVE_STRUCT_INT(force_pos_z)
+  #if USE_STRETCHED_BILLBOARD
+    // DECL_CURVE_STRUCT_INT(force_vel_x)
+    // DECL_CURVE_STRUCT_INT(force_vel_y)
+    // DECL_CURVE_STRUCT_INT(force_vel_z)
+  #endif
+#endif
+
+#if SIZE_OVERTIME_MODULE_ENABLE
+// DECL_CURVE_STRUCT(size)
+#endif
+
+#if COLOR_OVERTIME_MODULE_ENABLE
+// DECL_GRADIENT_STRUCT(color)
+#endif
+
+#if TEXTURE_ANIMATION_ENABLE
+// DECL_CURVE_STRUCT(frameOverTime)
+uniform Animation {
+  float u_cycles;
+  int u_animation_mode;
+  bool u_random_row;
+  int u_row_index;
+};
+#endif
+
+#if ROTATE_OVERTIME_MODULE_ENABLE
+// DECL_CURVE_STRUCT_INT(rotate)
+#endif
+
+float repeat(float t, float length) {
+  return t - floor(t / length) * length;
+}
+
+vec4 rotateQuat(vec4 p, vec4 q) {
+  vec3 iv = cross(q.xyz, p.xyz) + q.w * p.xyz;
+  vec3 res = p.xyz + 2.0 * cross(q.xyz, iv);
+  return vec4(res.xyz, p.w);
+}
+
+float random(float seed) {
+  seed = mod(seed, 233280.);
+  float q = (seed * 9301. + 49297.) / 233280.;
+  return fract(q);
+}
+
+float calcCurveValue(vec4 coef, float t) {
+  return t * (t * (t * coef.x + coef.y) + coef.z) + coef.w;
+}
+
+float evaluateCurve(float keyTime[MAX_KEY_NUM], vec4 keyCoef[MAX_KEY_NUM], float normalizedTime) {
+  for (int i = 0; i < MAX_KEY_NUM; i++) {
+    if (keyTime[i] > normalizedTime) {
+      return calcCurveValue(keyCoef[i], normalizedTime - (i == 0 ? 0. : keyTime[i - 1]));
+    }
+  }
+}
+
+float evaluateIntegral(float keyTime[MAX_KEY_NUM], vec4 keyCoef[MAX_KEY_NUM], float integral[MAX_KEY_NUM - 1], float normalizedTime, float ts) {
+  for (int i = 0; i < MAX_KEY_NUM; i++) {
+    if (keyTime[i] > normalizedTime) {
+      float t = normalizedTime - (i == 0 ? 0. : keyTime[i - 1]);
+      return ts * ((i - 1 < 0 ? 0. : integral[i - 1]) + t * calcCurveValue(keyCoef[i], t));
+    }
+  }
+}
+
+float evaluateIntegralTwice(float keyTime[MAX_KEY_NUM], vec4 keyCoef[MAX_KEY_NUM], float integral[MAX_KEY_NUM - 1], float normalizedTime, float ts) {
+  for (int i = 0; i < MAX_KEY_NUM; i++) {
+    if (keyTime[i] > normalizedTime) {
+      float t = normalizedTime - (i == 0 ? 0. : keyTime[i - 1]);
+      return ts * ts * ((i - 1 < 0 ? 0. : integral[i - 1]) + t * t * calcCurveValue(keyCoef[i], t));
+    }
+  }
+}
+
+float evaluateCurveRange(int mode, float minConstant, float maxConstant
+  , float minKeyTime[MAX_KEY_NUM], vec4 minKeyCoef[MAX_KEY_NUM]
+  , float maxKeyTime[MAX_KEY_NUM], vec4 maxKeyCoef[MAX_KEY_NUM]
+  , float t, float rnd) {
+  if (mode == CURVE_MODE_CONSTANT) {
+    return minConstant;
+  } else if (mode == CURVE_MODE_RANDOM_CONSTANT) {
+    return mix(minConstant, maxConstant, random(rnd));
+  } else if (mode == CURVE_MODE_CURVE) {
+    return evaluateCurve(minKeyTime, minKeyCoef, t);
+  } else if (mode == CURVE_MODE_RANDOM_CURVE) {
+    return mix(evaluateCurve(minKeyTime, minKeyCoef, t), evaluateCurve(maxKeyTime, maxKeyCoef, t), random(rnd));
+  }
+}
+
+float evaluateCurveRangeIntegral(int mode, float minConstant, float maxConstant
+  , float minKeyTime[MAX_KEY_NUM], vec4 minKeyCoef[MAX_KEY_NUM], float minIntegral[MAX_KEY_NUM - 1]
+  , float maxKeyTime[MAX_KEY_NUM], vec4 maxKeyCoef[MAX_KEY_NUM], float maxIntegral[MAX_KEY_NUM - 1]
+  , float t, float ts, float rnd) {
+  if (mode == CURVE_MODE_CONSTANT) {
+    return minConstant * t * ts;
+  } else if (mode == CURVE_MODE_RANDOM_CONSTANT) {
+    return mix(minConstant, maxConstant, random(rnd)) * t * ts;
+  } else if (mode == CURVE_MODE_CURVE) {
+    return evaluateIntegral(minKeyTime, minKeyCoef, minIntegral, t, ts);
+  } else if (mode == CURVE_MODE_RANDOM_CURVE) {
+    return mix(evaluateIntegral(minKeyTime, minKeyCoef, minIntegral, t, ts), evaluateIntegral(maxKeyTime, maxKeyCoef, maxIntegral, t, ts), random(rnd));
+  }
+}
+
+float evaluateCurveRangeIntegralTwice(int mode, float minConstant, float maxConstant
+  , float minKeyTime[MAX_KEY_NUM], vec4 minKeyCoef[MAX_KEY_NUM], float minIntegral[MAX_KEY_NUM - 1]
+  , float maxKeyTime[MAX_KEY_NUM], vec4 maxKeyCoef[MAX_KEY_NUM], float maxIntegral[MAX_KEY_NUM - 1]
+  , float t, float ts, float rnd) {
+  if (mode == CURVE_MODE_CONSTANT) {
+    return minConstant * t * t * ts * ts / 2.;
+  } else if (mode == CURVE_MODE_RANDOM_CONSTANT) {
+    return mix(minConstant, maxConstant, random(rnd)) * t * t * ts * ts / 2.;
+  } else if (mode == CURVE_MODE_CURVE) {
+    return evaluateIntegralTwice(minKeyTime, minKeyCoef, minIntegral, t, ts);
+  } else if (mode == CURVE_MODE_RANDOM_CURVE) {
+    return mix(evaluateIntegralTwice(minKeyTime, minKeyCoef, minIntegral, t, ts), evaluateIntegralTwice(maxKeyTime, maxKeyCoef, maxIntegral, t, ts), random(rnd));
+  }
+}
+
+vec4 evaluateGradient(int mode, float colorKeyTime[MAX_KEY_NUM], vec3 colorKeyValue[MAX_KEY_NUM]
+  , float alphaKeyTime[MAX_KEY_NUM], float alphaKeyValue[MAX_KEY_NUM]
+  , float t){
+  vec4 ret;
+  for (int i = 0; i < MAX_KEY_NUM; i++) {
+    if (t < colorKeyTime[i]) {
+      if (mode == GRADIENT_MODE_FIX) {
+        ret.xyz = colorKeyValue[i];
+      } else if (mode == GRADIENT_MODE_BLEND) {
+        ret.xyz = mix(colorKeyValue[i - 1], colorKeyValue[i], (t - colorKeyTime[i - 1]) / (colorKeyTime[i] - colorKeyTime[i - 1]));
+      }
+      break;
+    }
+  }
+  for (int i = 0; i < MAX_KEY_NUM; i++) {
+    if (t < alphaKeyTime[i]) {
+      if (mode == GRADIENT_MODE_FIX) {
+        ret.w = alphaKeyValue[i];
+      } else if (mode == GRADIENT_MODE_BLEND) {
+        ret.w = mix(alphaKeyValue[i - 1], alphaKeyValue[i], (t - alphaKeyTime[i - 1]) / (alphaKeyTime[i] - alphaKeyTime[i - 1]));
+      }
+      break;
+    }
+  }
+  return ret;
+}
+
+vec4 evaluateGradientRange(int rangeMode, vec4 minColor, vec4 maxColor,
+  int minGradMode, vec3 minColorKeyValue[MAX_KEY_NUM], float minColorKeyTime[MAX_KEY_NUM], float minAlphaKeyValue[MAX_KEY_NUM], float minAlphaKeyTime[MAX_KEY_NUM],
+  int maxGradMode, vec3 maxColorKeyValue[MAX_KEY_NUM], float maxColorKeyTime[MAX_KEY_NUM], float maxAlphaKeyValue[MAX_KEY_NUM], float maxAlphaKeyTime[MAX_KEY_NUM],
+  float t, float rnd){
+  if (rangeMode == GRADIENT_RANGE_MODE_COLOR) {
+    return minColor;
+  } else if (rangeMode == GRADIENT_RANGE_MODE_TWO_COLOR) {
+    return mix(minColor, maxColor, rnd);
+  } else if (rangeMode == GRADIENT_RANGE_MODE_GRADIENT) {
+    return evaluateGradient(minGradMode, minColorKeyTime, minColorKeyValue, minAlphaKeyTime, minAlphaKeyValue, t);
+  } else if (rangeMode == GRADIENT_RANGE_MODE_TWO_GRADIENT) {
+    return mix(evaluateGradient(minGradMode, minColorKeyTime, minColorKeyValue, minAlphaKeyTime, minAlphaKeyValue, t),
+      evaluateGradient(maxGradMode, maxColorKeyTime, maxColorKeyValue, maxAlphaKeyTime, maxAlphaKeyValue, t), rnd);
+  }
+}
+
+vec4 gpvs_main() {
+  vec4 pos = vec4(a_position_starttime.xyz, 1.);
+  float activeTime = u_psTime - a_position_starttime.w;
+  float normalizedTime = activeTime / a_dir_life.w;
+
+  #if VELOCITY_OVERTIME_MODULE_ENABLE
+    float speedModifier = u_speedModifier;
+  #else
+    float speedModifier = 1.;
+  #endif
+  pos.xyz += a_dir_life.xyz * activeTime * speedModifier;
+
+  #if USE_STRETCHED_BILLBOARD
+    vec4 velocity = vec4(a_dir_life.xyz, 0.);
+    velocity *= speedModifier;
+  #endif
+  #if !USE_WORLD_SPACE
+    pos = cc_matWorld * pos;
+    #if USE_STRETCHED_BILLBOARD
+      velocity = rotateQuat(velocity, u_worldRot);
+    #endif
+  #endif
+  #if VELOCITY_OVERTIME_MODULE_ENABLE
+    vec4 velocityTrack = vec4(EVAL_CURVE_INTEGRAL(velocity_pos_x, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL(velocity_pos_y, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL(velocity_pos_z, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), 0);
+    velocityTrack = velocityTrack * speedModifier;
+    if (u_velocity_space == SIMULATE_SPACE_LOCAL) {
+      velocityTrack = rotateQuat(velocityTrack, u_worldRot);
+    }
+    pos += velocityTrack;
+    #if USE_STRETCHED_BILLBOARD
+      vec4 velocityVel = vec4(EVAL_CURVE_RANGE(velocity_x, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), EVAL_CURVE_RANGE(velocity_y, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), EVAL_CURVE_RANGE(velocity_z, normalizedTime, a_dir_life.w, a_rndSeed + VELOCITY_OVERTIME_RAND_OFFSET), 0);
+      if (u_velocity_space == SIMULATE_SPACE_LOCAL) {
+        velocityVel = rotateQuat(velocityVel, u_worldRot);
+      }
+      velocityVel *= speedModifier;
+      velocity += velocityVel;
+    #endif
+  #endif
+
+  #if FORCE_OVERTIME_MODULE_ENABLE
+    vec4 forceTrack = vec4(EVAL_CURVE_INTEGRAL_TWICE(force_pos_x, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL_TWICE(force_pos_y, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL_TWICE(force_pos_z, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), 0);
+    forceTrack = forceTrack * speedModifier;
+    if (u_force_space == SIMULATE_SPACE_LOCAL) {
+      forceTrack = rotateQuat(forceTrack, u_worldRot);
+    }
+    pos += forceTrack;
+    #if USE_STRETCHED_BILLBOARD
+      vec4 forceVel = vec4(EVAL_CURVE_INTEGRAL(force_vel_x, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL(force_vel_y, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), EVAL_CURVE_INTEGRAL(force_vel_z, normalizedTime, a_dir_life.w, a_rndSeed + FORCE_OVERTIME_RAND_OFFSET), 0);
+      if (u_force_space == SIMULATE_SPACE_LOCAL) {
+        forceVel = rotateQuat(forceVel, u_worldRot);
+      }
+      forceVel *= speedModifier;
+      velocity += forceVel;
+    #endif
+  #endif
+
+  float size = a_vertIdx_size_angle.z;
+  #if SIZE_OVERTIME_MODULE_ENABLE
+    float sizeModifier = EVAL_CURVE_RANGE(size, normalizedTime, a_rndSeed + SIZE_OVERTIME_RAND_OFFSET);
+    size *= sizeModifier;
+  #endif
+
+  vec2 cornerOffset = vec2((a_vertIdx_size_angle.xy - 0.5) * size);
+  #if !USE_STRETCHED_BILLBOARD
+    float angle = a_vertIdx_size_angle.w;
+    #if ROTATE_OVERTIME_MODULE_ENABLE
+      angle += EVAL_CURVE_INTEGRAL(rotate, normalizedTime, a_dir_life.w, a_rndSeed + ROTATION_OVERTIME_RAND_OFFSET);
+    #endif
+    rotateCorner(cornerOffset, angle);
+  #endif
+
+  computeVertPos(pos, cornerOffset
+  #if USE_BILLBOARD || USE_VERTICAL_BILLBOARD
+    , cc_matView
+  #endif
+  #if USE_STRETCHED_BILLBOARD
+    , cc_cameraPos
+    , velocity
+    , velocityScale
+    , lengthScale
+    , size
+    , a_vertIdx_size_angle.x
+  #endif
+  );
+
+  pos = cc_matViewProj * pos;
+
+  float frameIndex = 0.;
+  #if TEXTURE_ANIMATION_ENABLE
+    if (u_animation_mode == ANIMATION_MODE_WHOLE_SHEET) {
+      frameIndex = repeat(u_cycles * EVAL_CURVE_RANGE(frameOverTime, normalizedTime, a_rndSeed + TEXTURE_ANIMATION_RAND_OFFSET), 1.);
+    } else if (u_animation_mode == ANIMATION_MODE_SINGLE_ROW) {
+      float rowLength = 1. / frameTile_velLenScale.y;
+      if (u_random_row) {
+        float f = repeat(u_cycles * EVAL_CURVE_RANGE(frameOverTime, normalizedTime, a_rndSeed + TEXTURE_ANIMATION_RAND_OFFSET), 1.);
+        float startRow = floor(random(floor(u_psTime * 1000.)) * frameTile_velLenScale.y);
+        float from = startRow * rowLength;
+        float to = from + rowLength;
+        frameIndex = mix(from, to, f);
+      }
+      else {
+        float from = float(u_row_index) * rowLength;
+        float to = from + rowLength;
+        frameIndex = mix(from, to, repeat(u_cycles * EVAL_CURVE_RANGE(frameOverTime, normalizedTime, a_rndSeed + TEXTURE_ANIMATION_RAND_OFFSET), 1.));
+      }
+    }
+  #endif
+  uv = computeUV(frameIndex, a_vertIdx_size_angle.xy, frameTile_velLenScale.xy) * mainTiling_Offset.xy + mainOffset.zw;
+
+  #if COLOR_OVERTIME_MODULE_ENABLE
+    color = a_color * EVAL_GRADIENT_RANGE(color, normalizedTime, a_rndSeed + COLOR_OVERTIME_RAND_OFFSET);
+  #else
+    color = a_color;
+  #endif
+
+  return pos;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/particle-vs-legacy.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/particle-vs-legacy.inc
@@ -0,0 +1,75 @@
+
+precision highp float;
+#include <transform>
+#include <particle-common>
+#include <cc-local>
+
+in vec3 a_position; // center position
+in vec3 a_texCoord;  // xy:vertex index,z:frame index
+in vec3 a_texCoord1; // size
+in vec3 a_texCoord2; // rotation
+in vec4 a_color;
+
+#if CC_USE_STRETCHED_BILLBOARD
+    in vec3 a_color1; // velocity.x, velocity.y, velocity.z, scale
+#endif
+
+#if CC_USE_MESH
+    in vec3 a_texCoord3;  // mesh vertices
+    in vec3 a_normal;     // mesh normal
+    in vec4 a_color1;     // mesh color
+#endif
+
+vec4 lpvs_main() {
+    vec3 compScale = scale.xyz * a_texCoord1;
+    vec4 pos = vec4(a_position, 1);
+#if CC_USE_STRETCHED_BILLBOARD
+    vec4 velocity = vec4(a_color1.xyz, 0);
+#endif
+
+#if !CC_USE_WORLD_SPACE
+  // simulate in world space. apply cc_matWorld matrix on CPU side.
+    pos = cc_matWorld * pos;
+    #if CC_USE_STRETCHED_BILLBOARD
+        velocity = cc_matWorld * velocity;
+    #endif
+#endif
+
+#if !CC_USE_MESH
+    vec2 cornerOffset = vec2((a_texCoord.xy - 0.5));
+
+    #if CC_USE_BILLBOARD
+        vec3 rotEuler = a_texCoord2;
+    #elif CC_USE_STRETCHED_BILLBOARD
+        vec3 rotEuler = vec3(0.);
+    #else
+        vec3 rotEuler = vec3(0., 0., a_texCoord2.z);
+    #endif
+
+    computeVertPos(pos, cornerOffset, quaternionFromEuler(rotEuler), compScale
+    #if CC_USE_BILLBOARD || CC_USE_VERTICAL_BILLBOARD
+        , cc_matViewInv
+    #endif
+    #if CC_USE_STRETCHED_BILLBOARD
+        , cc_cameraPos.xyz
+        , velocity
+        , frameTile_velLenScale.z
+        , frameTile_velLenScale.w
+        , a_texCoord.x
+    #endif
+    );
+
+    color = a_color;
+#else
+    mat4 xformNoScale = matrixFromRT(quaternionFromEuler(a_texCoord2), pos.xyz);
+    mat4 xform = matFromRTS(quaternionFromEuler(a_texCoord2), pos.xyz, compScale);
+    pos = xform * vec4(a_texCoord3, 1);
+    vec4 normal = xformNoScale * vec4(a_normal, 0);
+    color = a_color * a_color1;
+#endif
+    uv = computeUV(a_texCoord.z, a_texCoord.xy, frameTile_velLenScale.xy) * mainTiling_Offset.xy + mainTiling_Offset.zw;
+
+    pos = cc_matViewProj * pos;
+
+    return pos;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/phong-fs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/phong-fs.inc
@@ -0,0 +1,102 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+#include <cc-global>
+#include <texture>
+#include <output>
+#include <alpha-test>
+
+uniform PhongFrag {
+  lowp vec4 diffuseColor;
+  lowp vec4 specularColor;
+  lowp vec4 emissiveColor;
+  float glossiness;
+};
+
+#if USE_DIFFUSE_TEXTURE
+  uniform sampler2D diffuseTexture;
+#endif
+
+#if USE_SPECULAR && USE_SPECULAR_TEXTURE
+  uniform sampler2D specularTexture;
+#endif
+
+#if USE_EMISSIVE && USE_EMISSIVE_TEXTURE
+  uniform sampler2D emissiveTexture;
+#endif
+
+#if USE_NORMAL_TEXTURE
+  in vec3 v_tangent;
+  in vec3 v_bitangent;
+  uniform sampler2D normalTexture;
+#endif
+
+#define CC_USE_TEXTURE CC_USE_ATTRIBUTE_UV0 && (USE_DIFFUSE_TEXTURE || (USE_EMISSIVE && USE_EMISSIVE_TEXTURE) || (USE_SPECULAR && USE_SPECULAR_TEXTURE) || USE_NORMAL_TEXTURE)
+
+in vec3 v_worldNormal;
+in vec3 v_worldPos;
+in vec3 v_viewDirection;
+
+#if CC_USE_TEXTURE
+  in mediump vec2 v_uv0;
+#endif
+
+#if CC_USE_ATTRIBUTE_COLOR
+  in lowp vec4 v_color;
+#endif
+
+#include <shading-phong>
+
+void surf (out PhongSurface s) {
+  vec4 diffuse = vec4(1, 1, 1, 1);
+  
+  #if CC_USE_ATTRIBUTE_COLOR
+    diffuse *= v_color;
+  #endif
+
+  diffuse *= diffuseColor;
+  #if USE_DIFFUSE_TEXTURE
+    CCTexture(diffuseTexture, v_uv0, diffuse);
+  #endif
+
+  ALPHA_TEST(diffuse);
+
+  s.diffuse = diffuse.rgb;
+  s.opacity = diffuse.a;
+
+  #if USE_EMISSIVE
+    s.emissive = emissiveColor.rgb;
+    #if USE_EMISSIVE_TEXTURE
+      CCTextureRGB(emissiveTexture, v_uv0, s.emissive);
+    #endif
+  #endif
+
+  #if USE_SPECULAR
+    s.specular = specularColor.rgb;
+    #if USE_SPECULAR_TEXTURE
+      CCTextureRGB(specularTexture, v_uv0, s.specular);
+    #endif
+  #endif
+
+  s.normal = v_worldNormal;
+  #if USE_NORMAL_TEXTURE
+    vec3 nmmp = texture(normalTexture, v_uv0).xyz - vec3(0.5);
+    s.normal =
+      nmmp.x * normalize(v_tangent) +
+      nmmp.y * normalize(v_bitangent) +
+      nmmp.z * normalize(s.normal);
+    s.normal = normalize(s.normal);
+  #endif
+
+  s.position = v_worldPos;
+  s.viewDirection = v_viewDirection;
+  s.glossiness = glossiness;
+}
+
+void main () {
+  PhongSurface s;
+  surf(s);
+  vec4 color = CCPhongShading(s);
+  gl_FragColor = CCFragOutput(color);
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/phong-vs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/phong-vs.inc
@@ -0,0 +1,60 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+#include <cc-local>
+#include <cc-global>
+#include <input-standard>
+#include <shadow>
+
+#define CC_USE_TEXTURE CC_USE_ATTRIBUTE_UV0 && (USE_DIFFUSE_TEXTURE || USE_EMISSIVE_TEXTURE || USE_SPECULAR_TEXTURE || USE_NORMAL_TEXTURE)
+
+uniform MAIN_TILING {
+  vec2 mainTiling;
+  vec2 mainOffset;
+};
+
+#if CC_USE_TEXTURE
+  out mediump vec2 v_uv0;
+#endif
+
+#if CC_USE_ATTRIBUTE_COLOR
+  out lowp vec4 v_color;
+#endif
+
+#if USE_NORMAL_TEXTURE
+  out vec3 v_tangent;
+  out vec3 v_bitangent;
+#endif
+
+out vec3 v_worldNormal;
+out vec3 v_worldPos;
+out vec3 v_viewDirection;
+
+void main () {
+  StandardVertInput In;
+  CCVertInput(In);
+
+  vec4 position = In.position;
+
+  v_worldNormal = normalize((cc_matWorldIT * vec4(In.normal, 0)).xyz);
+  v_worldPos = (cc_matWorld * position).xyz;
+  v_viewDirection = normalize(cc_cameraPos.xyz - v_worldPos);
+  
+  #if CC_USE_TEXTURE
+    v_uv0 = In.uv * mainTiling + mainOffset;
+  #endif
+
+  #if CC_USE_ATTRIBUTE_COLOR
+    v_color = In.color;
+  #endif
+
+  #if USE_NORMAL_TEXTURE
+    v_tangent = normalize((cc_matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
+    v_bitangent = cross(v_worldNormal, v_tangent) * In.tangent.w; // note the cross order
+  #endif
+
+  CCShadowInput(v_worldPos);
+  
+  gl_Position = cc_matViewProj * cc_matWorld * position;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/shadow-map-fs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/shadow-map-fs.inc
@@ -0,0 +1,11 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+in float v_depth;
+
+#include <packing>
+
+void main () {
+    gl_FragColor = packDepthToRGBA(v_depth);
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/shadow-map-vs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/shadow-map-vs.inc
@@ -0,0 +1,29 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+in vec3 a_position;
+
+#include <cc-local>
+
+#pragma builtin(global)
+uniform CC_SHADOW_MAP {
+  mat4  cc_shadow_map_lightViewProjMatrix;
+  vec4  cc_shadow_map_info;        // [minDepth, maxDepth, depthScale, darkness]
+  float cc_shadow_map_bias;
+};
+
+out float v_depth;
+
+#include <skinning>
+
+void main () {
+  vec4 position = vec4(a_position, 1);
+
+  SKIN_VERTEX(position);
+
+  gl_Position = cc_shadow_map_lightViewProjMatrix * cc_matWorld * position;
+
+  // compute v_depth according to active camera's minDepth and maxDepth.
+  v_depth = ((gl_Position.z + cc_shadow_map_info.x) / (cc_shadow_map_info.x + cc_shadow_map_info.y)) + cc_shadow_map_bias;
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/unlit-fs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/unlit-fs.inc
@@ -0,0 +1,41 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+#include <alpha-test>
+#include <texture>
+#include <output>
+
+uniform UNLIT {
+  lowp vec4 diffuseColor;
+};
+
+#if USE_DIFFUSE_TEXTURE
+  uniform sampler2D diffuseTexture;
+#endif
+
+#define CC_USE_TEXTURE CC_USE_ATTRIBUTE_UV0 && USE_DIFFUSE_TEXTURE
+
+#if CC_USE_ATTRIBUTE_COLOR
+  in lowp vec4 v_color;
+#endif
+
+#if CC_USE_TEXTURE
+  in mediump vec2 v_uv0;
+#endif
+
+void main () {
+  vec4 color = diffuseColor;
+
+  #if CC_USE_TEXTURE
+    CCTexture(diffuseTexture, v_uv0, color);
+  #endif
+
+  #if CC_USE_ATTRIBUTE_COLOR
+    color *= v_color;
+  #endif
+
+  ALPHA_TEST(color);
+
+  gl_FragColor = CCFragOutput(color);
+}
--- a/engine/cocos2d/renderer/build/chunks/shader/unlit-vs.inc
+++ b/engine/cocos2d/renderer/build/chunks/shader/unlit-vs.inc
@@ -0,0 +1,38 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+precision highp float;
+
+#include <cc-local>
+#include <cc-global>
+#include <skinning>
+#include <input-standard>
+
+#define CC_USE_TEXTURE CC_USE_ATTRIBUTE_UV0 && USE_DIFFUSE_TEXTURE
+
+uniform MAIN_TILING {
+  vec2 mainTiling;
+  vec2 mainOffset;
+};
+
+#if CC_USE_TEXTURE
+  out mediump vec2 v_uv0;
+#endif
+
+#if CC_USE_ATTRIBUTE_COLOR
+  out lowp vec4 v_color;
+#endif
+
+void main () {
+  StandardVertInput In;
+  CCVertInput(In);
+
+  #if CC_USE_ATTRIBUTE_COLOR
+    v_color = In.color;
+  #endif
+
+  #if CC_USE_TEXTURE
+    v_uv0 = In.uv * mainTiling + mainOffset;
+  #endif
+
+  gl_Position = cc_matViewProj * cc_matWorld * In.position;
+}
--- a/engine/cocos2d/renderer/build/chunks/shading-phong.inc
+++ b/engine/cocos2d/renderer/build/chunks/shading-phong.inc
@@ -0,0 +1,59 @@
+
+#include <cc-lights>
+
+struct PhongSurface {
+  vec3 diffuse;
+  vec3 emissive;
+  vec3 specular;
+  float opacity;
+
+  float glossiness;
+
+  vec3 position;
+  vec3 normal;
+  vec3 viewDirection;
+};
+
+Lighting brdf (PhongSurface s, LightInfo info) {
+  Lighting result;
+  float ndh = 0.0;
+  // Get the half direction in world space
+  vec3 halfDir = normalize(s.viewDirection + info.lightDir);
+  float NdotH = max(0.0, dot(s.normal, halfDir));
+  NdotH = pow(NdotH, max(1.0, s.glossiness * 128.0));
+
+  result.diffuse = info.radiance * max(0.0, dot(s.normal, info.lightDir));
+  result.specular = info.radiance * NdotH;
+
+  return result;
+}
+
+vec4 composePhongShading (Lighting lighting, PhongSurface s) {
+  vec4 o = vec4(0.0, 0.0, 0.0, 1.0);
+
+  //diffuse is always calculated
+  o.rgb = lighting.diffuse * s.diffuse;
+  
+  #if USE_EMISSIVE
+    o.rgb += s.emissive;
+  #endif
+
+  #if USE_SPECULAR
+    o.rgb += lighting.specular * s.specular;
+  #endif
+
+  o.a = s.opacity;
+
+  return o;
+}
+
+vec3 ambient(PhongSurface s, vec4 ambientColor) {
+  return s.diffuse * ambientColor.rgb;
+}
+
+vec4 CCPhongShading (in PhongSurface s) {
+  Lighting result;
+  CC_CALC_LIGHTS(s, result, brdf, ambient)
+
+  return composePhongShading(result, s);
+}
--- a/engine/cocos2d/renderer/build/chunks/shading-toon.inc
+++ b/engine/cocos2d/renderer/build/chunks/shading-toon.inc
@@ -0,0 +1,72 @@
+// Copyright (c) 2017-2019 Xiamen Yaji Software Co., Ltd.
+#include <cc-global>
+#include <cc-lights>
+
+struct ToonSurface {
+  vec4 baseColor;
+  // specular
+  vec3 specular;
+  float specularThreshold;
+  // these need to be in the same coordinate system
+  vec3 position;
+  vec3 normal;
+  vec3 viewDirection;
+  // emissive
+  vec3 emissive;
+  // shadow
+  vec3 shadowColor;
+  float shadowIntensity;
+  vec3 highlightColor;
+  // light
+  float lightThreshold;
+  float lightSmoothness;
+};
+
+const float T_H = 0.25;
+float TreshHoldLighting(float lThreshold, float smoothness, float v) {
+  return smoothstep(lThreshold-smoothness*T_H, lThreshold+smoothness*T_H, v);
+}
+
+Lighting toon (ToonSurface s, LightInfo info) {
+  Lighting result;
+
+  vec3 N = s.normal;
+  vec3 L = info.lightDir;
+  vec3 V = s.viewDirection;
+  vec3 H = normalize(L + V);
+  float NL = 0.5 * dot(N, L) + 0.5;
+  float NH = 0.5 * dot(H, N) + 0.5;
+
+  vec3 c = vec3(0.0);
+
+  vec3 attenuation = info.radiance;
+  vec3 lightColor = info.lightColor.rgb;
+
+  // diffuse
+  vec3 shadowColor = mix(s.highlightColor * lightColor, s.shadowColor, s.shadowIntensity);
+  vec3 diffuse = TreshHoldLighting(s.lightThreshold, s.lightSmoothness, NL) * attenuation;
+  diffuse = mix(shadowColor, s.highlightColor * lightColor, diffuse);
+
+  result.diffuse = diffuse * s.baseColor.rgb;
+
+  // specular
+  float specularWeight = 1.0 - pow(s.specularThreshold, 5.0);
+  float specularMask = step(specularWeight, NH);
+  vec3 specular = s.specular.rgb * specularMask;
+
+  result.specular = specular * attenuation;
+
+  return result;
+}
+
+vec3 ambient(ToonSurface s, vec4 ambientColor) {
+  return s.baseColor.rgb * ambientColor.rgb;
+}
+
+vec4 CCToonShading (ToonSurface s) {
+  Lighting result;
+  CC_CALC_LIGHTS(s, result, toon, ambient)
+
+  vec3 finalColor = result.diffuse + result.specular + s.emissive;
+  return vec4(finalColor, s.baseColor.a);
+}
--- a/engine/cocos2d/renderer/build/chunks/shadow.inc
+++ b/engine/cocos2d/renderer/build/chunks/shadow.inc
@@ -0,0 +1,100 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+ 
+#define CC_MAX_SHADOW_LIGHTS 2
+
+#define CC_SHADOW_TYPE_HARD 2
+#define CC_SHADOW_TYPE_SOFT_PCF3X3 3
+#define CC_SHADOW_TYPE_SOFT_PCF5X5 4
+
+#define CC_DEFINE_SHADOW_MAP(index) \
+  #if CC_NUM_SHADOW_LIGHTS > index \
+    #pragma builtin(global) \
+    uniform sampler2D cc_shadow_map_##index; \
+  #endif
+
+#if CC_USE_SHADOW_MAP && CC_NUM_SHADOW_LIGHTS > 0
+
+  #pragma builtin(global)
+  uniform CC_SHADOW {
+    mat4 cc_shadow_lightViewProjMatrix[CC_MAX_SHADOW_LIGHTS];
+    vec4 cc_shadow_info[CC_MAX_SHADOW_LIGHTS];        // [minDepth, maxDepth, shadow resolution, darkness]
+  };
+
+  CC_DEFINE_SHADOW_MAP(0)
+  CC_DEFINE_SHADOW_MAP(1)
+
+  varying vec4 v_posLightSpace[CC_MAX_SHADOW_LIGHTS];
+  varying float v_depth[CC_MAX_SHADOW_LIGHTS];
+#endif
+
+void CCShadowInput (vec3 worldPos) {
+  #if CC_USE_SHADOW_MAP && CC_NUM_SHADOW_LIGHTS > 0
+  for (int i = 0; i < CC_NUM_SHADOW_LIGHTS; i++) {
+    v_posLightSpace[i] = cc_shadow_lightViewProjMatrix[i] * vec4(worldPos, 1.0);
+    v_depth[i] = (v_posLightSpace[i].z + cc_shadow_info[i].x) / (cc_shadow_info[i].x + cc_shadow_info[i].y);
+  }
+  #endif
+}
+
+#include <packing>
+
+float getDepth(sampler2D shadowMap, vec2 shadowUV) {
+    return unpackRGBAToDepth(texture(shadowMap, shadowUV));
+}
+
+float computeFallOff(float shadow, vec2 coords, float frustumEdgeFalloff) {
+  // float mask = smoothstep(1.0 - frustumEdgeFalloff, 1.0, clamp(dot(coords, coords), 0.0, 1.0));
+  // return mix(esm, 1.0, mask);
+  return shadow;
+}
+
+// standard hard shadow
+float shadowSimple(sampler2D shadowMap, vec2 shadowUV, float currentDepth, float darkness) {
+  float closestDepth = getDepth(shadowMap, shadowUV);
+  return currentDepth > closestDepth  ? 1.0 - darkness : 1.0;
+}
+
+// PCF
+float shadowPCF3X3(sampler2D shadowMap, vec2 shadowUV, float currentDepth, float darkness, float shadowSize) {
+  float shadow = 0.0;
+  for (int x = -1; x <= 1; ++x) {
+    for (int y = -1; y <= 1; ++y) {
+      float closestDepth = getDepth(shadowMap, shadowUV + vec2(x, y) * 1.0/shadowSize);
+      shadow += currentDepth > closestDepth  ? 1.0 - darkness : 1.0;
+    }
+  }
+  shadow /= 9.0;
+  return shadow;
+}
+float shadowPCF5X5(sampler2D shadowMap, vec2 shadowUV, float currentDepth, float darkness, float shadowSize) {
+  float shadow = 0.0;
+  for (int x = -2; x <= 2; ++x) {
+    for (int y = -2; y <= 2; ++y) {
+      float closestDepth = getDepth(shadowMap, shadowUV + vec2(x, y) * 1.0/shadowSize);
+      shadow += currentDepth > closestDepth  ? 1.0 - darkness : 1.0;
+    }
+  }
+  shadow /= 25.0;
+  return shadow;
+}
+
+#define CC_CALC_SHADOW(index, light) \
+  #if CC_USE_SHADOW_MAP && CC_NUM_SHADOW_LIGHTS > index \
+    float shadow_##index = 1.0; \
+    vec2 projCoords##index = v_posLightSpace[index].xy / v_posLightSpace[index].w; \
+    vec2 shadowUV##index = projCoords##index * 0.5 + vec2(0.5); /*(-1, 1) => (0, 1)*/ \
+    if (shadowUV##index.x >= 0.0 && shadowUV##index.x <= 1.0 && shadowUV##index.y >= 0.0 && shadowUV##index.y <= 1.0) { \
+      float currentDepth##index = clamp(v_depth[index], 0.0, 1.0); \
+      #if CC_SHADOW_##index##_TYPE == CC_SHADOW_TYPE_SOFT_PCF3X3 \
+        shadow_##index = shadowPCF3X3(cc_shadow_map_##index, shadowUV##index, currentDepth##index, cc_shadow_info[index].w, cc_shadow_info[index].z); \
+      #elif CC_SHADOW_##index##_TYPE == CC_SHADOW_TYPE_SOFT_PCF5X5 \
+        shadow_##index = shadowPCF5X5(cc_shadow_map_##index, shadowUV##index, currentDepth##index, cc_shadow_info[index].w, cc_shadow_info[index].z); \
+      #else \
+        shadow_##index = shadowSimple(cc_shadow_map_##index, shadowUV##index, currentDepth##index, cc_shadow_info[index].w); \
+      #endif \
+      shadow_##index = computeFallOff(shadow_##index, projCoords##index, 0.0); \
+    } \
+    \
+    light.diffuse *= shadow_##index; \
+    light.specular *= shadow_##index; \
+  #endif  
--- a/engine/cocos2d/renderer/build/chunks/skinning.inc
+++ b/engine/cocos2d/renderer/build/chunks/skinning.inc
@@ -0,0 +1,127 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+#if CC_USE_SKINNING
+
+  in vec4 a_weights;
+  in vec4 a_joints;
+
+  #if CC_USE_JOINTS_TEXTRUE
+    uniform SKINNING {
+      vec2 jointsTextureSize;
+    };
+    #pragma builtin(local)
+    uniform sampler2D jointsTexture;
+
+    #if CC_JOINTS_TEXTURE_FLOAT32
+      mat4 getBoneMatrix(const in float i) {
+        float width = jointsTextureSize.x;
+        float height = jointsTextureSize.y;
+        float j = i * 4.0;
+        float x = mod(j, width);
+        float y = floor(j / width);
+
+        float dx = 1.0 / width;
+        float dy = 1.0 / height;
+
+        y = dy * (y + 0.5);
+
+        vec4 v1 = texture(jointsTexture, vec2(dx * (x + 0.5), y));
+        vec4 v2 = texture(jointsTexture, vec2(dx * (x + 1.5), y));
+        vec4 v3 = texture(jointsTexture, vec2(dx * (x + 2.5), y));
+        vec4 v4 = texture(jointsTexture, vec2(dx * (x + 3.5), y));
+
+        return mat4(v1, v2, v3, v4);
+      }
+    #else
+      float decode32(vec4 rgba) {
+        float Sign = 1.0 - step(128.0, rgba[0]) * 2.0;
+        float Exponent = 2.0 * mod(rgba[0], 128.0) + step(128.0, rgba[1]) - 127.0;
+        float Mantissa = mod(rgba[1], 128.0) * 65536.0 + rgba[2] * 256.0 + rgba[3] + 8388608.0;
+        return Sign * exp2(Exponent - 23.0) * Mantissa;
+      }
+      vec4 decodevec4 (vec4 x, vec4 y, vec4 z, vec4 w) {
+        // TODO: check this on big endian devices
+        return vec4(
+          decode32(x.wzyx * 255.0),
+          decode32(y.wzyx * 255.0),
+          decode32(z.wzyx * 255.0),
+          decode32(w.wzyx * 255.0)
+        );
+      }
+
+      vec4 decodevec4 (float dx, float x, float y) {
+        return decodevec4(
+          texture(jointsTexture, vec2(dx * (x + 0.5), y)),
+          texture(jointsTexture, vec2(dx * (x + 1.5), y)),
+          texture(jointsTexture, vec2(dx * (x + 2.5), y)),
+          texture(jointsTexture, vec2(dx * (x + 3.5), y))
+        );
+      }
+
+      mat4 getBoneMatrix(const in float i) {
+        float width = jointsTextureSize.x;
+        float height = jointsTextureSize.y;
+        float j = i * 16.0;
+        float x = mod(j, width);
+        float y = floor(j / width);
+
+        float dx = 1.0 / width;
+        float dy = 1.0 / height;
+
+        y = dy * (y + 0.5);
+
+        vec4 v1 = decodevec4(dx, x,       y);
+        vec4 v2 = decodevec4(dx, x+4.0,   y);
+        vec4 v3 = decodevec4(dx, x+8.0,   y);
+        vec4 v4 = decodevec4(dx, x+12.0,  y);
+
+        return mat4(v1, v2, v3, v4);
+      }
+    #endif
+  #else
+    #define CC_JOINT_MATRICES_SIZE 50
+
+    #pragma builtin(local)
+    uniform JOINT_MATRIX {
+      mat4 jointMatrices[CC_JOINT_MATRICES_SIZE];
+    };
+
+    mat4 getBoneMatrix(const in float i) {
+      return jointMatrices[int(i)];
+    }
+  #endif
+
+    mat4 skinMatrix() {
+      return
+        getBoneMatrix(a_joints.x) * a_weights.x +
+        getBoneMatrix(a_joints.y) * a_weights.y +
+        getBoneMatrix(a_joints.z) * a_weights.z +
+        getBoneMatrix(a_joints.w) * a_weights.w
+        ;
+    }
+#endif
+
+
+void SKIN_VERTEX(inout vec4 a1) {
+  #if CC_USE_SKINNING
+    mat4 m = skinMatrix();
+    a1 = m * a1;
+  #endif
+}
+
+void SKIN_VERTEX(inout vec4 a1, inout vec4 a2) {
+  #if CC_USE_SKINNING
+    mat4 m = skinMatrix();
+    a1 = m * a1;
+    a2 = m * a2;
+  #endif
+}
+
+void SKIN_VERTEX(inout vec4 a1, inout vec4 a2, inout vec4 a3) {
+  #if CC_USE_SKINNING
+    mat4 m = skinMatrix();
+    a1 = m * a1;
+    a2 = m * a2;
+    a3 = m * a3;
+  #endif
+}
--- a/engine/cocos2d/renderer/build/chunks/texture.inc
+++ b/engine/cocos2d/renderer/build/chunks/texture.inc
@@ -0,0 +1,27 @@
+
+#include <gamma>
+
+#define CCTexture(_texture_, _uv_, _color_)                             \
+  vec4 _texture_##_tmp = texture(_texture_, _uv_);                      \
+  #if CC_USE_ALPHA_ATLAS_##_texture_                                  \
+      _texture_##_tmp.a *= texture(_texture_, _uv_ + vec2(0, 0.5)).r;   \
+  #endif                                                            \
+  #if INPUT_IS_GAMMA                                                \
+    _color_.rgb *= SRGBToLinear(_texture_##_tmp.rgb);                   \
+    _color_.a *= _texture_##_tmp.a;                                     \
+  #else                                                             \
+    _color_ *= _texture_##_tmp;                                         \
+  #endif                                                            \
+  #pragma // empty pragma trick to get rid of trailing semicolons at effect compile time
+
+#define CCTextureRGB(_texture_, _uv_, _color_)                             \
+  vec4 _texture_##_tmp = texture(_texture_, _uv_);                      \
+  #if CC_USE_ALPHA_ATLAS_##_texture_                                  \
+      _texture_##_tmp.a *= texture(_texture_, _uv_ + vec2(0, 0.5)).r;   \
+  #endif                                                            \
+  #if INPUT_IS_GAMMA                                                \
+    _color_.rgb *= SRGBToLinear(_texture_##_tmp.rgb);                   \
+  #else                                                             \
+    _color_.rgb *= _texture_##_tmp.rgb;                                         \
+  #endif                                                            \
+  #pragma // empty pragma trick to get rid of trailing semicolons at effect compile time
--- a/engine/cocos2d/renderer/build/chunks/transform.inc
+++ b/engine/cocos2d/renderer/build/chunks/transform.inc
@@ -0,0 +1,170 @@
+
+vec4 quaternionFromAxisAngle(float angle, vec3 axis){
+    angle /= 2.;
+    float s = sin(angle);
+    vec4 res;
+    res.xyz = s * axis;
+    res.w = cos(angle);
+    return res;
+}
+
+vec4 quaternionFromAxis(vec3 xAxis,vec3 yAxis,vec3 zAxis){
+    mat3 m = mat3(xAxis,yAxis,zAxis);
+    float trace = m[0][0] + m[1][1] + m[2][2];
+    vec4 quat;
+
+    if (trace > 0.) {
+        float s = 0.5 / sqrt(trace + 1.0);
+        quat.w = 0.25 / s;
+        quat.x = (m[2][1] - m[1][2]) * s;
+        quat.y = (m[0][2] - m[2][0]) * s;
+        quat.z = (m[1][0] - m[0][1]) * s;
+    } else if ((m[0][0] > m[1][1]) && (m[0][0] > m[2][2])) {
+        float s = 2.0 * sqrt(1.0 + m[0][0] - m[1][1] - m[2][2]);
+        quat.w = (m[2][1] - m[1][2]) / s;
+        quat.x = 0.25 * s;
+        quat.y = (m[0][1] + m[1][0]) / s;
+        quat.z = (m[0][2] + m[2][0]) / s;
+    } else if (m[1][1] > m[2][2]) {
+        float s = 2.0 * sqrt(1.0 + m[1][1] - m[0][0] - m[2][2]);
+        quat.w = (m[0][2] - m[2][0]) / s;
+        quat.x = (m[0][1] + m[1][0]) / s;
+        quat.y = 0.25 * s;
+        quat.z = (m[1][2] + m[2][1]) / s;
+    } else {
+        float s = 2.0 * sqrt(1.0 + m[2][2] - m[0][0] - m[1][1]);
+        quat.w = (m[1][0] - m[0][1]) / s;
+        quat.x = (m[0][2] + m[2][0]) / s;
+        quat.y = (m[1][2] + m[2][1]) / s;
+        quat.z = 0.25 * s;
+    }
+
+    float len = quat.x * quat.x + quat.y * quat.y + quat.z * quat.z + quat.w * quat.w;
+    if (len > 0.) {
+        len = 1. / sqrt(len);
+        quat.x = quat.x * len;
+        quat.y = quat.y * len;
+        quat.z = quat.z * len;
+        quat.w = quat.w * len;
+    }
+
+    return quat;
+}
+
+vec4 quaternionFromEuler(vec3 angle){
+    float x = angle.x / 2.;
+    float y = angle.y / 2.;
+    float z = angle.z / 2.;
+
+    float sx = sin(x);
+    float cx = cos(x);
+    float sy = sin(y);
+    float cy = cos(y);
+    float sz = sin(z);
+    float cz = cos(z);
+
+    vec4 quat = vec4(0);
+
+    quat.x = sx * cy * cz + cx * sy * sz;
+    quat.y = cx * sy * cz + sx * cy * sz;
+    quat.z = cx * cy * sz - sx * sy * cz;
+    quat.w = cx * cy * cz - sx * sy * sz;
+
+    return quat;
+}
+
+mat4 matrixFromRT(vec4 q, vec3 p){
+    float x2 = q.x + q.x;
+    float y2 = q.y + q.y;
+    float z2 = q.z + q.z;
+    float xx = q.x * x2;
+    float xy = q.x * y2;
+    float xz = q.x * z2;
+    float yy = q.y * y2;
+    float yz = q.y * z2;
+    float zz = q.z * z2;
+    float wx = q.w * x2;
+    float wy = q.w * y2;
+    float wz = q.w * z2;
+
+    return mat4(
+        1. - (yy + zz), xy + wz, xz - wy, 0,
+        xy - wz, 1. - (xx + zz), yz + wx, 0,
+        xz + wy, yz - wx, 1. - (xx + yy), 0,
+        p.x, p.y, p.z, 1
+    );
+}
+
+mat4 matFromRTS(vec4 q, vec3 t, vec3 s){
+    float x = q.x, y = q.y, z = q.z, w = q.w;
+    float x2 = x + x;
+    float y2 = y + y;
+    float z2 = z + z;
+
+    float xx = x * x2;
+    float xy = x * y2;
+    float xz = x * z2;
+    float yy = y * y2;
+    float yz = y * z2;
+    float zz = z * z2;
+    float wx = w * x2;
+    float wy = w * y2;
+    float wz = w * z2;
+    float sx = s.x;
+    float sy = s.y;
+    float sz = s.z;
+
+    return mat4((1. - (yy + zz)) * sx, (xy + wz) * sx, (xz - wy) * sx, 0,
+        (xy - wz) * sy, (1. - (xx + zz)) * sy, (yz + wx) * sy, 0,
+        (xz + wy) * sz, (yz - wx) * sz, (1. - (xx + yy)) * sz, 0,
+        t.x, t.y, t.z, 1);
+}
+
+void scaleMatrix(inout mat4 m, float s){
+    m[0].xyz *= s;
+    m[1].xyz *= s;
+    m[2].xyz *= s;
+}
+
+vec4 quatMultiply(vec4 a, vec4 b){
+    vec4 quat;
+    quat.x = a.x * b.w + a.w * b.x + a.y * b.z - a.z * b.y;
+    quat.y = a.y * b.w + a.w * b.y + a.z * b.x - a.x * b.z;
+    quat.z = a.z * b.w + a.w * b.z + a.x * b.y - a.y * b.x;
+    quat.w = a.w * b.w - a.x * b.x - a.y * b.y - a.z * b.z;
+    return quat;
+}
+
+void rotateVecFromQuat(inout vec3 v, vec4 q){
+    float ix = q.w * v.x + q.y * v.z - q.z * v.y;
+    float iy = q.w * v.y + q.z * v.x - q.x * v.z;
+    float iz = q.w * v.z + q.x * v.y - q.y * v.x;
+    float iw = -q.x * v.x - q.y * v.y - q.z * v.z;
+
+    // calculate result * inverse quat
+    v.x = ix * q.w + iw * -q.x + iy * -q.z - iz * -q.y;
+    v.y = iy * q.w + iw * -q.y + iz * -q.x - ix * -q.z;
+    v.z = iz * q.w + iw * -q.z + ix * -q.y - iy * -q.x;
+}
+
+vec3 rotateVecFromAxis(vec3 v, vec3 axis, float theta){
+    return cos(theta) * v + sin(theta) * cross(v, axis) + (1. - cos(theta)) * dot(v, axis) * axis;
+}
+
+vec3 rotateInLocalSpace(vec3 pos, vec3 xAxis, vec3 yAxis, vec3 zAxis, vec4 q){
+    float z = pos.z;
+    float x = pos.x;
+    float y = pos.y;
+    vec4 viewQuat = quaternionFromAxis(xAxis, yAxis, zAxis);
+    vec4 rotQuat = quatMultiply(viewQuat, q);
+    rotateVecFromQuat(pos, rotQuat);
+
+    return pos;
+}
+
+void rotateCorner(inout vec2 corner, float angle){
+    float xOS = cos(angle) * corner.x - sin(angle) * corner.y;
+    float yOS = sin(angle) * corner.x + cos(angle) * corner.y;
+    corner.x = xOS;
+    corner.y = yOS;
+}
--- a/engine/cocos2d/renderer/build/chunks/unpack.inc
+++ b/engine/cocos2d/renderer/build/chunks/unpack.inc
@@ -0,0 +1,9 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+vec3 unpackNormal(vec4 nmap) {
+  return nmap.xyz * 2.0 - 1.0;
+}
+
+vec3 unpackRGBE(vec4 rgbe) {
+    return rgbe.rgb * pow(2.0, rgbe.a * 255.0 - 128.0);
+}
--- a/engine/cocos2d/renderer/build/mappings/gfx/define.ts
+++ b/engine/cocos2d/renderer/build/mappings/gfx/define.ts
@@ -0,0 +1,805 @@
+// Extensions
+export enum WebGLEXT {
+    COMPRESSED_RGB_S3TC_DXT1_EXT = 0x83F0,
+    COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1,
+    COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2,
+    COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3,
+
+    COMPRESSED_SRGB_S3TC_DXT1_EXT = 0x8C4C,
+    COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT = 0x8C4D,
+    COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT = 0x8C4E,
+    COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT = 0x8C4F,
+
+    COMPRESSED_RGB_PVRTC_4BPPV1_IMG = 0x8C00,
+    COMPRESSED_RGB_PVRTC_2BPPV1_IMG = 0x8C01,
+    COMPRESSED_RGBA_PVRTC_4BPPV1_IMG = 0x8C02,
+    COMPRESSED_RGBA_PVRTC_2BPPV1_IMG = 0x8C03,
+
+    COMPRESSED_RGB_ETC1_WEBGL = 0x8D64,
+}
+
+export const GFX_MAX_VERTEX_ATTRIBUTES: number = 16;
+export const GFX_MAX_TEXTURE_UNITS: number = 16;
+export const GFX_MAX_ATTACHMENTS: number = 4;
+export const GFX_MAX_BUFFER_BINDINGS: number = 24;
+
+export enum GFXObjectType {
+    UNKNOWN,
+    BUFFER,
+    TEXTURE,
+    TEXTURE_VIEW,
+    RENDER_PASS,
+    FRAMEBUFFER,
+    SAMPLER,
+    SHADER,
+    PIPELINE_LAYOUT,
+    PIPELINE_STATE,
+    BINDING_LAYOUT,
+    INPUT_ASSEMBLER,
+    COMMAND_ALLOCATOR,
+    COMMAND_BUFFER,
+    QUEUE,
+    WINDOW,
+}
+
+export enum GFXStatus {
+    UNREADY,
+    FAILED,
+    SUCCESS,
+}
+
+export class GFXObject {
+
+    public get gfxType (): GFXObjectType {
+        return this._gfxType;
+    }
+
+    public get status (): GFXStatus {
+        return this._status;
+    }
+
+    protected _gfxType = GFXObjectType.UNKNOWN;
+    protected _status = GFXStatus.UNREADY;
+
+    constructor (gfxType: GFXObjectType) {
+        this._gfxType = gfxType;
+    }
+}
+
+export enum GFXAttributeName {
+    ATTR_POSITION = 'a_position',
+    ATTR_NORMAL = 'a_normal',
+    ATTR_TANGENT = 'a_tangent',
+    ATTR_BITANGENT = 'a_bitangent',
+    ATTR_WEIGHTS = 'a_weights',
+    ATTR_JOINTS = 'a_joints',
+    ATTR_COLOR = 'a_color',
+    ATTR_COLOR1 = 'a_color1',
+    ATTR_COLOR2 = 'a_color2',
+    ATTR_TEX_COORD = 'a_texCoord',
+    ATTR_TEX_COORD1 = 'a_texCoord1',
+    ATTR_TEX_COORD2 = 'a_texCoord2',
+    ATTR_TEX_COORD3 = 'a_texCoord3',
+    ATTR_TEX_COORD4 = 'a_texCoord4',
+    ATTR_TEX_COORD5 = 'a_texCoord5',
+    ATTR_TEX_COORD6 = 'a_texCoord6',
+    ATTR_TEX_COORD7 = 'a_texCoord7',
+    ATTR_TEX_COORD8 = 'a_texCoord8',
+}
+
+export enum GFXType {
+    UNKNOWN,
+    BOOL,
+    BOOL2,
+    BOOL3,
+    BOOL4,
+    INT,
+    INT2,
+    INT3,
+    INT4,
+    UINT,
+    UINT2,
+    UINT3,
+    UINT4,
+    FLOAT,
+    FLOAT2,
+    FLOAT3,
+    FLOAT4,
+    COLOR4,
+    MAT2,
+    MAT2X3,
+    MAT2X4,
+    MAT3X2,
+    MAT3,
+    MAT3X4,
+    MAT4X2,
+    MAT4X3,
+    MAT4,
+    SAMPLER1D,
+    SAMPLER1D_ARRAY,
+    SAMPLER2D,
+    SAMPLER2D_ARRAY,
+    SAMPLER3D,
+    SAMPLER_CUBE,
+    COUNT,
+}
+
+export enum GFXFormat {
+
+    UNKNOWN,
+
+    A8,
+    L8,
+    LA8,
+
+    R8,
+    R8SN,
+    R8UI,
+    R8I,
+    R16F,
+    R16UI,
+    R16I,
+    R32F,
+    R32UI,
+    R32I,
+
+    RG8,
+    RG8SN,
+    RG8UI,
+    RG8I,
+    RG16F,
+    RG16UI,
+    RG16I,
+    RG32F,
+    RG32UI,
+    RG32I,
+
+    RGB8,
+    SRGB8,
+    RGB8SN,
+    RGB8UI,
+    RGB8I,
+    RGB16F,
+    RGB16UI,
+    RGB16I,
+    RGB32F,
+    RGB32UI,
+    RGB32I,
+
+    RGBA8,
+    SRGB8_A8,
+    RGBA8SN,
+    RGBA8UI,
+    RGBA8I,
+    RGBA16F,
+    RGBA16UI,
+    RGBA16I,
+    RGBA32F,
+    RGBA32UI,
+    RGBA32I,
+
+    // Special Format
+    R5G6B5,
+    R11G11B10F,
+    RGB5A1,
+    RGBA4,
+    RGB10A2,
+    RGB10A2UI,
+    RGB9E5,
+
+    // Depth-Stencil Format
+    D16,
+    D16S8,
+    D24,
+    D24S8,
+    D32F,
+    D32F_S8,
+
+    // Compressed Format
+
+    // Block Compression Format, DDS (DirectDraw Surface)
+    // DXT1: 3 channels (5:6:5), 1/8 origianl size, with 0 or 1 bit of alpha
+    BC1,
+    BC1_ALPHA,
+    BC1_SRGB,
+    BC1_SRGB_ALPHA,
+    // DXT3: 4 channels (5:6:5), 1/4 origianl size, with 4 bits of alpha
+    BC2,
+    BC2_SRGB,
+    // DXT5: 4 channels (5:6:5), 1/4 origianl size, with 8 bits of alpha
+    BC3,
+    BC3_SRGB,
+    // 1 channel (8), 1/4 origianl size
+    BC4,
+    BC4_SNORM,
+    // 2 channels (8:8), 1/2 origianl size
+    BC5,
+    BC5_SNORM,
+    // 3 channels (16:16:16), half-floating point, 1/6 origianl size
+    // UF16: unsigned float, 5 exponent bits + 11 mantissa bits
+    // SF16: signed float, 1 signed bit + 5 exponent bits + 10 mantissa bits
+    BC6H_UF16,
+    BC6H_SF16,
+    // 4 channels (4~7 bits per channel) with 0 to 8 bits of alpha, 1/3 original size
+    BC7,
+    BC7_SRGB,
+
+    // Ericsson Texture Compression Format
+    ETC_RGB8,
+    ETC2_RGB8,
+    ETC2_SRGB8,
+    ETC2_RGB8_A1,
+    ETC2_SRGB8_A1,
+    ETC2_RGBA8,
+    ETC2_SRGB8_A8,
+    EAC_R11,
+    EAC_R11SN,
+    EAC_RG11,
+    EAC_RG11SN,
+
+    // PVRTC (PowerVR)
+    PVRTC_RGB2,
+    PVRTC_RGBA2,
+    PVRTC_RGB4,
+    PVRTC_RGBA4,
+    PVRTC2_2BPP,
+    PVRTC2_4BPP,
+}
+
+export enum GFXBufferUsageBit {
+    NONE = 0,
+    TRANSFER_SRC = 0x1,
+    TRANSFER_DST = 0x2,
+    INDEX = 0x4,
+    VERTEX = 0x8,
+    UNIFORM = 0x10,
+    STORAGE = 0x20,
+    INDIRECT = 0x40,
+}
+
+export type GFXBufferUsage = GFXBufferUsageBit;
+
+export enum GFXMemoryUsageBit {
+    NONE = 0,
+    DEVICE = 0x1,
+    HOST = 0x2,
+}
+
+export type GFXMemoryUsage = GFXMemoryUsageBit;
+
+export enum GFXBufferAccessBit {
+    NONE = 0,
+    READ = 0x1,
+    WRITE = 0x2,
+}
+
+export type GFXBufferAccess = GFXBufferAccessBit;
+
+export enum GFXPrimitiveMode {
+    POINT_LIST,
+    LINE_LIST,
+    LINE_STRIP,
+    LINE_LOOP,
+    LINE_LIST_ADJACENCY,
+    LINE_STRIP_ADJACENCY,
+    ISO_LINE_LIST,
+    // raycast detectable:
+    TRIANGLE_LIST,
+    TRIANGLE_STRIP,
+    TRIANGLE_FAN,
+    TRIANGLE_LIST_ADJACENCY,
+    TRIANGLE_STRIP_ADJACENCY,
+    TRIANGLE_PATCH_ADJACENCY,
+    QUAD_PATCH_LIST,
+}
+
+export enum GFXPolygonMode {
+    FILL,
+    POINT,
+    LINE,
+}
+
+export enum GFXShadeModel {
+    GOURAND,
+    FLAT,
+}
+
+export enum GFXCullMode {
+    NONE,
+    FRONT,
+    BACK,
+}
+
+export enum GFXComparisonFunc {
+    NEVER,
+    LESS,
+    EQUAL,
+    LESS_EQUAL,
+    GREATER,
+    NOT_EQUAL,
+    GREATER_EQUAL,
+    ALWAYS,
+}
+
+export enum GFXStencilOp {
+    ZERO,
+    KEEP,
+    REPLACE,
+    INCR,
+    DECR,
+    INVERT,
+    INCR_WRAP,
+    DECR_WRAP,
+}
+
+export enum GFXBlendOp {
+    ADD,
+    SUB,
+    REV_SUB,
+    MIN,
+    MAX,
+}
+
+export enum GFXBlendFactor {
+    ZERO,
+    ONE,
+    SRC_ALPHA,
+    DST_ALPHA,
+    ONE_MINUS_SRC_ALPHA,
+    ONE_MINUS_DST_ALPHA,
+    SRC_COLOR,
+    DST_COLOR,
+    ONE_MINUS_SRC_COLOR,
+    ONE_MINUS_DST_COLOR,
+    SRC_ALPHA_SATURATE,
+    CONSTANT_COLOR,
+    ONE_MINUS_CONSTANT_COLOR,
+    CONSTANT_ALPHA,
+    ONE_MINUS_CONSTANT_ALPHA,
+}
+
+export enum GFXColorMask {
+    NONE = 0x0,
+    R = 0x1,
+    G = 0x2,
+    B = 0x4,
+    A = 0x8,
+    ALL = R | G | B | A,
+}
+
+export enum GFXFilter {
+    NONE,
+    POINT,
+    LINEAR,
+    ANISOTROPIC,
+}
+
+export enum GFXAddress {
+    WRAP,
+    MIRROR,
+    CLAMP,
+    BORDER,
+}
+
+export enum GFXTextureType {
+    TEX1D,
+    TEX2D,
+    TEX3D,
+}
+
+export enum GFXTextureUsageBit {
+    NONE = 0,
+    TRANSFER_SRC = 0x1,
+    TRANSFER_DST = 0x2,
+    SAMPLED = 0x4,
+    STORAGE = 0x8,
+    COLOR_ATTACHMENT = 0x10,
+    DEPTH_STENCIL_ATTACHMENT = 0x20,
+    TRANSIENT_ATTACHMENT = 0x40,
+    INPUT_ATTACHMENT = 0x80,
+}
+
+export type GFXTextureUsage = GFXTextureUsageBit;
+
+export enum GFXSampleCount {
+    X1,
+    X2,
+    X4,
+    X8,
+    X16,
+    X32,
+    X64,
+}
+
+export enum GFXTextureFlagBit {
+    NONE = 0,
+    GEN_MIPMAP = 0x1,
+    CUBEMAP = 0x2,
+    BAKUP_BUFFER = 0x4,
+}
+
+export type GFXTextureFlags = GFXTextureFlagBit;
+
+export enum GFXTextureViewType {
+    TV1D,
+    TV2D,
+    TV3D,
+    CUBE,
+    TV1D_ARRAY,
+    TV2D_ARRAY,
+}
+
+export enum GFXShaderType {
+    VERTEX,
+    HULL,
+    DOMAIN,
+    GEOMETRY,
+    FRAGMENT,
+    COMPUTE,
+    COUNT,
+}
+
+export enum GFXBindingType {
+    UNKNOWN,
+    UNIFORM_BUFFER,
+    SAMPLER,
+    STORAGE_BUFFER,
+}
+
+export enum GFXCommandBufferType {
+    PRIMARY,
+    SECONDARY,
+}
+
+// Enumeration all possible values of operations to be performed on initially Loading a Framebuffer Object.
+export enum GFXLoadOp {
+    LOAD,		// Load the contents from the fbo from previous
+    CLEAR,		// Clear the fbo
+    DISCARD,	// Ignore writing to the fbo and keep old data
+}
+
+// Enumerates all possible values of operations to be performed when Storing to a Framebuffer Object.
+export enum GFXStoreOp {
+    STORE,		// Write the source to the destination
+    DISCARD,	// Don't write the source to the destination
+}
+
+export enum GFXTextureLayout {
+    UNDEFINED,
+    GENERAL,
+    COLOR_ATTACHMENT_OPTIMAL,
+    DEPTH_STENCIL_ATTACHMENT_OPTIMAL,
+    DEPTH_STENCIL_READONLY_OPTIMAL,
+    SHADER_READONLY_OPTIMAL,
+    TRANSFER_SRC_OPTIMAL,
+    TRANSFER_DST_OPTIMAL,
+    PREINITIALIZED,
+    PRESENT_SRC,
+}
+
+export enum GFXPipelineBindPoint {
+    GRAPHICS,
+    COMPUTE,
+    RAY_TRACING,
+}
+
+export enum GFXDynamicState {
+    VIEWPORT,
+    SCISSOR,
+    LINE_WIDTH,
+    DEPTH_BIAS,
+    BLEND_CONSTANTS,
+    DEPTH_BOUNDS,
+    STENCIL_WRITE_MASK,
+    STENCIL_COMPARE_MASK,
+}
+
+export enum GFXStencilFace {
+    FRONT,
+    BACK,
+    ALL,
+}
+
+export enum GFXQueueType {
+    GRAPHICS,
+    COMPUTE,
+    TRANSFER,
+}
+
+// Interfaces
+
+export interface IGFXRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface IGFXViewport {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    minDepth: number;
+    maxDepth: number;
+}
+
+export interface IGFXColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+export enum GFXClearFlag {
+    NONE = 0,
+    COLOR = 1,
+    DEPTH = 2,
+    STENCIL = 4,
+    DEPTH_STENCIL = DEPTH | STENCIL,
+    ALL = COLOR | DEPTH | STENCIL,
+}
+
+export interface IGFXOffset {
+    x: number;
+    y: number;
+    z: number;
+}
+
+export interface IGFXExtent {
+    width: number;
+    height: number;
+    depth: number;
+}
+
+export class GFXTextureSubres {
+    public baseMipLevel: number = 0;
+    public levelCount: number = 1;
+    public baseArrayLayer: number = 0;
+    public layerCount: number = 1;
+}
+
+export class GFXTextureCopy {
+    public srcSubres: GFXTextureSubres = new GFXTextureSubres();
+    public srcOffset: IGFXOffset = { x: 0, y: 0, z: 0 };
+    public dstSubres: GFXTextureSubres = new GFXTextureSubres();
+    public dstOffset: IGFXOffset = { x: 0, y: 0, z: 0 };
+    public extent: IGFXExtent = { width: 0, height: 0, depth: 0 };
+}
+
+export class GFXBufferTextureCopy {
+    public buffOffset: number = 0;
+    public buffStride: number = 0;
+    public buffTexHeight: number = 0;
+    public texOffset: IGFXOffset = { x: 0, y: 0, z: 0 };
+    public texExtent: IGFXExtent = { width: 0, height: 0, depth: 0 };
+    public texSubres: GFXTextureSubres = new GFXTextureSubres();
+}
+
+export interface IGFXFormatInfo {
+    readonly name: string;
+    readonly size: number;
+    readonly count: number;
+    readonly isFloating: boolean;
+    readonly hasAlpha: boolean;
+    readonly hasDepth: boolean;
+    readonly hasStencil: boolean;
+    readonly isCompressed: boolean;
+}
+
+// tslint:disable: max-line-length
+export const GFXFormatInfos: IGFXFormatInfo[] = [
+
+    { name: 'UNKNOWN', size: 0, count: 0, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'A8', size: 1, count: 1, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'L8', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'LA8', size: 1, count: 2, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'R8', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R8SN', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R8UI', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R8I', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R16F', size: 2, count: 1, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R16UI', size: 2, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R16I', size: 2, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R32F', size: 4, count: 1, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R32UI', size: 4, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R32I', size: 4, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'RG8', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG8SN', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG8UI', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG8I', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG16F', size: 4, count: 2, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG16UI', size: 4, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG16I', size: 4, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG32F', size: 8, count: 2, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG32UI', size: 8, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RG32I', size: 8, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'RGB8', size: 3, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'SRGB8', size: 3, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB8SN', size: 3, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB8UI', size: 3, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB8I', size: 3, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB16F', size: 6, count: 3, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB16UI', size: 6, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB16I', size: 6, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB32F', size: 12, count: 3, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB32UI', size: 12, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB32I', size: 12, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'RGBA8', size: 4, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'SRGB8_A8', size: 4, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA8SN', size: 4, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA8UI', size: 4, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA8I', size: 4, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA16F', size: 8, count: 4, isFloating: true, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA16UI', size: 8, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA16I', size: 8, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA32F', size: 16, count: 4, isFloating: true, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA32UI', size: 16, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA32I', size: 16, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'R5G6B5', size: 2, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'R11G11B10F', size: 4, count: 3, isFloating: true, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB5A1', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGBA4', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB10A2', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB10A2UI', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+    { name: 'RGB9E5', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: false },
+
+    { name: 'D16', size: 2, count: 1, isFloating: false, hasAlpha: false, hasDepth: true, hasStencil: false, isCompressed: false },
+    { name: 'D16S8', size: 3, count: 2, isFloating: false, hasAlpha: false, hasDepth: true, hasStencil: true, isCompressed: false },
+    { name: 'D24', size: 3, count: 1, isFloating: false, hasAlpha: false, hasDepth: true, hasStencil: false, isCompressed: false },
+    { name: 'D24S8', size: 4, count: 2, isFloating: false, hasAlpha: false, hasDepth: true, hasStencil: true, isCompressed: false },
+    { name: 'D32F', size: 4, count: 1, isFloating: true, hasAlpha: false, hasDepth: true, hasStencil: false, isCompressed: false },
+    { name: 'D32FS8', size: 5, count: 2, isFloating: true, hasAlpha: false, hasDepth: true, hasStencil: true, isCompressed: false },
+
+    { name: 'BC1', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC1_ALPHA', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC1_SRGB', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC1_SRGB_ALPHA', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC2', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC2_SRGB', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC3', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC3_SRGB', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC4', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC4_SNORM', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC5', size: 1, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC5_SNORM', size: 1, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC6H_UF16', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC6H_SF16', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC7', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'BC7_SRGB', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+
+    { name: 'ETC_RGB8', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_RGB8', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_SRGB8', size: 1, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_RGB8_A1', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_SRGB8_A1', size: 1, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_RGBA8', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'ETC2_SRGB8_A8', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'EAC_R11', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'EAC_R11SN', size: 1, count: 1, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'EAC_RG11', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'EAC_RG11SN', size: 2, count: 2, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+
+    { name: 'PVRTC_RGB2', size: 2, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'PVRTC_RGBA2', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'PVRTC_RGB4', size: 2, count: 3, isFloating: false, hasAlpha: false, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'PVRTC_RGBA4', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'PVRTC2_2BPP', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+    { name: 'PVRTC2_4BPP', size: 2, count: 4, isFloating: false, hasAlpha: true, hasDepth: false, hasStencil: false, isCompressed: true },
+];
+// tslint:enable: max-line-length
+
+export function GFXFormatSize (format: GFXFormat, width: number, height: number, depth: number): number {
+
+    if (!GFXFormatInfos[format].isCompressed) {
+        return (width * height * depth * GFXFormatInfos[format].size);
+    } else {
+        switch (format) {
+            case GFXFormat.BC1:
+            case GFXFormat.BC1_ALPHA:
+            case GFXFormat.BC1_SRGB:
+            case GFXFormat.BC1_SRGB_ALPHA:
+                return Math.ceil(width / 4) * Math.ceil(height / 4) * 8 * depth;
+            case GFXFormat.BC2:
+            case GFXFormat.BC2_SRGB:
+            case GFXFormat.BC3:
+            case GFXFormat.BC3_SRGB:
+            case GFXFormat.BC4:
+            case GFXFormat.BC4_SNORM:
+            case GFXFormat.BC6H_SF16:
+            case GFXFormat.BC6H_UF16:
+            case GFXFormat.BC7:
+            case GFXFormat.BC7_SRGB:
+                return Math.ceil(width / 4) * Math.ceil(height / 4) * 16 * depth;
+            case GFXFormat.BC5:
+            case GFXFormat.BC5_SNORM:
+                return Math.ceil(width / 4) * Math.ceil(height / 4) * 32 * depth;
+
+            case GFXFormat.ETC_RGB8:
+            case GFXFormat.ETC2_RGB8:
+            case GFXFormat.ETC2_SRGB8:
+            case GFXFormat.ETC2_RGB8_A1:
+            case GFXFormat.ETC2_SRGB8_A1:
+            case GFXFormat.EAC_R11:
+            case GFXFormat.EAC_R11SN:
+                return Math.ceil(width / 4) * Math.ceil(height / 4) * 8 * depth;
+            case GFXFormat.EAC_RG11:
+            case GFXFormat.EAC_RG11SN:
+                return Math.ceil(width / 4) * Math.ceil(height / 4) * 16 * depth;
+
+            case GFXFormat.PVRTC_RGB2:
+            case GFXFormat.PVRTC_RGBA2:
+            case GFXFormat.PVRTC2_2BPP:
+                return Math.ceil(Math.max(width, 16) * Math.max(height, 8) / 4) * depth;
+            case GFXFormat.PVRTC_RGB4:
+            case GFXFormat.PVRTC_RGBA4:
+            case GFXFormat.PVRTC2_4BPP:
+                return Math.ceil(Math.max(width, 16) * Math.max(height, 8) / 2) * depth;
+
+            default: {
+                return 0;
+            }
+        }
+    }
+}
+
+export function GFXFormatSurfaceSize (
+    format: GFXFormat, width: number, height: number,
+    depth: number, mips: number): number {
+
+    let size = 0;
+
+    for (let i = 0; i < mips; ++i) {
+        size += GFXFormatSize(format, width, height, depth);
+        width = Math.max(width >> 1, 1);
+        height = Math.max(height >> 1, 1);
+        depth = Math.max(depth >> 1, 1);
+    }
+
+    return size;
+}
+
+export function GFXGetTypeSize (type: GFXType): number {
+    switch (type) {
+        case GFXType.BOOL:
+        case GFXType.INT:
+        case GFXType.UINT:
+        case GFXType.FLOAT: return 4;
+        case GFXType.BOOL2:
+        case GFXType.INT2:
+        case GFXType.UINT2:
+        case GFXType.FLOAT2: return 8;
+        case GFXType.BOOL3:
+        case GFXType.INT3:
+        case GFXType.UINT3:
+        case GFXType.FLOAT3: return 12;
+        case GFXType.BOOL4:
+        case GFXType.INT4:
+        case GFXType.UINT4:
+        case GFXType.FLOAT4:
+        case GFXType.MAT2: return 16;
+        case GFXType.MAT2X3: return 24;
+        case GFXType.MAT2X4: return 32;
+        case GFXType.MAT3X2: return 24;
+        case GFXType.MAT3: return 36;
+        case GFXType.MAT3X4: return 48;
+        case GFXType.MAT4X2: return 32;
+        case GFXType.MAT4X2: return 32;
+        case GFXType.MAT4: return 64;
+        case GFXType.SAMPLER1D:
+        case GFXType.SAMPLER1D_ARRAY:
+        case GFXType.SAMPLER2D:
+        case GFXType.SAMPLER2D_ARRAY:
+        case GFXType.SAMPLER3D:
+        case GFXType.SAMPLER_CUBE: return 4;
+        default: {
+            return 0;
+        }
+    }
+}
--- a/engine/cocos2d/renderer/build/mappings/index.js
+++ b/engine/cocos2d/renderer/build/mappings/index.js
--- a/engine/cocos2d/renderer/build/mappings/offline-mappings.ts
+++ b/engine/cocos2d/renderer/build/mappings/offline-mappings.ts
@@ -0,0 +1,256 @@
+// this file is used for offline effect building.
+
+import { enums } from '../../gfx/enums';
+import rendererEnums from '../../enums';
+import { RenderQueue, PassStage } from '../../core/constants';
+import murmurhash2_32_gc from '../../murmurhash2_gc';
+import * as gfx from './gfx/define';
+import { RenderPassStage, RenderPriority, UniformBinding } from './pipeline/define';
+
+enum SamplerInfoIndex {
+  minFilter,
+  magFilter,
+  mipFilter,
+  addressU,
+  addressV,
+  addressW,
+  maxAnisotropy,
+  cmpFunc,
+  minLOD,
+  maxLOD,
+  mipLODBias,
+  borderColor,
+  total = borderColor + 4,
+}
+
+let typeMap = {};
+typeMap[typeMap['bool'] = gfx.GFXType.BOOL] = 'bool';
+typeMap[typeMap['int'] = gfx.GFXType.INT] = 'int';
+typeMap[typeMap['ivec2'] = gfx.GFXType.INT2] = 'ivec2invTypeParams';
+typeMap[typeMap['ivec3'] = gfx.GFXType.INT3] = 'ivec3';
+typeMap[typeMap['ivec4'] = gfx.GFXType.INT4] = 'ivec4';
+typeMap[typeMap['float'] = gfx.GFXType.FLOAT] = 'float';
+typeMap[typeMap['vec2'] = gfx.GFXType.FLOAT2] = 'vec2';
+typeMap[typeMap['vec3'] = gfx.GFXType.FLOAT3] = 'vec3';
+typeMap[typeMap['vec4'] = gfx.GFXType.FLOAT4] = 'vec4';
+typeMap[typeMap['mat2'] = gfx.GFXType.MAT2] = 'mat2';
+typeMap[typeMap['mat3'] = gfx.GFXType.MAT3] = 'mat3';
+typeMap[typeMap['mat4'] = gfx.GFXType.MAT4] = 'mat4';
+typeMap[typeMap['sampler2D'] = gfx.GFXType.SAMPLER2D] = 'sampler2D';
+typeMap[typeMap['samplerCube'] = gfx.GFXType.SAMPLER_CUBE] = 'samplerCube';
+
+const sizeMap = {
+  [gfx.GFXType.BOOL]: 4,
+  [gfx.GFXType.INT]: 4,
+  [gfx.GFXType.INT2]: 8,
+  [gfx.GFXType.INT3]: 12,
+  [gfx.GFXType.INT4]: 16,
+  [gfx.GFXType.FLOAT]: 4,
+  [gfx.GFXType.FLOAT2]: 8,
+  [gfx.GFXType.FLOAT3]: 12,
+  [gfx.GFXType.FLOAT4]: 16,
+  [gfx.GFXType.MAT2]: 16,
+  [gfx.GFXType.MAT3]: 36,
+  [gfx.GFXType.MAT4]: 64,
+  [gfx.GFXType.SAMPLER2D]: 4,
+  [gfx.GFXType.SAMPLER_CUBE]: 4,
+};
+
+const formatMap = {
+  [gfx.GFXType.BOOL]: gfx.GFXFormat.R32I,
+  [gfx.GFXType.INT]: gfx.GFXFormat.R32I,
+  [gfx.GFXType.INT2]: gfx.GFXFormat.RG32I,
+  [gfx.GFXType.INT3]: gfx.GFXFormat.RGB32I,
+  [gfx.GFXType.INT4]: gfx.GFXFormat.RGBA32I,
+  [gfx.GFXType.FLOAT]: gfx.GFXFormat.R32F,
+  [gfx.GFXType.FLOAT2]: gfx.GFXFormat.RG32F,
+  [gfx.GFXType.FLOAT3]: gfx.GFXFormat.RGB32F,
+  [gfx.GFXType.FLOAT4]: gfx.GFXFormat.RGBA32F,
+};
+
+// const passParams = {
+//   // color mask
+//   NONE: gfx.GFXColorMask.NONE,
+//   R: gfx.GFXColorMask.R,
+//   G: gfx.GFXColorMask.G,
+//   B: gfx.GFXColorMask.B,
+//   A: gfx.GFXColorMask.A,
+//   RG: gfx.GFXColorMask.R | gfx.GFXColorMask.G,
+//   RB: gfx.GFXColorMask.R | gfx.GFXColorMask.B,
+//   RA: gfx.GFXColorMask.R | gfx.GFXColorMask.A,
+//   GB: gfx.GFXColorMask.G | gfx.GFXColorMask.B,
+//   GA: gfx.GFXColorMask.G | gfx.GFXColorMask.A,
+//   BA: gfx.GFXColorMask.B | gfx.GFXColorMask.A,
+//   RGB: gfx.GFXColorMask.R | gfx.GFXColorMask.G | gfx.GFXColorMask.B,
+//   RGA: gfx.GFXColorMask.R | gfx.GFXColorMask.G | gfx.GFXColorMask.A,
+//   RBA: gfx.GFXColorMask.R | gfx.GFXColorMask.B | gfx.GFXColorMask.A,
+//   GBA: gfx.GFXColorMask.G | gfx.GFXColorMask.B | gfx.GFXColorMask.A,
+//   ALL: gfx.GFXColorMask.ALL,
+
+//   // blend operation
+//   ADD: gfx.GFXBlendOp.ADD,
+//   SUB: gfx.GFXBlendOp.SUB,
+//   REV_SUB: gfx.GFXBlendOp.REV_SUB,
+//   MIN: gfx.GFXBlendOp.MIN,
+//   MAX: gfx.GFXBlendOp.MAX,
+
+//   // blend factor
+//   ZERO: gfx.GFXBlendFactor.ZERO,
+//   ONE: gfx.GFXBlendFactor.ONE,
+//   SRC_ALPHA: gfx.GFXBlendFactor.SRC_ALPHA,
+//   DST_ALPHA: gfx.GFXBlendFactor.DST_ALPHA,
+//   ONE_MINUS_SRC_ALPHA: gfx.GFXBlendFactor.ONE_MINUS_SRC_ALPHA,
+//   ONE_MINUS_DST_ALPHA: gfx.GFXBlendFactor.ONE_MINUS_DST_ALPHA,
+//   SRC_COLOR: gfx.GFXBlendFactor.SRC_COLOR,
+//   DST_COLOR: gfx.GFXBlendFactor.DST_COLOR,
+//   ONE_MINUS_SRC_COLOR: gfx.GFXBlendFactor.ONE_MINUS_SRC_COLOR,
+//   ONE_MINUS_DST_COLOR: gfx.GFXBlendFactor.ONE_MINUS_DST_COLOR,
+//   SRC_ALPHA_SATURATE: gfx.GFXBlendFactor.SRC_ALPHA_SATURATE,
+//   CONSTANT_COLOR: gfx.GFXBlendFactor.CONSTANT_COLOR,
+//   ONE_MINUS_CONSTANT_COLOR: gfx.GFXBlendFactor.ONE_MINUS_CONSTANT_COLOR,
+//   CONSTANT_ALPHA: gfx.GFXBlendFactor.CONSTANT_ALPHA,
+//   ONE_MINUS_CONSTANT_ALPHA: gfx.GFXBlendFactor.ONE_MINUS_CONSTANT_ALPHA,
+//   // stencil operation
+//   // ZERO: GFXStencilOp.ZERO, // duplicate, safely removed because enum value is(and always will be) the same
+//   KEEP: gfx.GFXStencilOp.KEEP,
+//   REPLACE: gfx.GFXStencilOp.REPLACE,
+//   INCR: gfx.GFXStencilOp.INCR,
+//   DECR: gfx.GFXStencilOp.DECR,
+//   INVERT: gfx.GFXStencilOp.INVERT,
+//   INCR_WRAP: gfx.GFXStencilOp.INCR_WRAP,
+//   DECR_WRAP: gfx.GFXStencilOp.DECR_WRAP,
+//     // comparison function
+//   NEVER: gfx.GFXComparisonFunc.NEVER,
+//   LESS: gfx.GFXComparisonFunc.LESS,
+//   EQUAL: gfx.GFXComparisonFunc.EQUAL,
+//   LESS_EQUAL: gfx.GFXComparisonFunc.LESS_EQUAL,
+//   GREATER: gfx.GFXComparisonFunc.GREATER,
+//   NOT_EQUAL: gfx.GFXComparisonFunc.NOT_EQUAL,
+//   GREATER_EQUAL: gfx.GFXComparisonFunc.GREATER_EQUAL,
+//   ALWAYS: gfx.GFXComparisonFunc.ALWAYS,
+//   // cull mode
+//   // NONE: GFXCullMode.NONE, // duplicate, safely removed because enum value is(and always will be) the same
+//   FRONT: gfx.GFXCullMode.FRONT,
+//   BACK: gfx.GFXCullMode.BACK,
+//   // shade mode
+//   GOURAND: gfx.GFXShadeModel.GOURAND,
+//   FLAT: gfx.GFXShadeModel.FLAT,
+//   // polygon mode
+//   FILL: gfx.GFXPolygonMode.FILL,
+//   LINE: gfx.GFXPolygonMode.LINE,
+//   POINT: gfx.GFXPolygonMode.POINT,
+//   // primitive mode
+//   POINT_LIST: gfx.GFXPrimitiveMode.POINT_LIST,
+//   LINE_LIST: gfx.GFXPrimitiveMode.LINE_LIST,
+//   LINE_STRIP: gfx.GFXPrimitiveMode.LINE_STRIP,
+//   LINE_LOOP: gfx.GFXPrimitiveMode.LINE_LOOP,
+//   TRIANGLE_LIST: gfx.GFXPrimitiveMode.TRIANGLE_LIST,
+//   TRIANGLE_STRIP: gfx.GFXPrimitiveMode.TRIANGLE_STRIP,
+//   TRIANGLE_FAN: gfx.GFXPrimitiveMode.TRIANGLE_FAN,
+//   LINE_LIST_ADJACENCY: gfx.GFXPrimitiveMode.LINE_LIST_ADJACENCY,
+//   LINE_STRIP_ADJACENCY: gfx.GFXPrimitiveMode.LINE_STRIP_ADJACENCY,
+//   TRIANGLE_LIST_ADJACENCY: gfx.GFXPrimitiveMode.TRIANGLE_LIST_ADJACENCY,
+//   TRIANGLE_STRIP_ADJACENCY: gfx.GFXPrimitiveMode.TRIANGLE_STRIP_ADJACENCY,
+//   TRIANGLE_PATCH_ADJACENCY: gfx.GFXPrimitiveMode.TRIANGLE_PATCH_ADJACENCY,
+//   QUAD_PATCH_LIST: gfx.GFXPrimitiveMode.QUAD_PATCH_LIST,
+//   ISO_LINE_LIST: gfx.GFXPrimitiveMode.ISO_LINE_LIST,
+
+//   // POINT: gfx.GFXFilter.POINT, // duplicate, safely removed because enum value is(and always will be) the same
+//   LINEAR: gfx.GFXFilter.LINEAR,
+//   ANISOTROPIC: gfx.GFXFilter.ANISOTROPIC,
+
+//   WRAP: gfx.GFXAddress.WRAP,
+//   MIRROR: gfx.GFXAddress.MIRROR,
+//   CLAMP: gfx.GFXAddress.CLAMP,
+//   BORDER: gfx.GFXAddress.BORDER,
+
+//   VIEWPORT: gfx.GFXDynamicState.VIEWPORT,
+//   SCISSOR: gfx.GFXDynamicState.SCISSOR,
+//   LINE_WIDTH: gfx.GFXDynamicState.LINE_WIDTH,
+//   DEPTH_BIAS: gfx.GFXDynamicState.DEPTH_BIAS,
+//   BLEND_CONSTANTS: gfx.GFXDynamicState.BLEND_CONSTANTS,
+//   DEPTH_BOUNDS: gfx.GFXDynamicState.DEPTH_BOUNDS,
+//   STENCIL_WRITE_MASK: gfx.GFXDynamicState.STENCIL_WRITE_MASK,
+//   STENCIL_COMPARE_MASK: gfx.GFXDynamicState.STENCIL_COMPARE_MASK,
+
+//   TRUE: true,
+//   FALSE: false
+// };
+
+const passParams = {
+  BACK: enums.CULL_BACK,
+  FRONT: enums.CULL_FRONT,
+  NONE: enums.CULL_NONE,
+
+  ADD: enums.BLEND_FUNC_ADD,
+  SUB: enums.BLEND_FUNC_SUBTRACT,
+  REV_SUB: enums.BLEND_FUNC_REVERSE_SUBTRACT,
+
+  ZERO: enums.BLEND_ZERO,
+  ONE: enums.BLEND_ONE,
+  SRC_COLOR: enums.BLEND_SRC_COLOR,
+  ONE_MINUS_SRC_COLOR: enums.BLEND_ONE_MINUS_SRC_COLOR,
+  DST_COLOR: enums.BLEND_DST_COLOR,
+  ONE_MINUS_DST_COLOR: enums.BLEND_ONE_MINUS_DST_COLOR,
+  SRC_ALPHA: enums.BLEND_SRC_ALPHA,
+  ONE_MINUS_SRC_ALPHA: enums.BLEND_ONE_MINUS_SRC_ALPHA,
+  DST_ALPHA: enums.BLEND_DST_ALPHA,
+  ONE_MINUS_DST_ALPHA: enums.BLEND_ONE_MINUS_DST_ALPHA,
+  CONSTANT_COLOR: enums.BLEND_CONSTANT_COLOR,
+  ONE_MINUS_CONSTANT_COLOR: enums.BLEND_ONE_MINUS_CONSTANT_COLOR,
+  CONSTANT_ALPHA: enums.BLEND_CONSTANT_ALPHA,
+  ONE_MINUS_CONSTANT_ALPHA: enums.BLEND_ONE_MINUS_CONSTANT_ALPHA,
+  SRC_ALPHA_SATURATE: enums.BLEND_SRC_ALPHA_SATURATE,
+
+  NEVER: enums.DS_FUNC_NEVER,
+  LESS: enums.DS_FUNC_LESS,
+  EQUAL: enums.DS_FUNC_EQUAL,
+  LEQUAL: enums.DS_FUNC_LEQUAL,
+  GREATER: enums.DS_FUNC_GREATER,
+  NOTEQUAL: enums.DS_FUNC_NOTEQUAL,
+  GEQUAL: enums.DS_FUNC_GEQUAL,
+  ALWAYS: enums.DS_FUNC_ALWAYS,
+
+  KEEP: enums.STENCIL_OP_KEEP,
+  REPLACE: enums.STENCIL_OP_REPLACE,
+  INCR: enums.STENCIL_OP_INCR,
+  INCR_WRAP: enums.STENCIL_OP_INCR_WRAP,
+  DECR: enums.STENCIL_OP_DECR,
+  DECR_WRAP: enums.STENCIL_OP_DECR_WRAP,
+  INVERT: enums.STENCIL_OP_INVERT
+};
+Object.assign(passParams, RenderPassStage);
+
+// for structural type checking
+// an 'any' key will check against all elements defined in that object
+// a key start with '$' means its essential, and can't be undefined
+const effectStructure = {
+  $techniques: [
+    {
+      $passes: [
+        {
+          depthStencilState: {},
+          rasterizerState: {},
+          blendState: { targets: [{}] },
+          properties: { any: { sampler: {}, inspector: {} } }
+        }
+      ]
+    }
+  ]
+};
+
+let mappings = {
+  murmurhash2_32_gc,
+  SamplerInfoIndex,
+  effectStructure,
+  typeMap,
+  sizeMap,
+  formatMap,
+  passParams,
+  RenderQueue,
+  RenderPriority,
+  GFXGetTypeSize: gfx.GFXGetTypeSize,
+  UniformBinding
+};
+
+export default mappings;
--- a/engine/cocos2d/renderer/build/mappings/pipeline/define.ts
+++ b/engine/cocos2d/renderer/build/mappings/pipeline/define.ts
@@ -0,0 +1,194 @@
+// import { GFXBuffer } from '../gfx/buffer';
+// import { GFXBindingType, GFXType } from '../gfx/define';
+// import { GFXSampler } from '../gfx/sampler';
+// import { GFXUniformBlock, GFXUniformSampler } from '../gfx/shader';
+// import { GFXTextureView } from '../gfx/texture-view';
+
+export const PIPELINE_FLOW_FORWARD: string = 'ForwardFlow';
+export const PIPELINE_FLOW_SMAA: string = 'SMAAFlow';
+export const PIPELINE_FLOW_TONEMAP: string = 'ToneMapFlow';
+
+export enum RenderPassStage {
+    DEFAULT = 100,
+}
+
+export enum RenderPriority {
+    MIN = 0,
+    MAX = 0xff,
+    DEFAULT = 0x80,
+}
+
+const MAX_BINDING_SUPPORTED = 24; // from WebGL 2 spec
+export enum UniformBinding {
+    // UBOs
+    UBO_GLOBAL = MAX_BINDING_SUPPORTED - 1,
+    UBO_SHADOW = MAX_BINDING_SUPPORTED - 2,
+
+    UBO_LOCAL = MAX_BINDING_SUPPORTED - 3,
+    UBO_FORWARD_LIGHTS = MAX_BINDING_SUPPORTED - 4,
+    UBO_SKINNING = MAX_BINDING_SUPPORTED - 5,
+    UBO_SKINNING_TEXTURE = MAX_BINDING_SUPPORTED - 6,
+    UBO_UI = MAX_BINDING_SUPPORTED - 7,
+
+    // samplers
+    SAMPLER_JOINTS = MAX_BINDING_SUPPORTED + 1,
+    SAMPLER_ENVIRONMENT = MAX_BINDING_SUPPORTED + 2,
+
+    // rooms left for custom bindings
+    // effect importer prepares bindings according to this
+    CUSTUM_UBO_BINDING_END_POINT = MAX_BINDING_SUPPORTED - 7,
+    CUSTOM_SAMPLER_BINDING_START_POINT = MAX_BINDING_SUPPORTED + 6,
+}
+
+// export class UBOGlobal {
+//     public static TIME_OFFSET: number = 0;
+//     public static SCREEN_SIZE_OFFSET: number = UBOGlobal.TIME_OFFSET + 4;
+//     public static SCREEN_SCALE_OFFSET: number = UBOGlobal.SCREEN_SIZE_OFFSET + 4;
+//     public static NATIVE_SIZE_OFFSET: number = UBOGlobal.SCREEN_SCALE_OFFSET + 4;
+//     public static MAT_VIEW_OFFSET: number = UBOGlobal.NATIVE_SIZE_OFFSET + 4;
+//     public static MAT_VIEW_INV_OFFSET: number = UBOGlobal.MAT_VIEW_OFFSET + 16;
+//     public static MAT_PROJ_OFFSET: number = UBOGlobal.MAT_VIEW_INV_OFFSET + 16;
+//     public static MAT_PROJ_INV_OFFSET: number = UBOGlobal.MAT_PROJ_OFFSET + 16;
+//     public static MAT_VIEW_PROJ_OFFSET: number = UBOGlobal.MAT_PROJ_INV_OFFSET + 16;
+//     public static MAT_VIEW_PROJ_INV_OFFSET: number = UBOGlobal.MAT_VIEW_PROJ_OFFSET + 16;
+//     public static CAMERA_POS_OFFSET: number = UBOGlobal.MAT_VIEW_PROJ_INV_OFFSET + 16;
+//     public static EXPOSURE_OFFSET: number = UBOGlobal.CAMERA_POS_OFFSET + 4;
+//     public static MAIN_LIT_DIR_OFFSET: number = UBOGlobal.EXPOSURE_OFFSET + 4;
+//     public static MAIN_LIT_COLOR_OFFSET: number = UBOGlobal.MAIN_LIT_DIR_OFFSET + 4;
+//     public static AMBIENT_SKY_OFFSET: number = UBOGlobal.MAIN_LIT_COLOR_OFFSET + 4;
+//     public static AMBIENT_GROUND_OFFSET: number = UBOGlobal.AMBIENT_SKY_OFFSET + 4;
+//     public static COUNT: number = UBOGlobal.AMBIENT_GROUND_OFFSET + 4;
+//     public static SIZE: number = UBOGlobal.COUNT * 4;
+
+//     public static BLOCK: GFXUniformBlock = {
+//         binding: UniformBinding.UBO_GLOBAL, name: 'CCGlobal', members: [
+//             { name: 'cc_time', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_screenSize', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_screenScale', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_nativeSize', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_matView', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matViewInv', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matProj', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matProjInv', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matViewProj', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matViewProjInv', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_cameraPos', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_exposure', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_mainLitDir', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_mainLitColor', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_ambientSky', type: GFXType.FLOAT4, count: 1 },
+//             { name: 'cc_ambientGround', type: GFXType.FLOAT4, count: 1 },
+//         ],
+//     };
+
+//     public view: Float32Array = new Float32Array(UBOGlobal.COUNT);
+// }
+
+// export class UBOShadow {
+//     public static MAT_LIGHT_PLANE_PROJ_OFFSET: number = 0;
+//     public static SHADOW_COLOR_OFFSET: number = UBOShadow.MAT_LIGHT_PLANE_PROJ_OFFSET + 16;
+//     public static COUNT: number = UBOShadow.SHADOW_COLOR_OFFSET + 4;
+//     public static SIZE: number = UBOShadow.COUNT * 4;
+
+//     public static BLOCK: GFXUniformBlock = {
+//         binding: UniformBinding.UBO_SHADOW, name: 'CCShadow', members: [
+//             { name: 'cc_matLightPlaneProj', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_shadowColor', type: GFXType.FLOAT4, count: 1 },
+//         ],
+//     };
+
+//     public view: Float32Array = new Float32Array(UBOShadow.COUNT);
+// }
+
+// export const localBindingsDesc: Map<string, IInternalBindingDesc> = new Map<string, IInternalBindingDesc>();
+
+// export class UBOLocal {
+//     public static MAT_WORLD_OFFSET: number = 0;
+//     public static MAT_WORLD_IT_OFFSET: number = UBOLocal.MAT_WORLD_OFFSET + 16;
+//     public static COUNT: number = UBOLocal.MAT_WORLD_IT_OFFSET + 16;
+//     public static SIZE: number = UBOLocal.COUNT * 4;
+
+//     public static BLOCK: GFXUniformBlock = {
+//         binding: UniformBinding.UBO_LOCAL, name: 'CCLocal', members: [
+//             { name: 'cc_matWorld', type: GFXType.MAT4, count: 1 },
+//             { name: 'cc_matWorldIT', type: GFXType.MAT4, count: 1 },
+//         ],
+//     };
+
+//     public view: Float32Array = new Float32Array(UBOLocal.COUNT);
+// }
+// localBindingsDesc.set(UBOLocal.BLOCK.name, {
+//     type: GFXBindingType.UNIFORM_BUFFER,
+//     blockInfo: UBOLocal.BLOCK,
+// });
+
+// export class UBOForwardLight {
+//     public static MAX_SPHERE_LIGHTS = 2;
+//     public static MAX_SPOT_LIGHTS = 2;
+
+//     public static SPHERE_LIGHT_POS_OFFSET: number = 0;
+//     public static SPHERE_LIGHT_SIZE_RANGE_OFFSET: number = UBOForwardLight.SPHERE_LIGHT_POS_OFFSET + UBOForwardLight.MAX_SPHERE_LIGHTS * 4;
+//     public static SPHERE_LIGHT_COLOR_OFFSET: number = UBOForwardLight.SPHERE_LIGHT_SIZE_RANGE_OFFSET + UBOForwardLight.MAX_SPHERE_LIGHTS * 4;
+//     public static SPOT_LIGHT_POS_OFFSET: number = UBOForwardLight.SPHERE_LIGHT_COLOR_OFFSET + UBOForwardLight.MAX_SPOT_LIGHTS * 4;
+//     public static SPOT_LIGHT_SIZE_RANGE_ANGLE_OFFSET: number = UBOForwardLight.SPOT_LIGHT_POS_OFFSET + UBOForwardLight.MAX_SPOT_LIGHTS * 4;
+//     public static SPOT_LIGHT_DIR_OFFSET: number = UBOForwardLight.SPOT_LIGHT_SIZE_RANGE_ANGLE_OFFSET + UBOForwardLight.MAX_SPOT_LIGHTS * 4;
+//     public static SPOT_LIGHT_COLOR_OFFSET: number = UBOForwardLight.SPOT_LIGHT_DIR_OFFSET + UBOForwardLight.MAX_SPOT_LIGHTS * 4;
+//     public static COUNT: number = UBOForwardLight.SPOT_LIGHT_COLOR_OFFSET + UBOForwardLight.MAX_SPOT_LIGHTS * 4;
+//     public static SIZE: number = UBOForwardLight.COUNT * 4;
+
+//     public static BLOCK: GFXUniformBlock = {
+//         binding: UniformBinding.UBO_FORWARD_LIGHTS, name: 'CCForwardLight', members: [
+//             { name: 'cc_sphereLitPos', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPHERE_LIGHTS },
+//             { name: 'cc_sphereLitSizeRange', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPHERE_LIGHTS },
+//             { name: 'cc_sphereLitColor', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPHERE_LIGHTS },
+//             { name: 'cc_spotLitPos', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPOT_LIGHTS },
+//             { name: 'cc_spotLitSizeRangeAngle', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPOT_LIGHTS },
+//             { name: 'cc_spotLitDir', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPOT_LIGHTS },
+//             { name: 'cc_spotLitColor', type: GFXType.FLOAT4, count: UBOForwardLight.MAX_SPOT_LIGHTS },
+//         ],
+//     };
+
+//     public view: Float32Array = new Float32Array(UBOForwardLight.COUNT);
+// }
+// localBindingsDesc.set(UBOForwardLight.BLOCK.name, {
+//     type: GFXBindingType.UNIFORM_BUFFER,
+//     blockInfo: UBOForwardLight.BLOCK,
+// });
+
+// export class UBOSkinning {
+//     public static MAT_JOINT_OFFSET: number = 0;
+//     public static JOINTS_TEXTURE_SIZE_OFFSET: number = UBOSkinning.MAT_JOINT_OFFSET + 128 * 16;
+//     public static COUNT: number = UBOSkinning.JOINTS_TEXTURE_SIZE_OFFSET + 4;
+//     public static SIZE: number = UBOSkinning.COUNT * 4;
+
+//     public static BLOCK: GFXUniformBlock = {
+//         binding: UniformBinding.UBO_SKINNING, name: 'CCSkinning', members: [
+//             { name: 'cc_matJoint', type: GFXType.MAT4, count: 128 },
+//             { name: 'cc_jointsTextureSize', type: GFXType.FLOAT4, count: 1 },
+//         ],
+//     };
+// }
+// localBindingsDesc.set(UBOSkinning.BLOCK.name, {
+//     type: GFXBindingType.UNIFORM_BUFFER,
+//     blockInfo: UBOSkinning.BLOCK,
+// });
+
+// export const UNIFORM_JOINTS_TEXTURE: GFXUniformSampler = {
+//     binding: UniformBinding.SAMPLER_JOINTS, name: 'cc_jointsTexture', type: GFXType.SAMPLER2D, count: 1,
+// };
+// localBindingsDesc.set(UNIFORM_JOINTS_TEXTURE.name, {
+//     type: GFXBindingType.SAMPLER,
+//     samplerInfo: UNIFORM_JOINTS_TEXTURE,
+// });
+
+// export interface IInternalBindingDesc {
+//     type: GFXBindingType;
+//     blockInfo?: GFXUniformBlock;
+//     samplerInfo?: GFXUniformSampler;
+// }
+
+// export interface IInternalBindingInst extends IInternalBindingDesc {
+//     buffer?: GFXBuffer;
+//     sampler?: GFXSampler;
+//     textureView?: GFXTextureView;
+// }