phoboslab / Ejecta

A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
2.81k stars 322 forks source link

If move transform operation to Shader, will get better performance ? #635

Closed finscn closed 8 years ago

finscn commented 8 years ago

I found in pixi.js , vertex shader used

    'precision lowp float;',
    'attribute vec2 aVertexPosition;',
    'attribute vec2 aTextureCoord;',
    'attribute vec4 aColor;',

    'uniform mat3 projectionMatrix;',

    'varying vec2 vTextureCoord;',
    'varying vec4 vColor;',

    'void main(void){',
    '   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
    '   vTextureCoord = aTextureCoord;',
    '   vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
    '}'

It runs transform operation in shader , But Ejecta uses EJVector2ApplyTransform for transform operation.

If move transform operation to Shader, will get better performance ? (Shader uses GPU, oc uses CPU)

phoboslab commented 8 years ago

This was a conscious decision. If you apply the transformations in the shader, you have to flush the draw buffers before each transformation. E.g.:

var draw = function(img) {
    ctx.drawImage(img, 100, 100);

    ctx.save()
    ctx.rotate(45 * Math.PI / 180);
    ctx.drawImage(img, 100, 100);
    ctx.restore();
}

Currently this needs just one draw call. Doing the transform in the shader would require us to flush the draw buffer when ctx.rotate() is called resulting in two draw calls. So, in theory doing the transformation in the shader should be faster (though barely measurable), but overall your app will probably run slower.

If you have a performance bottleneck, use the CPU profiler in Instruments.