[EFFECT]- webglSphere+Glsl version

  • Thanks Gigatron! I tried it and it doesn't seem to be working with transparent sprites. Actually it kind of doesn't seem to work at all, a sphere is created but it doesn't seem to be mapping the sprite in 3D around it like it should be.

    [quote:22czvhr5]//////////////////////////////////

    //GlslSphere effect

    //webgl sphere mapping for chrisbrobs .. Gigatron

    //

    precision mediump float;

    varying mediump vec2 vTex;

    uniform lowp sampler2D samplerFront;

    uniform mediump float pixelWidth;

    uniform mediump float pixelHeight;

    vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);

    uniform float seconds;

    uniform float RotSpeed,xx,yy,zz;

    #define PI 3.14159265358979

    #define rotate(point,axiss,angle) vec3 axis = normalize(axiss);float s = sin(angle);float c = cos(angle);float oc = 1.0 - c; mat4 rot = mat4(oc * axis.x * axis.x + c,oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c,oc * axis.y * axis.z - axis.x * s, 0.0,oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c,0.0, 0.0,0.0,0.0,1.0); vec3 rotpoint = (vec4(point,1.)*rot).xyz

    vec2 uv (vec3 p) {

    float x = p.x;

    float y = p.y;

    float z = p.z;

    float u = atan(x, z) / (2. * PI) + .5;

    float v = asin(y) / (PI) + .5;

    return vec2(u,v);

    }

    float map(vec3 r) {

    rotate(r,vec3(0,1,0),seconds*RotSpeed);

    return length(r)-(3.);

    }

    vec3 march(vec3 ro, vec3 rd ) {

    vec3 r=ro;

    vec3 bg=vec3(0.,0.,0.);

    for (int i = 0; i < 32; i++) {

    float df = map(r);

    vec3 nr = normalize(r);

    if (df<.01) {

    rotate(nr,vec3(yy,xx,zz),seconds*RotSpeed);

    vec3 val = texture2D(samplerFront,uv(normalize(rotpoint))).rgb;

    return vec3(val);

    }

    r+=rd*df;

    }

    // return vec3(vec3(0, rd)*-2.0);

    // to do bg color mix !

    return vec3(bg);

    }

    void main(void)

    {

    vec2 uv = vTex-vec2(0.0,-0.25);

    vec3 bgcol=vec3(0.,0.0,0.0);

    uv.x =1.-uv.x;

    uv.y *=0.65;

    vec3 mc = march(vec3(0,0,-20),vec3(uv-.5,1.0) );

    if (mc.g>0.05) gl_FragColor = vec4( mc, 1.0);

    else

    gl_FragColor =vec4(bgcol,0.0);

    //fragColor = mix(texcolor, color, color.a*alpha);

    }

    This one works well with transparent sprites but if I change speed to 0 it turns invisible (and yet still somehow rotates). If there only was a way to make this one fully controllable in speed + x/y/z rotation

  • purplemonkey

    This code above is different ... the fx i ve sent is the best way to do the sphere map..

    Dear purplemonkey.. can you explain basically the problem... ?

    You want transparent sprite ?? send me picture please .. In most case i use google translator

    and not really understand what exactly people wants... google not translate well ...

    Is this new demo working for you ??

    http://gigatron3k.free.fr/html5/C2/FX/sphmap

    The mapped image of mars i used :

  • Gigatron

    I hope this image explains my issue.

    Thank you again for all your hard work!

  • Just made some modification..

    try to download again at the same location i ve sent yesterday..

  • Just made some modification..

    try to download again at the same location i ve sent yesterday..

    It's working! Thanks again! <3

  • Well I guess I spoke too soon. The only issue now is that black colors turn transparent

  • purplemonkey

    *** Edit ... now i put the .. transparent flag 0 or 1

    Try it if you have problem with black or transparent color..

    So download the fx at the same place ...

    Nice ... hope all issue were corrected now.. working here

  • Hello again Gigatron I've tried the updated version. If I set "transparent" to 0 a semi-transparent sprite works as it should however black colours also seem to be transparent for some reason. If I set "transparent" to 1 the actual transparent area of the sprite is the colour black.

  • Hello again Gigatron I've tried the updated version. If I set "transparent" to 0 a semi-transparent sprite works as it should however black colours also seem to be transparent for some reason. If I set "transparent" to 1 the actual transparent area of the sprite is the colour black.

    .. can you send your sprite for testing please ?

  • Just to quickly update anyone following this thread. Gigatron has been super patient with me and finally fixed the issue I was having. Thank you again for the help and I really appreciate the work you're doing Gigatron!

  • Gigatron purplemonkey is this transparent update public yet?

  • Gigatron purplemonkey is this transparent update public yet?

    Hi ya! It's up to Gigatron if he wants to share it publicly or not so I'll just wait for him to answer this question. We did get it working as intended however I noticed that it glitches out upon exporting a project if you're using it on an object with animations. So the issue seems to be because of sprite-sheeting.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Ok let's share this fx to public; http://gigatron3k.free.fr/html5/C2/FX/shmap.rar

    This fx must be applied to 1 sprite...

  • An update for anyone interested. I finally did get this effect to work with animations on export.

    All you have to do is:

    * Open sprite editor of the object you are using effect on

    * Set export image format to JPG and apply to all animations (this will disable sprite-sheeting)

    However if you are using semi-transparency in your animations you'll have to find your exported project folder, replace JPG images with PNG and edit "data.js" to look for ".png" instead of ".jpg" on said images.

    Best of luck!

  • Gigatron

    How to fix this? Padding

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)