Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

41
Vistas
Is it possible to have the objects I draw not have the image I set as the background?

I have this program where my canvas assumes a WebGL context and I'm trying to upload an image as the background, but when I do so, everything becomes the image itself:

enter image description here

I achieved this by fiddling with my css files and setting the background-image: to what I wanted. But I would really like if only the background itself would be the image, and not the objects I draw.

Any tips?

This is my shader.frag code:

precision highp float;

const int MAX_LIGHTS = 8;

struct LightInfo {
    bool active;
    bool directional;
    vec3 pos;
    vec3 ia;
    vec3 id;
    vec3 is;
};

struct MaterialInfo {
    vec3 ka;
    vec3 kd;
    vec3 ks;
    float shininess;
};

varying vec3 fNormal;
varying vec3 posC;

uniform int uNLights; // Effective number of lights used

uniform LightInfo uLight[MAX_LIGHTS]; // The array of lights present in the scene
uniform MaterialInfo uMaterial;  // The material of the object being drawn

uniform mat4 mView;
uniform mat4 mViewNormals;

void main() {
    for(int i = 0; i < MAX_LIGHTS; i++) {
        if(i == uNLights) break; 

        if(uLight[i].active) {
            
            vec3 L;
            if(uLight[i].directional) {
                L = normalize((mViewNormals * vec4(uLight[i].pos, 0.0)).xyz);
            } else {
                L = normalize((mView * vec4(uLight[i].pos, 1.0)).xyz - posC);
            }

            vec3 V = normalize(-posC);
            vec3 N = normalize(fNormal);
            vec3 R = reflect(-L, N);

            float diffuseFactor = max(dot(N, L), 0.0);
            float specularFactor = pow(max(dot(R, V), 0.0), uMaterial.shininess);

            vec3 ambientColor = uLight[i].ia * uMaterial.ka;

            vec3 diffuseColor = uLight[i].id * uMaterial.kd;
            vec3 diffuse = diffuseFactor * diffuseColor;

            vec3 specularColor = uLight[i].is * uMaterial.ks;
            vec3 specular = specularFactor * specularColor;

            if(dot(L, N) < 0.0) {
                specular = vec3(0.0, 0.0, 0.0);
            }
            
            gl_FragColor.xyz += vec3(ambientColor + diffuse + specular);
        }  
    }
}
7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos