3D graphics questions that do not deserve their own thread (OpenGL / Dx10)

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > 3D graphics questions that do not deserve their own thread (OpenGL / Dx10)

MrMoo: Sep 14, 2000

How straightforward is it to make a fragment shader to convert idk a basic quad to look like this: (ignoring the logos and text above). Targeting WebGL2, i.e. GLSL 3.00 ES.

It would be nicer to replace a static background with a coloured smoke type thing, like this shadertoy, :

https://www.shadertoy.com/view/ldBSDd

Is it better to find a freelancer to conjure up something? idk, I'm just researching and prototyping some scoreboard screens for MLB / NFL / NBA / NHL.

MrMoo fucked around with this message at 20:49 on Jan 10, 2020

# ¿ Jan 10, 2020 20:47

Adbot: ADBOT LOVES YOU

# ¿ May 12, 2024 06:49

MrMoo: Sep 14, 2000

So I�m actually working with the NBA now and have Maya files of a basketball and an animation sequence that I need to pump into THREE.js, and the least awful approach appears to be GLTF/.glb. However Maya of course does not export directly to that format still and I�m not getting great feedback exporting to FBX : �converting to that wont give us a high enough quality image.�

I do have an FBX of a single 🏀 and Facebook�s FBX2GLTF tool manages to lose all the textures so I end up with a black sphere, not so useful.

Can anyone explain the quality image comment? What�s the best way forward as I see many other tools as options to try for conversion via Babylonjs or Verge3d.

I have a target environment setup awaiting the .glb file, with a placeholder animation instead.

# ¿ Feb 15, 2020 17:57

MrMoo: Sep 14, 2000

The artist who originally made the graphics, I'm not sure whether they were new to Maya just for this project though.

So kind of safer to try to find someone else who has access to Maya to run an export for me.

Here is a screenshot of the graphics:

And it replaces the diorama here:

MrMoo fucked around with this message at 02:35 on Feb 16, 2020

# ¿ Feb 15, 2020 20:42

MrMoo: Sep 14, 2000

So, I have Maya 2020 up and a file open,

Fixing the textures and it appears to roughly render not horribly,

But cannot export the animation, I just end up with a boring empty scene,

# ¿ Feb 18, 2020 00:52

MrMoo: Sep 14, 2000

Apparently I need to convert nParticle�s to geometry�s and then stuff can get exported. It looks like Maya 2020 is buggy as hell though. I�ve used a random third party tool and it forgot to process UVs and looks a bit surreal.

MrMoo fucked around with this message at 00:52 on Feb 19, 2020

# ¿ Feb 18, 2020 07:02

MrMoo: Sep 14, 2000

Maya on a MacBook small screen randomly crashes the design screen, plug in a large monitor and it works fine. This is awesome software.

Looks like a major bug broke Babylon JS integration and fix won't ship till spring.

# ¿ Feb 19, 2020 20:28

MrMoo: Sep 14, 2000

I am having a bad time with alpha blending because I have no idea what I am doing,

So, I have MSDF fonts on a curve which look ok:

I have an outline shader because I don't really want to re-encode the fonts with an SDF channel, and I have managed to get anti-aliasing to some degree on both the inside and outside:

However adding a drop-shadow shader highlights the failures in processing the anti-aliasing applied at the outside of the outline.

Where there should be a lerp between the shadow and the outline there is a black halo, which could be taken as artistic effect, but would like to address.

So, one of the ugly shaders for creating the shadow:

code:

uniform sampler2D tDiffuse;
uniform vec3 shadow_color;
uniform float shadow_width;
uniform float shadow_direction;
varying vec2 vUv;

void main() {
  vec2 u_textureRes = vec2(float(textureSize(tDiffuse, 0).x), float(textureSize(tDiffuse, 0).y));

  vec2 testPoint = vec2(shadow_direction * shadow_width/u_textureRes.x, shadow_width/u_textureRes.y);
  testPoint = vUv + testPoint;
  float shadowAlpha = texture( tDiffuse,  testPoint ).a;

  vec4 shadow = vec4(shadow_color, shadowAlpha);
  vec4 texel = texture2D(tDiffuse, vUv);
  if(texel.a < 1.0) {
//            gl_FragColor = shadow;
    gl_FragColor = mix(shadow, texel, texel.a);
  } else {
    gl_FragColor = texel;
  }
}

If I use gl_FragColor = shadow; it highlights the leak coming from the inside anti-aliased border,

If I remove the anti-aliasing on the outline then I can get a correct aliased shadow, but the aliasing is pretty bad on the thin typeface at such a low resolution.

I made the outline shader a bit worse than when it started,

code:

uniform sampler2D tDiffuse;
uniform vec3 outline_color;
uniform float outline_width;
varying vec2 vUv;

#define PI 3.14159265359
#define SAMPLES 32

void main() {
  vec2 u_textureRes = vec2(float(textureSize(tDiffuse, 0).x), float(textureSize(tDiffuse, 0).y));
  
  float outlineAlpha = 0.0;
  float angle = 0.0;
  for( int i=0; i<SAMPLES; i++ ){
    angle += 1.0/(float(SAMPLES)/2.0) * PI;
    vec2 testPoint = vec2( (outline_width/u_textureRes.x)*cos(angle), (outline_width/u_textureRes.y)*sin(angle) );
    testPoint = vUv + testPoint;
    float sampledAlpha = texture( tDiffuse,  testPoint ).a;
    outlineAlpha = max( outlineAlpha, sampledAlpha );
  }
//        gl_FragColor = mix( vec4(0.0), vec4(outline_color, 1.0), outlineAlpha );
  
  vec4 texel = texture2D(tDiffuse, vUv);
//          gl_FragColor = mix(gl_FragColor, texel, texel.a);
  
  vec4 outline = vec4(outline_color, outlineAlpha);
  if(texel.a < 1.0) {
//            gl_FragColor = outline;
    gl_FragColor = mix(outline, texel, texel.a);
  } else {
    gl_FragColor = texel;
  }
}

MrMoo fucked around with this message at 18:47 on Aug 22, 2020

# ¿ Aug 22, 2020 18:35

MrMoo: Sep 14, 2000

This saturates the shadow, although it does cleanup the halo for the most part.

Changing the outline shader from lerp/mix to the over function fixes the remaining halo issues,

So now all remains is the colour itself.

MrMoo fucked around with this message at 19:54 on Aug 22, 2020

# ¿ Aug 22, 2020 19:21

Adbot: ADBOT LOVES YOU

# ¿ May 12, 2024 06:49

MrMoo: Sep 14, 2000

Ironically the halo works perfectly for Cincinnati,

# ¿ Aug 22, 2020 20:02

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > 3D graphics questions that do not deserve their own thread (OpenGL / Dx10)