2. Texturing | Showcase Template

Texturing #

Una textura es una imagen (es decir, un mapa de bits o una procedural) mapeada en la superficie de una figura usualmente en un triángulo o basado en ello.

UV Visualization #

uv.js

let easycam;
let uvShader;
let button;
let slider;
let w;
let h;

function preload() {
  uvShader = readShader('/VisualComputing2022_2/sketches/Taller3/Texturing/uv.frag',
                  { matrices: Tree.pmvMatrix, varyings: Tree.texcoords2 });
}

function setup() {
  createCanvas(500, 500, WEBGL);
  //textureMode(NORMAL);
  shader(uvShader);
  w = width/2
  h = height/2
  slider = createSlider(0, 255, 0);
  slider.position(350, 10);
  button = createButton('Flip');
  button.position(10, 10);
  button.mousePressed(flip);
}

function draw() {
  push();
  background(200);
  uvShader.setUniform('x', slider.value() / 255);
  noStroke();
  quad(-w,-h,w,-h,
        w,h,-w,h)
  pop();
}

function flip() {
  w = -w
  h = -h
  redraw()
}

uv.frag

precision highp float;
varying vec2 texcoords2;
uniform float x;

void main() {
  vec2 newtex = (texcoords2 + 1.) / 2.;
  gl_FragColor = vec4(vec3(newtex,x),1.0);
}

3D #

La visualización 3D es el proceso de crear gráficos y renderizar diseños utilizando software 3D. Muchas industrias se benefician de la visualización en 3D, desde la arquitectura, el cine y los juegos hasta la ingeniería y la fabricación. Se crea una cantidad de productos y visiones en visualización 3D antes de la ejecución, lo que ahorra tiempo y costos a los productores, fabricantes y clientes.

World #

uv_world.js

let easycam;
let uvShader;
let slider;

function preload() {
  uvShader = readShader('/VisualComputing2022_2/sketches/Taller3/Texturing/uv.frag',
          { precision: Tree.highp,matrices: Tree.pmvMatrix, varyings: Tree.texcoords2 });
}

function setup() {
  createCanvas(500, 500, WEBGL);
  textureMode(NORMAL);
  shader(uvShader);
  slider = createSlider(0, 255, 0);
  slider.position(350, 10);
}

function draw() {
  background(0);
  uvShader.setUniform('x', slider.value() / 255);
  orbitControl();
  axes();
  push();
  noStroke();
  ellipsoid(width / 4, height / 4, width / 4);
  pop();
}

function mouseWheel(event) {
  return false;
}

Screen #

uv_screen.js

let easycam;
let uvShader;
let opacity;

function preload() {
  uvShader = readShader('/VisualComputing2022_2/sketches/Taller3/Texturing/uv_alpha.frag',
              { matrices: Tree.pmvMatrix, varyings: Tree.texcoords2 });
}

function setup() {
  createCanvas(300, 300, WEBGL);
  // easycam stuff
  let state = {
    distance: 250,           // scalar
    center: [0, 0, 0],       // vector
    rotation: [0, 0, 0, 1],  // quaternion
  };
  easycam = createEasyCam();
  easycam.state_reset = state;   // state to use on reset (double-click/tap)
  easycam.setState(state, 2000); // now animate to that state
  textureMode(NORMAL);
  opacity = createSlider(0, 1, 0.5, 0.01);
  opacity.position(10, 25);
  opacity.style('width', '280px');
}

function draw() {
  background(200);
  // reset shader so that the default shader is used to render the 3D scene
  resetShader();
  // world space scene
  axes();
  grid();
  translate(0, -70);
  rotateY(0.5);
  fill(color(255, 0, 255, 125));
  box(30, 50);
  translate(70, 70);
  fill(color(0, 255, 255, 125));
  sphere(30, 50);
  // use custom shader
  shader(uvShader);
  // https://p5js.org/reference/#/p5.Shader/setUniform
  uvShader.setUniform('opacity', opacity.value());
  // screen-space quad (i.e., x ∈ [0..width] and y ∈ [0..height])
  // see: https://github.com/VisualComputing/p5.treegl#heads-up-display
  beginHUD();
  noStroke();
  quad(0, 0, width, 0, width, height, 0, height);
  endHUD();
}

function mouseWheel(event) {
  //comment to enable page scrolling
  return false;
}

uv_alpha.frag

precision highp float;
varying vec2 texcoords2;
varying vec4 color4;
uniform float x;
uniform float opacity;

void main() {
  vec2 newtex = (texcoords2 + 1.) / 2.;
  gl_FragColor = vec4(vec3(newtex,x),opacity);
}

Texture mapping #

El mapeo de texturas es un proceso de diseño gráfico en el que una superficie bidimensional (2D), denominada mapa de texturas, se “envuelve” alrededor de un objeto tridimensional (3D). Así, el objeto tridimensional adquiere una textura superficial similar a la de la superficie bidimensional.

video_cube.js

let vid;
function preload() {
    vid = createVideo('/VisualComputing2022_2/sketches/Taller3/Texturing/dancing.mp4');
    vid.hide();
}

function setup() {
  createCanvas(500, 500, WEBGL);
  describe('spinning cube with a texture from an image');
}

function draw() {
  background(0);
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //pass image as texture
  texture(vid);
  box(width / 2);
}

function mousePressed() {
    vid.loop();
}