Talking about the color and material system of Hazel game engine (039)

If there are errors in the code, terminology, etc. in the text, please correct me

foreword

• What and what this program is made of

  In order to give color to the previously drawn graphics ,

  Since the color is part of the material, the design of the material system is discussed.

• How to actually give the graph a color operation

  The fragment fragment shader stage in the shader, set the uniform

  Upload the material color to this uniform through the c++ program, and then assign this color to the current fragment.

material system

Talk about

• What is material Material

  • A set of vertex positions surrounds an area that needs to be colored, and these colors come from the material.

  • This material should be an attribute that should exist on the vertices of the object. It does not include the information of the light source, but it includes the attributes of how to react to the light source, such as reflection coefficient, texture, smoothness, roughness, etc.

• The difference with the texture Texture

  Material (Material) and Texture (Texture)

  • Textures are part of materials, just like colors are part of materials
  • A texture is an image
  • Texture is used to describe the appearance of the surface of an object, such as wood grain
  • Material describes the details of the surface of an object, including texture, smoothness, roughness, softness, and metallic texture
  • Materials describe the properties of an object's interaction with light (reflection coefficient, refraction coefficient).
  • Material is a "thing", texture is the "feeling", "vision" of something

  Example:

  When it comes to a model that is made of wood (Material), what comes to mind should be that it looks like wood, with a rough surface, no metal texture, and not very reflective;

  When it comes to a model with a wood texture (Texture), the representative posted a wood texture picture for it.

  Link: https://zhuanlan.zhihu.com/p/165588387

Abstract API design

• Material has Shader as an attribute
• The material reads the relevant uniform of the Shader, and then uploads it through the Set function, and provides an interface to the outside

Set color key codes for graphics

• SandBox App

  Fragment shader section

  		std::string blueShaderfragmentSrc = R"(
  			#version 330 core
  			
  			layout(location = 0) out vec4 color;
  
  			in vec3 v_Position;
  			
  			uniform vec4 u_Color;// 设置颜色uniform
  				
  			void main(){
  				color = u_Color;// 给当前片段赋予颜色
  			}			
  		)";
  

  cpp code

  // 渲染一组正方形
  glm::vec4 redColor(0.8f, 0.2f, 0.3f, 1.0f);
  glm::vec4 blueColor(0.2f, 0.3f, 0.8f, 1.0f);
  // 缩放
  static glm::mat4 scale = glm::scale(glm::mat4(1.0f), {
        
        0.05f, 0.05f, 0.05f});
  for (int i = 0; i < 20; i++) {
        
        
      for (int j = 0; j < 20; j++) {
        
        
          if (j % 2 == 0) {
        
        
              m_BlueShader->UploadUniformFloat4("u_Color", redColor);// 自己写的上传颜色到glsl的接口
          }
          else {
        
        
              m_BlueShader->UploadUniformFloat4("u_Color", blueColor);// 自己写的上传颜色到glsl的接口
          }
          glm::vec3 pos(i * 0.08f, j * 0.08f, 0.0f);
          glm::mat4 smallsqtransfrom = glm::translate(glm::mat4(1.0f), pos) * scale;
          Hazel::Renderer::Submit(m_BlueShader, m_SquareVA, smallsqtransfrom);
      }
  }
  

• Shader.cpp

  	void Shader::UploadUniformFloat4(const std::string& name, const glm::vec4& values)
  	{
        
        
  		GLint location = glGetUniformLocation(m_RendererID, name.c_str());
  		glUniform4f(location, values.x, values.y, values.z, values.w);// 原始OpenGL代码：上传颜色到glsl的uniform
  	}
  

result