WebGL学习之纹理盒

【WebGL学习之纹理盒】的更多相关文章

WebGL学习之纹理盒

原文地址:WebGL学习之纹理盒我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面.不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向.本节实现的demo请看天空盒根据法向量的朝向选取立方体6个面中的一个,这个面的像素用来采样生成颜色.这六个面通过他们相对于立方体中心的方向被引用.它们是分别是 gl.TEXTURE_CUBE_MAP_POSIT…

WebGL学习之纹理贴图

为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理实现贴图就需要用到纹理,常用的纹理格式有:2D纹理,立方体纹理,3D纹理.我们使用最基本的2D纹理就能实现本节需要的效果,我们来看一下使用纹理需要的api. 因为纹理的坐标原点位于左下角,和我们通常的左上角坐标原点刚好相反,下面就是将它按Y轴进行反转,方便我们设置坐标. gl.pixelStorei…

webgl学习笔记五-纹理

写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标信息装配图形 : 片元着色器装配光栅化 :显示在屏幕上的三角形是由片元(像素)组成的,所以还需要将图形转化为片元,这个过程被称为光栅化. 纹理图像:映射的这个图像称为纹理图像纹素 : 组成纹理图像的像素称为纹素纹理坐标 : 是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 纹理…

WEBGL学习【五】纹理贴图

<html lang="zh-CN">  <head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/>  <script type="te…

WebGL学习(2) - 3D场景

原文地址:WebGL学习(2) - 3D场景经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的基础,现在终于可以进入精彩的3D世界了,来看一下这一节要实现的3D的效果吧. 实际效果:webGL3D场景 webGL渲染流程重温一下webGL的渲染流程,这一节在第3.4.5.6步骤需要学习新的内容.其中写入数据交叉存放缓冲区,设置隐藏面消除,清空深度缓冲都是比较简单的部分.重点和难点是在3D变…

WebGL学习之法线贴图

实际效果请看demo:纹理贴图为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理.但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面.以光照算法的视角考虑的话,只有一件事决定物体的形状,那就是垂直于它的法线向量.砖块表面只有一个法向量,表面完全根据这个法向量被以一致的方式照亮.如果每个片元都用不同的法线会怎样?这样我们就可以根据表面细微的细节对法线向量进行改变:这样就会获得一种表面看起来要复杂得多的幻觉: 每个片元使用了自己的法线,我们就可以让光…

WebGL学习之HDR与Bloom

原文地址:WebGL学习之HDR与Bloom 什么是HDR HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段.简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后,就叫HDR,它能同时反映出场景最暗和最亮部分的细节.为什么需要多张图片?因为目前的单反相机的宽容度还是有限的,一张照片不能反映出高动态场景的所有细节.一张图片拍摄就必须要在暗光和高光之间做出取舍,只能亮部暗部两者取其一.但是通过HDR合成…