【CSGrandeur的WebGL学习——WebGL教程】的更多相关文章

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学习(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…

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 入门-WebGL简介与3D图形学

什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenGL ES 2.0,OpenGL ES 是 OpenGL 三维图形 API 的子集,针对手机.平板电脑和游戏主机等嵌入式设备而设计.浏览器内核通过对OpenGL API的封装,实现了通过JavaScript调用3D的能力.WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中…

Deep Learning 19_深度学习UFLDL教程：Convolutional Neural Network_Exercise（斯坦福大学深度学习教程）

理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep learning:五十一(CNN的反向求导及练习) Deep Learning 学习随记(八)CNN(Convolutional neural network)理解 ufldl学习笔记与编程作业:Convolutional Neural Network(卷积神经网络) [UFLDL]Exercise: Co…

7张图片学习VIM教程

7张图片学习VIM教程 张图片设置为桌面背景,时不时的能看上一眼.慢慢就学会VIM了. VIM lesson 1 VIM lesson 2 VIM lesson 3 VIM lesson 4 VIM lesson 5 VIM lesson 6 VIM lesson 7…

Deep Learning 13_深度学习UFLDL教程：Independent Component Analysis_Exercise（斯坦福大学深度学习教程）

前言 理论知识:UFLDL教程.Deep learning:三十三(ICA模型).Deep learning:三十九(ICA模型练习) 实验环境:win7, matlab2015b,16G内存,2T机械硬盘 难点:本实验难点在于运行时间比较长,跑一次都快一天了,并且我还要验证各种代价函数的对错,所以跑了很多次. 实验内容:Exercise:Independent Component Analysis.从数据库Sampled 8x8 patches from the STL-10 dataset…

Deep Learning 12_深度学习UFLDL教程：Sparse Coding_exercise（斯坦福大学深度学习教程）

前言 理论知识:UFLDL教程.Deep learning:二十六(Sparse coding简单理解).Deep learning:二十七(Sparse coding中关于矩阵的范数求导).Deep learning:二十九(Sparse coding练习) 实验环境:win7, matlab2015b,16G内存,2T机械硬盘 本节实验比较不好理解也不好做,我看很多人最后也没得出好的结果,所以得花时间仔细理解才行. 实验内容:Exercise:Sparse Coding.从10张512*51…

Deep Learning 11_深度学习UFLDL教程：数据预处理（斯坦福大学深度学习教程）

理论知识:UFLDL数据预处理和http://www.cnblogs.com/tornadomeet/archive/2013/04/20/3033149.html 数据预处理是深度学习中非常重要的一步!如果说原始数据的获得,是深度学习中最重要的一步,那么获得原始数据之后对它的预处理更是重要的一部分. 1.数据预处理的方法: ①数据归一化: 简单缩放:对数据的每一个维度的值进行重新调节,使其在 [0,1]或[ − 1,1] 的区间内 逐样本均值消减:在每个样本上减去数据的统计平均值,用于平稳的数…

Deep Learning 10_深度学习UFLDL教程：Convolution and Pooling_exercise（斯坦福大学深度学习教程）

前言 理论知识:UFLDL教程和http://www.cnblogs.com/tornadomeet/archive/2013/04/09/3009830.html 实验环境:win7, matlab2015b,16G内存,2T机械硬盘 实验内容:Exercise:Convolution and Pooling.从2000张64*64的RGB图片(它是the STL10 Dataset的一个子集)中提取特征作为训练数据集,训练softmax分类器,然后从3200张64*64的RGB图片(它是th…

Deep Learning 9_深度学习UFLDL教程：linear decoder_exercise（斯坦福大学深度学习教程）

前言 实验内容:Exercise:Learning color features with Sparse Autoencoders.即:利用线性解码器,从100000张8*8的RGB图像块中提取颜色特征,这些特征会被用于下一节的练习 理论知识:线性解码器和http://www.cnblogs.com/tornadomeet/archive/2013/04/08/3007435.html 实验基础说明: 1.为什么要用线性解码器,而不用前面用过的栈式自编码器等?即:线性解码器的作用? 这一点,Ng…

用命令访问D:\python学习\wendjia教程\aa.py

用命令访问D:\python学习\wendjia教程\aa.py d:                                -----------切换到D盘 cd python学习\wendjia教程         -----------找到D盘的文件夹 python aa.py                      -----------找到文件夹中的aa.py文件…

git学习基础教程

分享一个git学习基础教程 http://pan.baidu.com/s/1o6ugkGE 具体在网盘里面的内容..需要的学习可以直接下.…

《Python爬虫学习系列教程》学习笔记

http://cuiqingcai.com/1052.html 大家好哈,我呢最近在学习Python爬虫,感觉非常有意思,真的让生活可以方便很多.学习过程中我把一些学习的笔记总结下来,还记录了一些自己实际写的一些小爬虫,在这里跟大家一同分享,希望对Python爬虫感兴趣的童鞋有帮助,如果有机会期待与大家的交流. 一.Python入门 1. Python爬虫入门一之综述 2. Python爬虫入门二之爬虫基础了解 3. Python爬虫入门三之Urllib库的基本使用 4. Python爬虫入门四…

测试开发学习进阶教程 视频&PDF

测试开发学习进阶教程 视频&PDF,7天后失效,更多学习资料加Q群 https://pan.baidu.com/s/196KEo791NeZKyfV_E-36Uw 提取码: 41vu     python/Java接口测试.性能调优分析.多线程并发.Jvm优化.Java高并发.目录如下:   视频教程,协议测试,教程视频,性能优化,协议测试,接口测试,性能调优,测试开发 https://blog.csdn.net/weimjsam/article/details/88659659…

基于TensorFlow的深度学习系列教程 2——常量Constant

前面介绍过了Tensorflow的基本概念,比如如何使用tensorboard查看计算图.本篇则着重介绍和整理下Constant相关的内容. 基于TensorFlow的深度学习系列教程 1--Hello World! 常量的概念 在tensorflow中,数据分为几种类型: 常量Constant.变量Variable.占位符Placeholder.其中: 常量:用于存储一些不变的数值,在计算图创建的时候,调用初始化方法时,直接保存在计算图中 变量:模型训练的参数,比如全连接里面的W和bias 占…

[转]《Python爬虫学习系列教程》

<Python爬虫学习系列教程>学习笔记 http://cuiqingcai.com/1052.html 大家好哈,我呢最近在学习Python爬虫,感觉非常有意思,真的让生活可以方便很多.学习过程中我把一些学习的笔记总结下来,还记录了一些自己实际写的一些小爬虫,在这里跟大家一同分享,希望对Python爬虫感兴趣的童鞋有帮助,如果有机会期待与大家的交流. 一.Python入门 1. Python爬虫入门一之综述 2. Python爬虫入门二之爬虫基础了解 3. Python爬虫入门三之Urlli…

Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效果如下 修改前: /// <summary> /// 条形码 /// </summary> public List<GoodsBarcodeEditModel> Barcodes { get; set; } 修改后: /// <summary> /// 条形码…

docker系统化学习图文教程

1.背景 在实际开发中我们经常遇到这样的情况: 1.开发的时候测试好的程序已发布到线上就出问题: 2.线上的集群环境需要扩容时非常麻烦,比如说要装jdk.mysql.redis等,如果扩容100台服务器,简直是要崩溃的感觉: 那么有没有这样一个工具,直接把我线下的环境(代码+运行环境)直接打包到线上运行,这样就避免了环境不一样和安装环境麻烦的事情,因此docker就挺身而出,来解决这个棘手的问题. 2.简介 docker官方网站:https://www.docker.com 源码:https:/…

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…