Code Monkey home page Code Monkey logo

Comments (4)

Hopson97 avatar Hopson97 commented on May 21, 2024

This would be caused by the fragment shaders having a hard if

if (colour.a == 0) 
{
    discard;
}

A fix could be to instead have something like if (colour.a < 0.2)

Or maybe some kind of alpha blending instead

from open-builder.

BadComoc avatar BadComoc commented on May 21, 2024

This would be caused by the fragment shaders having a hard if

if (colour.a == 0) 
{
    discard;
}

A fix could be to instead have something like if (colour.a < 0.2)

Or maybe some kind of alpha blending instead

Changing it to 0.2 doesn't really add support for translucent pixels. it only changes the threshold on how many invisible pixels should appear. It's weird 'cause Fluid Blocks can be transparent but not Floral blocks.

from open-builder.

GrossoDev avatar GrossoDev commented on May 21, 2024

To add alpha blending to Floral voxels you only have to change 2 files:

The transparent_fragment shader

...
void main() {
-   outColour = passBasicLight * texture(textureArray, passTexCoord);

-   if (outColour.a == 0) {
-       discard;
-   }

+   // The alpha channel is half of its actual value, for some reason.
+   outColour = passBasicLight * texture(textureArray, passTexCoord) * vec4(1.0, 1.0, 1.0, 2.0);
}

chunk_renderer.cpp

...
  // Flora voxels
  m_floraShader.program.bind();
  gl::loadUniform(m_floraShader.projectionViewLocation, projectionViewMatrix);
  gl::loadUniform(m_floraShader.timeLocation, time);
  glDisable(GL_CULL_FACE);
+ glEnable(GL_BLEND); 
  ::renderChunks(floraDrawables, frustum, m_floraShader.chunkPositionLocation, result);
+ glDisable(GL_BLEND); 
  glEnable(GL_CULL_FACE);

However, alpha blending (at least this way) requires that you have already rendered everything behind the pixel you're rendering. This was the problem with the leaves not rendering underwater (#143), and in fact it's still a bug:

In this image, you can see the other voxels of water behind:
NowYouSeeIt

In this image, from the other side, you can't:
NowYouDont

In the first image, the farthest water was drawn first and the closest was drawn after it.
In the second image, where we see it from the other side, the farthest water is now the closest (and vice-versa), but the rendering order hasn't changed, so the closest water will now render first without the farthest water behind it

As it is right now, the transparent flora might end up looking something like this (for clarity, I've changed the tall-grass texture):
Example

If this is enough it can be implemented right now, but the only way I can think of to solve this is to sort the faces from farthest to closest before rendering.

(Oh, and the thing about the alpha channel being 1/2 of the original value might have been the problem here)

from open-builder.

obiwac avatar obiwac commented on May 21, 2024

The original texture really shouldn't have half-transparent pixels in the first place, as that will always cause problems.
Also, I don't understand why the leaves don't show up behind, as the pixels that make up the texture are either fully opaque or fully transparent. I assume it's because all the half-transparent objects are being rendered at the same time as the leaves, but that shouldn't be the case.
Last thing, if you really wanted to add alpha sorting, it would probably be pretty easy, as this is a voxel game and there are presumably no intersecting polygons.

from open-builder.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.