zoukankan      html  css  js  c++  java
  • OpenGL学习(4)——纹理(补)

    完成章节后练习

    练习

    1. Make sure only the happy face looks in the other/reverse direction by changing the fragment shader.

    #version 330 core
    out vec4 FragColor;
    in vec4 Color;
    in vec2 texCoord;
    uniform sampler2D texSampler1;
    uniform sampler2D texSampler2;
    void main()
    {
        FragColor = mix(texture(texSampler1, texCoord)*Color, texture(texSampler2, vec2(-texCoord.x, texCoord.y)), 0.2);
    }
    

    2. Experiment with the different texture wrapping methods by specifying texture coordinates in the range 0.0f to 2.0f. See if you can display 4 smiley faces on a single container image clamped at its edge.

    glBindTexture(GL_TEXTURE_2D, texture[0]);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    

    3. Try to display only the center pixels of the texture image on the rectangle in such a way that the individual pixels are getting visible by changing the texture coordinates. Try to set the texture filtering method to GL_NEAREST to see the pixels more clearly.

    float vertices[] = {0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.6f, 0.6f,
                        -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.4f, 0.6f,
                        0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.6f, 0.4f,
                        -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.4f, 0.4f};
    
    glBindTexture(GL_TEXTURE_2D, texture[0]);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_GL_LINEAR); //纹理被缩小时的过滤方式对该题没有影响
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    
    glBindTexture(GL_TEXTURE_2D, texture[1]);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    

    4. Use a uniform variable as the mix function's third parameter to vary the amount the two textures are visible. Use the up and down arrow keys to change how much the container or the smiley face is visible.

    #version 330 core
    out vec4 FragColor;
    in vec4 Color;
    in vec2 texCoord;
    uniform sampler2D texSampler1;
    uniform sampler2D texSampler2;
    uniform float ratio;
    void main()
    {
        FragColor = mix(texture(texSampler1, texCoord), texture(texSampler2, vec2(-texCoord.x, texCoord.y)), ratio);
    }
    
    ourShader.use();
    flat fragmentRatio = 0.0f;
    glUniform1f(glGetUniformLocation(ourShader.ID, "ratio"), fragmentRatio);
    //render loop
    while(!glfwWindowShouldClose(window)){
        processInput(window);
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);
        ourShader.use();
        if(glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS){
            fragmentRatio += 0.01f;
            glUniform1f(glGetUniformLocation(ourShader.ID, "ratio"), fragmentRatio);
        }
        if(glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS){
            fragmentRatio -= 0.01f;
            glUniform1f(glGetUniformLocation(ourShader.ID, "ratio"), fragmentRatio);
        }
        glBindVertexArray(VAO);
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texture[0]);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, texture[1]);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
        glfwSwapBuffers(window);
        glfwPollEvents();
    }
    
  • 相关阅读:
    [已读]精通AngularJS
    [在读]HTML5数据推送应用开发
    [未读]深入浅出node.js
    [已读]用Angularjs开发下一代web应用
    [在读]Secrets of the javascript Ninja
    Element ui select同时获取value和label的值
    Element ui tree树形控件获取父节点id
    Element ui tree结合Vue使用遇到的一些问题(一)
    vue数组检测更新问题
    css3实现流星坠落效果
  • 原文地址:https://www.cnblogs.com/yiqian/p/10872525.html
Copyright © 2011-2022 走看看