My first little assignment in cinder

Gallery
1

Hey guys,
This is my first little assignment done using cinder. I am very greatful to this community for all the support for learning cinder. Particularly @paul.houx thanks a lot for helping clear my doubts :heart:.
Please follow the link below

https://www.instagram.com/p/Bt8W_HIH-ni/?utm_source=ig_share_sheet&igshid=1kiel8r8trzjp

4 Likes
2

Very nice results for your first steps in Cinder! It reminds me of Koi carp swimming in a pond. Well done! And thanks for your kind words. I haven’t been very active on the forums lately, but I’m still using Cinder on a daily basis. I should probably start doing hobby projects again :slight_smile:

-Paul

1 Like
3

Thanks for encouraging . Looking forward to exploring more of cinder😊

1 Like
4

Hey paul

I was trying to make a butterly animation just like you have made(“realtime butterlies” on Youtube). you have animated the plane and put a texturemap of butterly on it with alpha I suppose. I have been able to achieve transparency by “discarding” fragments in fragment shader based on alpha values. but did not succeed in achieving transparency by using gl::enableAlphaBlenging(). attaching the image of the render. I am finding it hard to understand as to why blending is not working. the butterfly in this case is a single plane bent from centre.

thanks
Nitin

07%20PM
Screen Shot 2019-03-05 at 8.50.07 PM.jpg1020×1002 189 KB

5

Hi,

looks like you have depth writing enabled. To render transparent pixels, you need to disable writing to the depth buffer. If you also have opaque geometry (e.g. walls, flowers, trees) that you want your butterflies to fly behind, you can enable depth testing only:

void YourApp::draw()
{
    // Render opaque geometry first.
    if( mEnableOpaqueStuffs ) {
        gl::ScopedDepth scpDepth(true);
        mTreeBatch->draw();
    }

    // Render transparent geometry next.
    if( mEnableTransparentStuffs ) {
        gl::ScopedDepthWrite scpDepthWrite( false );
        gl::ScopedDepthTest scpDepthTest( true );
        mButterflyBatch->draw();
    }
}

Note that for it to work well, you’d have to sort the draw order of the butterfly wings, so that you draw the front wing last. It may be easier to draw all butterflies twice using proper face culling:

    if( mEnableTransparentStuffs ) {
        gl::ScopedDepthWrite scpDepthWrite( false );
        gl::ScopedDepthTest scpDepthTest( true );

        gl::ScopedFaceCulling scpCull( true, GL_FRONT ); // culls all front facing polygons
        mButterflyBatch->draw();
        gl::cullFace( GL_BACK ); // culls all back facing polygons
        mButterflyBatch->draw();
    }

This requires that your wing polygons have been defined with the proper triangle winding. If there are holes in your wings, check or change the order in which you define the vertices.

-Paul

6

Thanks a lot again. This clarifies things clearly. Very clever to draw twice using face culling. Never thought that way.

7

I should mention that you may still get the wrong results when drawing more than one butterfly. Only if you also sort your butterflies from back to front will you get the proper blending (calculate dot( mButterflyPos - mCameraPos, mCameraViewDirection ), larger values go first).

Note that alpha-testing (completely discarding pixels in the fragment shader that aren’t opaque), will not have this shortcoming, since no blending will take place at all. This is why foliage in most games still uses alpha-testing. On the other hand, alpha testing still requires the shader to run for each pixel and its depth is only known afterwards. This will probably not perform well on mobile phone GPU’s, which are tile-based.

-Paul

8

I could understand the sorting requirements for correct transparency from online reference. Discarding fragments will do for the current assignment I am working on. I just took this opportunity to learn about “blending” as well😀. Thank a lot