<html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>NeHeWebGL----环境光(光照模型)</title> <meta http-equiv="content-type" content=&qu…
只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色. 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休眠状态前或被唤醒后),我们持有的上下文会出现丢失的情况,为了保证程序运行的健壮性,我们必须在丢失上下文之后做出处理. Canvas为我们提供了两个事件来监听,上下文的丢失和恢复,具体使用看下面的代码: var canvas = document.getElementById("myGLCanvas&…
转自:https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/06%20Cubemaps/ 我们之前一直使用的是2D纹理,还有更多的纹理类型我们没有探索过,本教程中我们讨论的纹理类型是将多个纹理组合起来映射到一个单一纹理,它就是立方体贴图(Cube Map). 基本上说立方体贴图它包含6个2D纹理,这每个2D纹理是一个立方体(cube)的一个面,也就是说它是一个有贴图的立方体.你可能会奇怪这样的立方体有什么用?…
開始学习第4章 - 着色器的反射 看完了1.2节,来记录一下.反射主要是利用了 Cubemap 立方体贴图. 认识Cubemap 立方体贴图.就如同名字所说.在一个立方体上有6张图.就这样觉得吧. 假想一下 ,在一个艳丽的房间里.有一个表面是镜子的圆球.那这个圆球表面就反射了房间里面的全部东西.就是一个大号的凸镜. 这是到网上找得一张图,非常直观的表达了我的意思-- 注意标题中说的,静态立方体贴图.为什么叫静态.由于这一次使用的立方体贴图是提前生成好的图片,而不是动态生成的. 这又是什么意思呢?…
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术具体解释>电子工业出版社等. CSDN视频网址:http://edu.csdn.net/lecturer/144 在这里介绍立方体贴图主要是告诉读者,利用立方体贴图原理.我们能够做非常多事情:比方天空盒,环境映射中的反射和折射效果等等.当然环境映射也能够使用一张纹理贴图实现.这个会在博文的最…
这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大部分API已经没有使用.WebGL就和这差不多,大部分功能是着色器完成主要功能,记录下主要过程…
原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面.不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向.本节实现的demo请看 天空盒 根据法向量的朝向选取立方体6个面中的一个,这个面的像素用来采样生成颜色.这六个面通过他们相对于立方体中心的方向被引用.它们是分别是 gl.TEXTURE_CUBE_MAP_POSIT…
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图 代码工程地址: https://github.com/jiabaodan/Direct12BookReadingNotes 学习目标 学习什么是立方体贴图,并且如何在HLSL中对它们采样: 如何使用DX的纹理工具创建立方体贴图: 学习如何用立方体贴图来模仿反射: 学习如何使用立方体贴图对球体采样来模拟一个天空和远处的山. 1 立方体纹理映射 在D…
为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 实现贴图就需要用到纹理,常用的纹理格式有:2D纹理,立方体纹理,3D纹理.我们使用最基本的2D纹理就能实现本节需要的效果,我们来看一下使用纹理需要的api. 因为纹理的坐标原点位于左下角,和我们通常的左上角坐标原点刚好相反,下面就是将它按Y轴进行反转,方便我们设置坐标. gl.pixelStorei…
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标信息 装配图形 : 片元着色器装配 光栅化 :显示在屏幕上的三角形是由片元(像素)组成的,所以还需要将图形转化为片元,这个过程被称为光栅化. 纹理图像:映射的这个图像称为纹理图像 纹素 : 组成纹理图像的像素称为纹素 纹理坐标 : 是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 纹理…