WEBGL学习【十一】光照模型

WebGL学习(1) - 三角形

原文地址:WebGL学习(1) - 三角形还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网上的教程,经过半年断断续续的学习,对canvas的学习终于完结,对常用的canvas特效基本能做到信手拈来的. canvas特效请看:样例列表众所周知,canvas是2D绘图技术,虽然可以通过坐标变换,位置计算也能做到3D的效果.但3D场景数据量毕竟比2D要高一个数量级的,纯粹用canvas的话,不管是性能…

WebGL学习(2) - 3D场景

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

WebGL学习(3) - 3D模型

原文地址:WebGL学习(3) - 3D模型相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是…

WebGL学习之纹理贴图

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

【转载】强化学习(十一) Prioritized Replay DQN

原文地址: https://www.cnblogs.com/pinard/p/9797695.html ---------------------------------------------------------------------------------------- 在强化学习(十)Double DQN (DDQN)中,我们讲到了DDQN使用两个Q网络,用当前Q网络计算最大Q值对应的动作,用目标Q网络计算这个最大动作对应的目标Q值,进而消除贪婪法带来的偏差.今天我们在DDQN的基础…

webgl学习笔记五-纹理

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

webgl学习笔记四-动画

写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度. demo 吊下胃口 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

webgl学习笔记三-平移旋转缩放

写在前面建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点平移 1.关键点说明顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量. 顶点坐标位置 : gl_Position = a_Position + u_Translation 平移API : gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); 2.demo html <!DOCTYPE html> <…

webgl学习笔记二-绘图多点

写在前面建议先看下第一篇webgl学习笔记一-绘图单点第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象,可以一次性地向着色器传入多个顶点的数据.缓存区对象是webgl系统的一块内存区域. 绘制多个点的流程这里重点介绍缓冲区对象使用步骤创建缓冲区对象 gl.createBuffer() 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); 将数据写…

WebGL学习之法线贴图

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

WebGL学习笔记二——绘制基本图元

webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代表图元类型. (1)gl.POINTS——点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona…

WebGL学习之HDR与Bloom

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

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> <title>Listing 7-3 and 7-4, Texturing and Lighting With the Phong Reflection Model.</title> <script src="./lib/webgl-debug.js"></script> <script src=&…

WebGL学习笔记（十一）：混合和透明

到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到: A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明,可以看到半透明的模型,也可以看见模型后面的东西: 开启混合要实现透明,需要开启混合,会使用到下面的两个方法: // 开启混合 gl.enable(gl.BLEND); // 设定混合效果 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 源因…

CSGrandeur的WebGL学习——WebGL教程

在线查看:http://csgrandeur.gitbooks.io/webgl-learn/content/ 离线mobi:http://files.cnblogs.com/files/CSGrandeur/csgrandeur-webgl-learn_mobi_20150520.rar 离线pdf:http://files.cnblogs.com/files/CSGrandeur/csgrandeur-webgl-learn_20150520.pdf 在线版本会及时更新,离线版本在有较大改动…

初识webgl--我的webgl学习第一课（基于threeJs）

一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插件,听起来是一个很棒的事情.大学的时候,计算机老师让我们课后学习3Dmax,种种原因,并没有听老师的话,但是,却一直希望能够接触一下三维世界.现在,我喜欢的JavaScript也可以实现三维动画效果,当然有点小惊喜,既然如此,何不借此机会,了解webgl的同时,巩固下自己的JavaScript基础呢…

webgl学习

学习网址: https://www.yiibai.com/webgl/webgl_shaders.html# 多重纹理 https://blog.csdn.net/Chase_freedom/article/details/46714629 Github地址:spite opengl 1 http://ogldev.atspace.co.uk/ 2 计算机图形学学习 https://www.zhihu.com/question/26720808/answer/33791910…

WebGL学习笔记七点一

第六章讲的是一些GL的一些语法,前面已经涉及,学习时直接跳过,来看第七章,第七章是真正意义的三维立体的出现,其实图形绘制方法是差不多的,就是Z坐标此时不再为0,所以很容易能构造出一些立体图形,但是立体图形涉及了一些其它概念. 正射投影:就是没有那种越远越小的效果,立体感没有那么强. 其中涉及的知识有:视点,就是相当于你的眼睛坐标位置,当然实际上你的眼睛看屏幕时时不经常动的,在这里说成眼睛原理上说的过去也容易理解所以不较真了.观察目标点:这个看书上概念没看懂,推断出是这个意思,就是将被观察物体看成…

WebGL学习笔记一

学习用来做web3D的,从第一页开始学起先做2D的,接下来的程序是一个入门级的程序,可以通过在画板上的不同位置点击而获取不同颜色的点,以画板中心为坐标原点四个象限有不同的颜色,访问地址 http://123.206.70.64:8080/WebGL2/ColoredPoints.html 下面看效果截图.…

WebGL学习笔记（3）

根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制移动,并添加3D对象在世界模型中进行相对移动测试代码如下,拷贝到您的浏览器打开,方向键控制镜头旋转与移动 <!doctype html><html><head><style>* {margin:0;padding:0;overflow:hidden;}<…

WebGL学习笔记（2）

根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算原理,关于矩阵变换参考这两篇文章:https://blog.csdn.net/jscese/article/details/52065628https://blog.csdn.net/u012501459/article/details/12945149#transform 其中还涉及到了Math函…

webgl学习总结画线面及场景和物体动

WebGL是在浏览器中实现三维效果的一套规范.是浏览器中的3D引擎,是利用js代码来实现加载3D模型,渲染.输出等功能,从而实现在浏览器和微信中浏览三维文件的效果. three.js是基于WebGL的开源图形库,里面提供了大量的WebGL的图形函数,直接使用three.js可更快的开发一个web3D项目. Web3D又称网络三维,是一种在虚拟现实技术的基础上,将现实世界中有形的物品,通过互联网进行虚拟的三维应用展示,并可互动浏览操作的一种虚拟现实基础. 3Dview框架是基于three.js图形…

WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

接上一节,游戏控制首先要解决的就是碰撞检测了这里用到了学习笔记(三)射线检测的内容了以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设为前进方向,z轴设为高度~ 如果射线返回有结果,那么说明鸟遇到了障碍物.代码如下: var raycaster1 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 1, 0), 0, 30) var raycaster2 =…

WEBGL学习【九】立方体贴不同的纹理

<html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>NeHeWebGL----环境光(光照模型)</title> <meta http-equiv="content-type" content=&qu…

WebGL学习笔记（十六）：遮罩

这里总结下几种WebGL中实现遮罩的方法. 模板缓冲模板缓冲可以实现渲染剔除,但是我们之前的学习里,剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示,这样的话并不适合用来实现遮罩. 我们想实现遮罩的话,是希望只绘制模板缓冲而不绘制颜色缓冲. 想要实现这样的效果,可以借助 colorMask 方法来实现(如果关闭了颜色缓冲的所有通道后,下一次绘制就不会改变颜色缓冲了),具体写法如下: // 关闭颜色缓冲的所有通道 gl.colorMask(false, false, false, fa…

Java编程思想学习(十一) 泛型

1.概要 generics enable types (classes and interfaces) to be parameters when defining classes, interfaces and methods. 泛型能在定义类,接口和方法时将类型(类和接口)作为参数.和方法声明时的形式参数很类似,都是为了在不同的输入时重用相同的代码.不同的是形式参数输入的是值而泛型是类型. 2.为什么使用泛型 1.编译时更加强的(Stronger)类型检测java编译器对泛型代码进行强类型检…

webGL 学习教程

====教程=================== webGL中文网:http://www.hewebgl.com/webGL API:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API 如何启用WebGL:http://blog.csdn.net/long405581649/article/details/22614153 ====文章=================== WebGL API概述:http://www.tuic…

强化学习(十一) Prioritized Replay DQN

在强化学习(十)Double DQN (DDQN)中,我们讲到了DDQN使用两个Q网络,用当前Q网络计算最大Q值对应的动作,用目标Q网络计算这个最大动作对应的目标Q值,进而消除贪婪法带来的偏差.今天我们在DDQN的基础上,对经验回放部分的逻辑做优化.对应的算法是Prioritized Replay DQN. 本章内容主要参考了ICML 2016的deep RL tutorial和Prioritized Replay DQN的论文<Prioritized Experience Replay>(I…

Linux 学习 (十一) 软件安装管理

Linux软件安装管理学习笔记软件包简介软件包分类: 源码包 :脚本安装包二进制包(RPM 包.系统默认包) 源码包的优点: 开源,如果有足够的能力,可以修改源代码可以自由选择所需的功能软件是编译安装,所以更适合自己的系统,更加稳定,也效率更高卸载方便源码包的缺点: 安装过程步骤较多,尤其安装较大的软件集合时(如 LAMP),容易出现拼写错误便宜过程时间较长,安装比二进制安装时间长因为是编译安装,安装过程中一旦报错新手很难解决二进制包的优点: 包管理系统简单,只通过几个命令…

【WEBGL学习【十一】光照模型】的更多相关文章