CODEWITHSUNDEEP
three.jsglsl
D Park
D Park

Reputation: 514

Three.js renders unprocessed png image for texture

With three.js, I am trying to create the scene where a plane becomes transparent as the camera moves away from it.

And I textured the plane object with the round map tile which is edited from the square image below.

enter image description here

enter image description here

When I load the round image through ShaderMaterial the texture appears square like the original image.

The weird thing is it is rendered as intended when the image is loaded onto regular mesh material.

Could you tell me why three.js behaves this way? Also, how might I render round tile using shader while keeping its functionality to fade based on distance?

the full code is available here: https://codesandbox.io/s/tile-with-shader-7kw5v?file=/src/index.js

enter image description here

Upvotes: 1

Views: 258

Answers (1)

prisoner849
prisoner849

Reputation: 17586

Here is an option, that takes in count only x and z coords of the plane and the camera.

vertex.glsl:

varying vec4 vPosition;
varying vec2 vUv;

void main() {
  vPosition = modelMatrix * vec4(position, 1.);
  vUv = uv;
  gl_Position = projectionMatrix * viewMatrix * vPosition;
}

frag.glsl:

uniform vec3 u_color;
uniform vec3 u_camera;
uniform vec3 u_plane;
uniform float u_rad;
uniform sampler2D u_texture;

varying vec4 vPosition;
varying vec2 vUv;

void main() {
  vec4 textureCol = texture2D(u_texture, vUv);
  float rad = distance(vPosition.xz, u_camera.xz); // xz-plane
  textureCol.a = 1.0 - step(1., rad / u_rad);

  gl_FragColor = textureCol;
}

and u_rad uniform is u_rad: { value: 50 },

Upvotes: 3

Related Questions