Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Help with the use of "circle" kernels (by StarCrunch)
Started by maximo97 Nov 17 2018 04:21 AM

6 replies to this topic
kernels
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

maximo97

[GLOBAL: userInfoPane.html]
maximo97
  • Contributor

  • 223 posts
  • Corona SDK

Hi guys

 

I was playing with some kernels I found in an example of @StarCrunch.

 

So I'm trying to integrate it with an example code:

local function basic()
    --effetto che permette di mostrare gli oggetti non comprati completamente neri
    local kernel = {}
    kernel.language = "glsl"
    kernel.category = "filter"
    kernel.group    = "circle"
    kernel.name     = "basic"

    kernel.isTimeDependent = true

	kernel.fragment = [[
			#define SPHERE_NO_DISCARD
			P_COLOR vec4 FragmentKernel (P_UV vec2 uv)
			{
				uv = GetUV_PhiDelta(2. * uv - 1., -CoronaTotalTime / 7.);

				if (uv.s < 0.) return vec4(0.);

				return CoronaColorScale(texture2D(CoronaSampler0, uv));
			}
		]]
    graphics.defineEffect(kernel)
end
basic()



-- --
local CX, CY = display.contentCenterX, display.contentCenterY

--
local image = display.newCircle( CX, CY, 125)
image.x, image.y = CX, CY
image.fill = { type = "image", filename = "image.jpg" }
image.fill.effect = "filter.circle.basic"

in this way my image becomes spherical but does not move.

I have two questions:

1. How to solve this

2. Is it possible to make the rotation depend on the user's touch?

In the example picture I would like to see better what I mean:

Attached File  aaaa.png   9.31KB   0 downloads

in point 1, the user moves his finger to the right
in step 2, drag the finger downwards
 
I would like to work for every direction naturally
 
I know the question is a bit specific but I think it could serve others

 

 



[TOPIC: post.html]
#2

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 768 posts
  • Corona SDK

Hi. That "GetUV_PhiDelta" is actually another function of mine that you need. I have a registration step early on where you add shader building blocks and then the loader (which you'll see used in the examples) does its best to stitch these together. This is the intermediate form.

 

This certainly isn't perfect (I don't trust my hand-crafted parser much, for one thing; I'm aware of a couple more dedicated alternatives but haven't mustered the will to try to swap them out) but does give some power.

 

I'm actually hoping in the near future to start on a connect-the-nodes sort of shader editor, once I clean up some of the necessary bits from another project for reuse.

 

I ran the shader test code and printed the kernel it gave me:

#define FRAGMENT_SHADER
#define SPHERE_NO_DISCARD

P_UV float PI = 4. * atan(1.);
P_UV float TWO_PI = 8. * atan(1.);
P_UV float PI_OVER_TWO = 2. * atan(1.);

P_UV float ONE_OVER_PI = 1. / atan(1.);
P_UV float ONE_OVER_TWO_PI = .5 / atan(1.);
 
P_POSITION vec2 GetUV_PhiDelta (P_POSITION vec2 diff, P_POSITION float dphi)
{
  P_POSITION float dist_sq = dot(diff, diff);

#ifndef SPHERE_NO_DISCARD
  if (dist_sq > 1.) return vec2(-1.);
#endif

  P_POSITION float z = sqrt(1. - dist_sq);
  P_POSITION float phi = atan(z, diff.x);
  P_POSITION float angle = .5 + phi / TWO_PI;

#ifdef SPHERE_PINGPONG_ANGLE
  angle = mod(angle + dphi, 2.);
  angle = mix(angle, 2. - angle, step(1., angle));
#else
  angle = fract(angle + dphi);
#endif

  return vec2(angle, .5 + asin(diff.y) / PI);
}

P_COLOR vec4 FragmentKernel (P_UV vec2 uv)
{
  uv = GetUV_PhiDelta(2. * uv - 1., -CoronaTotalTime / 7.);

  if (uv.s < 0.) return vec4(0.);

  return CoronaColorScale(texture2D(CoronaSampler0, uv));
} 	

Some of that is unused, since this is all code-generated and doesn't have any cleanup-type logic.

 

The "phi" comes from spherical coordinates. The shader has a box whose coordinates go from 0 to 1, so the rest of the phi math follows from that.

 

For the left-to-right rotation case, you basically want to replace the CoronaTotalTime-based delta with your own input. Vertically, you would need to make this account for theta. In the samples for this plugin I have a control that might be a starting point for what you want. (Stuff along these lines was why I even bothered submitting it for a 2D framework!  :))

 

You'll notice the obvious texture wrapping (common in samples like this). There are some difficulties in really getting nice-looking borders, basically since a flat rect can't be distorted into a sphere.



[TOPIC: post.html]
#3

maximo97

[GLOBAL: userInfoPane.html]
maximo97
  • Contributor

  • 223 posts
  • Corona SDK

Hello.

First of all, thank you very much for your reply

 

I checked the different information you attached to me. All very interesting.

However, I took a while to understand everything.

I would have some new questions about it if you can answer.

 

Is it possible to pass a sphere instead of a rectangle imge, or maybe better two images of a sphere (in 1png i think) and to rotate it? or what is the best way to structure my images so that using the kernel looks like a real sphere...

Looking at the guides you have attached I think it would be good to use a sort of horizontal ellipsis, but surely you have more experience.

 

Then regarding the rotation based on the touch I saw your plugin and it looks great. Is there any particular example on which I should dwell?



[TOPIC: post.html]
#4

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 768 posts
  • Corona SDK

Hi.

 

The relevant example would be "objects", in particular the trackball widget. (Just to make sure we mean the same thing, this is in the sample linked from the plugin docs.) You can drag around on that and it will affect itself a bit along with the animating object.

 

I'm not really sure there is a "best" way to do this, especially if you want arbitrary rotation. This is the same problem that produced so many different ways of map-making, after all.  :) In an actual 3-D environment you would usually use a mesh and stitch the surface together from several subregions of a texture. This sidesteps the issue since it's only indirectly dealing with the sphere's geometry.

 

What sort of objects do you have in mind?



[TOPIC: post.html]
#5

maximo97

[GLOBAL: userInfoPane.html]
maximo97
  • Contributor

  • 223 posts
  • Corona SDK

Hi!

Well actually my idea was pretty simple.

I have a set of balls that my artist has done in 3D, but for now I have always used them in 2D.

So my idea was to make them a little more 3D with this kernel.

 

I show you an example image:Attached File  bowling.png   4.84KB   0 downloads

 

I know that crown is strictly 2D but liked the idea of a shelf with 3D balls that the user could turn with the touch.

 

Do you think it's a feasible thing?

 

Edit: I saw your last attachment, really spectacular!!  :o Congratulations


Edited by maximo97, 19 November 2018 - 04:01 AM.


[TOPIC: post.html]
#6

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 768 posts
  • Corona SDK

Ah, cool. Is it a bowling game, then, or is that just one example among many?

 

I would say it's feasible, yes, but will be MUCH easier if you only allow case #1, for the aforementioned reason that the image pinches at the poles.

 

Going back to your comment about "two images of a sphere", there is a concept called cube mapping aimed at addressing these woes. It's a 3-D thing, so as you might expect there's no support for it in Corona. However, the OpenGL feature merely adds convenience and performance; the underlying details would go something like this. (If you saw "IQ" in any of my shader code, that comes from this fellow, quite an amazing demo developer and one of the authors of Shadertoy.)

 

Usually cubemaps are used as if you were inside the sphere looking out, but as Inigo's page suggests, that's not a hard rule. Instead you'd get your surface parameters from the sphere (I want to say phi and theta = .5 + asin(diff.y) / PI in my code correspond to his s and t, but would have to dig in to be sure) and then turn them back into texture coordinates. Since you won't have an OpenGL cube map, you'd need to decide how your texture will be laid out, say as a 2 x 3 "sprite sheet" with border padding around each "frame", and then figure out how to land in the appropriate one. I imagine this is a challenge to get working--definitely plugin potential, here--but would be great once it did!  :D 

 

Since we have Inigo's pages fresh in mind...

 

If you have a very simple geometric shape like the ball above, you could probably make a kernel that does a very shallow raymarch, basically against a sphere minus three capsules or cylinders, i.e. the ball itself and the three finger holes. Example operations for this approach are here. Also see some of his absolutely insane examples.

 

Of course, if the ball doesn't have basic colors or procedural patterns, the problems mentioned earlier would still be present here.


  • maximo97 likes this

[TOPIC: post.html]
#7

maximo97

[GLOBAL: userInfoPane.html]
maximo97
  • Contributor

  • 223 posts
  • Corona SDK

Yes, a sort of  bowling seen from above was the initial idea. :D

 

However, I saw the various resources you have attached to me. And yes Inigo Quilez is really insane.

However, I'm good enough to understand that I'm not good enough for this mission.

 

I am still completing my university studies and I can not master how I would like some things.

 

I'm sorry but I'll put this on pause and try later on as a challenge maybe.

Of course with a 3D program this would be very easy. But after all, someone will have worked on this for those programs. So I like understanding how it works

 

P.S. As always, I apologize for my bad English..


  • StarCrunch likes this


[topic_controls]
[/topic_controls]