三、畫一個彩色的三角形
阿新 • • 發佈:2018-11-10
畫完三角形,那麼給它變個色吧。
一、程式碼
- main.cpp
#include <iostream>
//GLEW
#define GLEW_STATIC
#include <GL/glew.h>
//GLFW
#include <GLFW/glfw3.h>
//
#include "Shader.h"
const GLint WIDTH = 800, HEIGHT = 600; //新建視窗
int main()
{
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); //用的是新版的 OpenGL 3.3
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // must for Mac
glfwWindowHint(GLFW_RESIZABLE, GL_FALSE); //改為 GL_TRUE,改變視窗,縱橫比會變
GLFWwindow *window = glfwCreateWindow (WIDTH, HEIGHT, "Learn OpenGL B16112011", nullptr,
nullptr); //視窗名字改成自己的學號
if (nullptr == window)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
// next two lines are for mac retina display
int screenWidth, screenHeight;
glfwGetFramebufferSize (window, &screenWidth, &screenHeight); //獲取視窗大小
glfwMakeContextCurrent(window); //可以新建很多 window
glewExperimental = GL_TRUE;
if (GLEW_OK != glewInit())
{
std::cout << "Failed to initialise GLEW" << std::endl;
return -1;
}
glViewport(0, 0, screenWidth, screenHeight); //從(0,0)開始畫點,直到 WIDTH 和 HEIGHT
//vs 是頂點調色器,frag 是邊緣調色器
Shader ourShader = Shader("core1.vs", "core1.frag"); //檔案相對路徑
//now the verte information comes below
GLfloat vertices[] = {
//position //color
-0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f
};
//the date should be transfered to the memory on the Graphics Card,傳到視訊記憶體
GLuint VAO, VBO; //VAO:Vertex Array Object VBO:Vertex Buffer Object傳資料
glGenVertexArrays(1, &VAO); //建立 VAO
glGenBuffers(1, &VBO);
glBindVertexArray(VAO); //設當前直線
glBindBuffer(GL_ARRAY_BUFFER, VBO); //VAO 和 VBO 成對出現
// transfer the data:傳資料
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); //靜態訪問,幾乎不修改
//set the attribute
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
6 * sizeof(GLfloat), (GLvoid *)0); //0:對應調色器裡 location 的值;3:對應 vec3 三個量;GL_FLOAT:浮點型;GL_FALSE:;3*sizeof(GLfloat):對應 Buffer 裡傳的資料;(GLvoid*)0:從第 0 個位置開始
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE,
6 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:對應調色器裡 color 的值;3:對應 vec3 三個量;GL_FLOAT:浮點型;GL_FALSE:;6*sizeof(GLfloat):每次跨越 6 個;(GLvoid*) (3 * sizeof(GLfloat)):從第 0 個位置開始
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
//畫圖
while (!glfwWindowShouldClose(window))
{
glfwPollEvents(); //把所有事件系統都取過來:鍵盤/滑鼠等操作
glClearColor(0.2f, 0.3f, 0.3f, 1.0f); //視窗背景顏色,RGB,最後一個是透明度
glClear(GL_COLOR_BUFFER_BIT);
//Bind the shader
//glUseProgram(shaderProgram); //使用調色器,不註釋
ourShader.Use();
//Draw the triangle
glBindVertexArray(VAO); //使用 VAO,直接繫結
glDrawArrays(GL_TRIANGLES, 0, 3); //畫三角形,從第 0 個數據開始畫,到最後一個數據(第 3 個)結束
glBindVertexArray(0);
glfwSwapBuffers(window); //呼叫雙面進行畫,顯示一個,另一個在畫,畫面更流暢
}
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glfwTerminate();
return 0;
}
不出意外,三角形會變成彩色的,如下圖所示。
注意, 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[] = {
//position //color
-0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f
};
因為增加了三列,所以這裡也要做相應變化。
//set the attribute
//設定頂點屬性指標,設定頂點屬性指標
//第一個引數指定我們要配置的頂點屬性。location 的值。
//第二個引數指定頂點屬性的大小。
//第三個引數指定資料的型別,這裡是 GL_FLOAT。
//第四個引數:是否希望資料被標準化,即所有資料都會被對映到 0 到 1 之間。
//第五個引數叫做步長,即連續的頂點屬性組之間的間隔。
//最後一個引數:位置資料在緩衝中起始位置的偏移量。
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
6 * sizeof(GLfloat), (GLvoid *)0); //0:對應調色器裡 location 的值;3:對應 vec3 三個量;GL_FLOAT:浮點型;GL_FALSE:;6*sizeof(GLfloat):對應 Buffer 裡傳的資料;(GLvoid*)0:從第 0 個位置開始
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE,
6 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:對應調色器裡 color 的值;3:對應 vec3 三個量;GL_FLOAT:浮點型;GL_FALSE:;6*sizeof(GLfloat):每次跨越 6 個;(GLvoid*) (3 * sizeof(GLfloat)):從第 3 個位置開始
glEnableVertexAttribArray(1);
其他講解可以參考之前那篇 畫一個三角形 的文章。
三、致謝
本文首發於個人部落格:Wonz の Blog 。