2d game view camera zoom, rotation & offset using 'Filter' / 'Shader' processing?

Question

I wish to add the ability to zoom-in, zoom-out, rotate and move the view in a top-down view over a collection of points and lines in a large 2d map. I split the map into a grid so I only need to render the points that are 'near' the camera. My question is, how do I render a point A(Xp,Yp) assuming the following details:

Offset of the camera pov from the origin of the map is:

Xc, Yc

Meaning the camera center is positioned on top of that point. If there's a point in Xc, Yc it is positioned in the center of the screen.

The rotation angle is:

alpha

The scale is:

S

Read my answer first. I am thinking there is more optimized solution, thanks.

My question is how to include the following improvement:

I read in the AS3 Bible book that: In regards to ShaderInput, You can use these methods to coerce Pixel Bender to crunch huge sets of data masquerading as images, without doing too much work on the ActionScript side to make them look like images.

Meaning if I am performing the same linear function on a lot of items, I can do it all at once if I use Shaders correctly and save processing time.

Does anyone know how that is accomplished?

Here is a sample of what I mean:

http://wonderfl.net/c/eFp0/

Answer 1

The best answer I found so far as seen on the: How to use Pixel Bender (pbj) in ActionScript3 on large Vectors to make fast calculations? question is:

Use pixel bender to do the movement, rotation and scaling:

<languageVersion : 1.0;>

kernel linear
<   namespace : "il.co.elbowroom";
    vendor : "ArthurWulfWhite";
    version : 1;
    description : "Y = ax + b";
>
{
    parameter float4 xyrs <defaultValue: float4(0.0, 0.0, 0.0, 1.0);>;
    parameter float2 halfStage <defaultValue: float2(0.0, 0.0);>;
        // offsetX, offSetY, rotate, scale

    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        float2 vals = sampleNearest(src, outCoord()).xy;
        float2 ovals = sampleNearest(src, outCoord()).zw;
        vals -= xyrs.xy;
        float len = length(vals) * xyrs.w;
        float ang = atan(vals.y / vals.x) + xyrs.z;
        if(sign(vals.x) == -1.0) ang += 3.14159265358979 / 2.0;
        vals = float2(len * cos(ang), len * sin(ang)) + halfStage;
        dst = float4(vals.x, vals.y, 0.0, 0.0);
    }
}

How to use pixel bender is covered in the question I mentioned in the beginning.

Explaining the math:

Assuming the screen is Width wide and Height tall and the position of the camera is Xc and Yc, we'll render a point A(Xp,Yp) like this:

The screen center will be:

center = new Point(width/2, height/2);

Deduct the camera position:

offsetPos = A.subtract(camera); // offsetPos = (Xp - Xc, Yp - Yc);

To include scale we'll multiply:

offsetPos = A.subtract(camera); // offsetPos = (S * (Xp - Xc), S * (Yp - Yc));

Now rotate :

distance = offsetPoint.length;
angle = Math.atan2(offsetPos.y, offsetPos.x);

renderPos = Point.(distance, angle + alpha).add(Center);