fand / veda

⚡VJ / Live Coding on Atom⚡
http://veda.gl/
MIT License
506 stars 34 forks source link

Is there a way to get CubeMaps working? #247

Open illus0r opened 3 years ago

illus0r commented 3 years ago

Hey there! Thank you for the great editor, which is top on my list.

Shadertoy and some other editors support CubeMaps, which are useful for rendering reflections of environment and other cool effects:

color = texture(iChannel0, reflection_vector).xyz;

where iChannel0 is a cubemap texture. Example can be found at https://www.shadertoy.com/view/WljBRm

Is it possible to get cubemaps working with Veda? If not, can you suggest a snippet to use regular textures as cubemaps?

illus0r commented 3 years ago

Solved this by modifying a snippet from https://en.wikipedia.org/wiki/Cube_mapping#Memory_addressing.

vec4 textureCubeZ(sampler2D tex, vec3 p) {
  float absX = abs(p.x);
  float absY = abs(p.y);
  float absZ = abs(p.z);

  int isXPositive = p.x > 0. ? 1 : 0;
  int isYPositive = p.y > 0. ? 1 : 0;
  int isZPositive = p.z > 0. ? 1 : 0;

  float maxAxis, uc, vc;
  vec2 crop;

  // POSITIVE X
  if (isXPositive!=0 && absX >= absY && absX >= absZ) {
    maxAxis = absX;
    uc = -p.z;
    vc = p.y;
    crop=vec2(2,1);
  }
  // NEGATIVE X
  if (isXPositive==0 && absX >= absY && absX >= absZ) {
    maxAxis = absX;
    uc = p.z;
    vc = p.y;
    crop=vec2(0,1);
  }
  // NEGATIVE Y
  if (isYPositive!=0 && absY >= absX && absY >= absZ) {
    maxAxis = absY;
    uc = p.x;
    vc = -p.z;
    crop=vec2(1,2);
  }
  // POSITIVE Y
  if (isYPositive==0 && absY >= absX && absY >= absZ) {
    maxAxis = absY;
    uc = p.x;
    vc = p.z;
    crop=vec2(1,0);
  }
  // POSITIVE Z
  if (isZPositive!=0 && absZ >= absX && absZ >= absY) {
    maxAxis = absZ;
    uc = p.x;
    vc = p.y;
    crop=vec2(1,1);
  }
  // NEGATIVE Z
  if (isZPositive==0 && absZ >= absX && absZ >= absY) {
    maxAxis = absZ;
    uc = -p.x;
    vc = p.y;
    crop=vec2(3,1);
  }

  // Convert range from -1 to 1 to 0 to 1
  vec2 uv = 0.5 * (vec2(uc,vc) / maxAxis + 1.0);

  uv+=crop;
  uv/=vec2(4,3);

  return texture2D(tex, uv);
}

The image should look like this:

telegram-cloud-photo-size-2-5442726331977674693-y