Jump to content

Shader material test : still a long way to photo realistic billiard balls


Recommended Posts

Hi all.

Continuing to test babylonJS feature/environment/...
Today get a work in progress showing shadermaterial in action.
I share my work in progress (possibly helpful to other as well),

and look around for hint from the "gurus" reading this forum.

So far, I play with:
- shadermaterial (mainly fragment shader to get pixel color)
    vertex shader get position of vertex, transfered as varying to fragment shader
    then the fragment shader use (x,y,z) position to select color according to geometric equation.
- test how to embed shader code inside javascript for playground packaging
    (thanks again to Wingnut and Vousk-prod. for the help)
- uniform parameter control from javascript (render loop.or at shaderMaterial creation time)
    I get nice effect like color spot with size varying with time on the ball objects.
- action event handling:
    capture keyboard event, and mesh pick action to change dynamically shader parameters.
- basic testing of dynamic texture and drawtext (background plane with text scrolling)

Scene is available here:
On playground:
On my web server:
    All files available in directory

I try to put the bare minimum of comment in the code to help you guy understood what if have done.
Let me know your question if you are interested in more explanations.

I can elaborate more comments.

So far, I am quite happy with first result to get dot colorization on the mesh to get very sharp border edge.
Thanks to GPU processing the xyz position at fragment shader level to define the color to use.
As an example of what I didn't like, I put a gray ball with texture based red dot.
My texture based ball drawing gets pixelated as soon as the camera get closer to the mesh surface.
(my initial reason to investigate the shader material at the beginning)

Next steps: Trig a few question on strategy/optimization:
- multiple shader material instances ?
    Each of the 4 balls have its own shader material instantiated from same source file (.fx)
    I only change the uniform parameter to get different color or painting pattern for dot sizes.
    Sounds not optimum to duplicate shader to do almost exactly the same thing.
    (so far only 4 balls and simple scene, so no perfo issue, but later ...)
    Could it be a way to have a ball ID, or other parameter (a mesh specific uniform or ???)
    to tune the behavior to get similar effect without shader duplication ?
    (can try to have a per vertex attribute, that will carry needed info like a mesh ID,
    but sound like it is a heavy cost to have that for every vertex, or not ?)

-   shader material seems exclusive to standard material.
    Ok, I can handle my specific behavior in the shader code, but
    in an ideal world, I would like to hook to existing standard material
    to enjoy as well all the nice feature available in standardMaterial
    (bump, specular, texture map, ...)
    Is there in idea/pointer/doc/example that I can investigate to find options ?
    Does any hooks exist in standard material to add my shader code or ?
    I prefer not to re-invent the wheel and brute force recode a full standard

    material feature in my own shader.

-   text drawing on ball
    I would like to have text drawn on mesh
    (like ball number, for billiard application a nine or eigth ball needs this)
    Ground plane text display in the scene gives my confidence is should be achievable
    more or less easily, but this rely on standard material
    (so again I would like to connect shader and standard material ?)

-   Shader material to dispatch to multiple standard material.
    Another of my pending idea to follow.
    I imagine it may be possible to have a shader material (skeleton like the one I put in place)
    that select among several standard material available
    (instead of providing a color as output of fragment shader, may an ID of of standard material)
    OK, just thinking, not sure it is realistic, but looking for idea to continue.

My goal at the moment is to get much more realistic billiard ball rendering. Especially with light reflection,
have dirt/scratch/chalk or any imperfections on the surface.

Thanks in advance if anyone can provide ideas on how to go on ....
And thanks again to all past contributors to BJS and forums (already find lots of inputs to my questions)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...