四、畫一個黑色的矩形框
阿新 • • 發佈：2018-11-10
畫完三角形，教完著色器，現在該學紋理了。
一、環境配置
新的教學內容，又要增加新的配置環境了。SOIL2 的環境配置可以參考我的 這篇部落格 。
二、程式碼
- main.cpp
#include <iostream>
//GLEW
#define GLEW_STATIC
#include <GL/glew.h>
//GLFW
#include <GLFW/glfw3.h>
//
#include "Shader.h"
// SOIL2
#include "SOIL2/SOIL2.h"
#include "SOIL2/stb_image.h" 另外，還有三個檔案： Shader.h 、 core1.vs 、 core1.frag 也要有。
- Shader.h
#pragma once
//#ifndef shader_hpp
//#define shader_hpp
//#endif /* shader_hpp */
#include<string>
#include<fstream> // 可以開啟檔案
#include<sstream>
#include<iostream>
#include<GL/glew.h>
class Shader {
GLuint vertex, fragment;
public:
GLuint Program;
Shader(const GLchar * vertexPath, const GLchar * fragmentPath)
{
std::string vertexCode;
std::string fragmentCode;
std::ifstream vShaderFile;
std::ifstream fShaderFile;
vShaderFile.exceptions(std::ifstream::badbit);
fShaderFile.exceptions(std::ifstream::badbit);
try {
vShaderFile.open(vertexPath);
fShaderFile.open(fragmentPath);
std::stringstream vShaderStream, fShaderStream;
vShaderStream << vShaderFile.rdbuf();
fShaderStream << fShaderFile.rdbuf();
// 檔案關閉順序，先 v 再 f
vShaderFile.close();
fShaderFile.close();
vertexCode = vShaderStream.str();
fragmentCode = fShaderStream.str();
}
catch (std::ifstream::failure a) {
std::cout <<
"ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ"
<< std::endl;
}
// 型別轉換
const GLchar *vShaderCode = vertexCode.c_str();
const GLchar *fShaderCode = fragmentCode.c_str();
//import and compile the shader
vertex = glCreateShader(GL_VERTEX_SHADER); // 不用重新定義
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex); // 編譯
GLint success;
GLchar infoLog[512];
glGetShaderiv(vertex, GL_COMPILE_STATUS, &success); // 編譯是否完成的位置
if (!success) {
glGetShaderInfoLog(vertex, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
// 邊緣調色器
fragment = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragment, 1, &fShaderCode, NULL);
glCompileShader(fragment); // 編譯
glGetShaderiv(fragment, GL_COMPILE_STATUS, &success); // 編譯是否完成的位置
if (!success) {
glGetShaderInfoLog(fragment, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
//create the program and link the program
this->Program = glCreateProgram(); // 建立著色器程式
glAttachShader(this->Program, vertex);
glAttachShader(this->Program, fragment);
glLinkProgram(this->Program); // 連結
glValidateProgram(this->Program); // 可省略
glGetProgramiv(this->Program, GL_LINK_STATUS, &success);
if (!success) {
glGetProgramInfoLog(this->Program, 512, NULL, infoLog); // 獲取連結情況
std::cout <<
"ERROR::SHADER::PROGRAM::LINKING_FAILED\n" <<
infoLog << std::endl;
}
}
~Shader() {
glDetachShader(this->Program, vertex);
glDetachShader(this->Program, fragment);
glDeleteShader(vertex);
glDeleteShader(fragment);
glDeleteProgram(this->Program);
}
void Use() {
glUseProgram(this->Program);
}
};
- core1.vs
#version 330 core
layout(location = 0) in vec3 position;
layout(location = 1) in vec3 color;
out vec3 ourColor;
void main(){
gl_Position = vec4(position.x, position.y, position.z, 1.0f);
ourColor = color;
};
- core1.frag
#version 330 core
in vec3 ourColor;
out vec4 color;
void main(){
color = vec4(ourColor, 0.7f);
};
程式正常執行，應該會出現下圖。
三、講解
頂點座標和索引座標。
GLfloat vertices[] = {
//first triangle
0.5f, 0.5f, 0.0f, //top right
0.5f, -0.5f, 0.0f, //bottom right
-0.5f, -0.5f, 0.0f, //top left
-0.5f, 0.5f, 0.0f
//second triangle
//0.5f, -0.5f, 0.0f,
//-0.5f, -0.5f, 0.0f,
//-0.5f, 0.5f, 0.0f
};
unsigned int indices[] = {
0,1,3,
1,2,3
};
建立索引，並傳資料。
//transfer the index
GLuint EBO;
glGenBuffers(1, &EBO);
//把索引複製到緩衝裡供 OpenGL 使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
//把使用者定義的資料複製到當前繫結緩衝中
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
畫矩形，即畫兩個三角形。
//Draw the rectangle
glBindVertexArray(VAO); //使用 VAO，直接繫結
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); //繫結索引
//第一個引數指定了我們繪製的模式。
//第二個引數是我們打算繪製頂點的個數。6 個索引。
//第三個引數是索引的型別。
//最後一個引數裡我們可以指定 EBO 中的偏移量。索引是從 0 開始。
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); //應用紋理，自動把紋理賦值給片段著色器的取樣器
glBindVertexArray(0); //解綁 EBO
本文首發於個人部落格：Wonz の Blog 。