Colors and Materials
- material is about
- ambient
- specular
- diffuse
- Transparency
- caustics
Light
- AmbientLight //it is
- DiffuseLight //Direction
角度不同,光强不同
Phong Shading - Specular Light //The Direction of Light and the Position of the Viewer
- Why can see in another angle
- Blinn-Phong Reflection
- Gouraud Shading
- Normal
- Vertex Normal
- Surface Normal
- Shadow
- ShadowMapping
- Light Perspective
- Depth test
- Depth Buffer
- shadow factor
Texture
- glGenTextures(n, &m_shadowMap); //分配n个Texture, 并且设置其Handle
- glBindTexture(GL_TEXTURE_2D, m_shadowMap); //GL_TEXTURE_2D应该是设置变量类型
- glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, WindowWidth, WindowHeight, 0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL);
- GL_DEPTH_COMPONENT表明只有深度属性
- NULL表示? - glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);//设置Texture的属性
- glActiveTexture(TextureUnit);//????
数据结构
- GLuint VBO;//定义内存
- glGenBuffers(1, &VBO);//分配内存
- VBO
- Vector
- 内存
- 数据存储
Other
- Space?
- local space
- clip space
- NDC space
- texture space
- depth test
- WVP matrix
DrawCall
- ordered draw
- indexed draw
glDrawArrays(GL_TRIANGLES, 0, 3);
glDrawArray(GL_POINTS, index, count);//GL_POINTS is the type, index is the index to draw, count is how many to draw
glDrawElements(GL_TRIANGLES, 12, GL_UNSIGNED_INT, 0);//draw elements depending on IBO, GL_TRIANGLE is the image type, GL_UNSIGNED_INT is the elements type, 12 = 3*4 means there are 4 triangles, 0 is the index to draw
Buffer
- Buffer
Vector3f Vertex[1];//define a vertex array
Vertex[0] = [1, 1, 1]//set the value of 0
glGenBuffer(n, &VBO);//generate n buffers and set the handle to buffer
glBindBuffer(GL_ARRAY_BUFFER, VBO)://GL_ARRAY_BUFFER as the type and VBO is the handle
glBufferData(GL_ARRAY_BUFFER, VBO, sizeof(Vertex), Vertex, GL_STATIC_DRAW);//GL_STATIC_DRAW means we will not change the content
glEnableVertexAttribArray(i);//i是给Shader用的,表示接下来的VertexAttribPointer中的值可以被OPENGL使用。
glVertexAttribPointer(index, 3, GL_FLOAT, GL_FALSE, stride, 0);//如何处理数组中的元素,index表示数组的开头,3表示每个数组中向量的长度,GL_FLOAT表示向量中元素的类型,GL_FALSE表示如何是否normalized,stride表示数组元素之间的偏移量
RenderBuffer
-
FrameBuffer
- Depth Buffer
- Color Buffer
- ways of attachments
- COLOR_ATTACHMENTi
- DEPTH_ATTACHMENT
- DEPTH_STENCIL_ATTACHMENT
- APIS
- glBindFramebuffer(GL_FRAMEBUFFER, m_fbo);//绑定以后所有操作都会进行到这个FrameBuffer上
- 其他参数有 GL_DRAW_FRAMEBUFFER,GL_READ_FRAMEBUFFER,
+ glBindFramebuffer(GL_FRAMEBUFFER, 0); //设置为默认屏幕缓冲区
VertexBuffer
Mipmapping
一个Sphere的着色
UV_mapping
Texturing a Sphere
GLSL Programming/GLUT/Textured Spheres
Unfolding the Earth: Myriahedral Projections
Spherical Mapping with Normals
ShadowMapping
DepthTest
Learn CubeMap
描述
- 有6个texture
- 每个有mipmap
- 大多数情况下,是用来做反射的
- it is an environment map
资料
- Cubemap_Texture
- Cubemap Learn OPENGL -- GOOD
- OpenGL Cube Map Texturing - by nvidia
Learn HeightField
资料
Cube
- 分解
- mipmap
- Sampler
- Array textures
- layer-faces.
- layer
- Layered Rendering
- environment map
问题
- 如何使用
- 与普通
Texture
的区别
Learn Texture
description
分解
- genTexture
- glBindTexture
- glActiveTexture
- glTexParameterf
- glTexImage2D
- TextureCoordinates
- Sampler
资料
Questions
- uv值的起点坐标是
Learn Ray marching
Descriptions
-
优点
- 首先是它完美的解决了基于顶点的建模方法中透明物体的问题
- 其次是它渲染『无限』的物体或场景时不会造成任何存储开销
缺点
不够直观
需要用到许多数学计算
这是一类技术,一个框架
利用射线一步一步进行
可以用作Blending
Ray marching and distance fields provide an efficient method of rendering mathematical surfaces, such as constructive solid geometry, or more complex shapes that cannot be easily determined, such as recursive shapes and fractals.
Dependencies
subsurface scattering.
raytracing
volumetric translucency
raycasting
distance functions
Distance-aided ray marching
volumetric rendering
normalize
read glsl code
References
Rendering Worlds with Two Triangles with raytracing on the GPU in 4096 bytes - a pdf
DEMO
https://github.com/kevinroast/webglshaders - very niubi
Exercises
Questions
Learn GL variables
- Built-in Variable
- uniform
- 是在一次render过程中不变的
- attribute
- 顶点的属性
- 只能在Vertex.glsl中
- varying
- 在fragment和vertex之间传输
WEBGL retina
var devicePixelRatio = window.devicePixelRatio || 1; // Evaluates to 2 if Retina
renderer.setSize( canvasWidth/devicePixelRatio, canvasHeight/devicePixelRatio);
renderer.setClearColorHex( 0xffffff, 1.0 );
Learn GL expressions
- 参考
- if else