WebGL学习之纹理贴图

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

WebGL学习之纹理贴图

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

WebGL学习之法线贴图

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

WebGL学习之纹理盒

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

WebGl 二维纹理贴图(矩形)

效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGl 二维纹理贴图(矩形)</title> </head> <body> <canvas id="myCanvas" width="500" height="…

WebGL three.js学习笔记纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理纹理贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法. 可以使用TextureLoader类的load方法来加载纹理 function loadImgTexture(){ var loader = new THREE.TextureLoader(); loader.load("m…

WebGL学习笔记（六）：纹理贴图

只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色. 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休眠状态前或被唤醒后),我们持有的上下文会出现丢失的情况,为了保证程序运行的健壮性,我们必须在丢失上下文之后做出处理. Canvas为我们提供了两个事件来监听,上下文的丢失和恢复,具体使用看下面的代码: var canvas = document.getElementById("myGLCanvas&…