之后可能会做一个类似全景导航的项目，最近手里没活，就调研一下怎么做； 参照demo：是贝壳找房“VR看房”中的全景模式 全景图效果，网上有很多叫天空盒（SkyBox）的，不知这个名字从何而来； 简介 单纯的做全景图效果，方法比较多，根据几何体结构的不同，分为两种情况： 一种是球面全景图，素材如图1，就是将图片绘制到一个球体上，相机在球体中心，这样就能看到全景图了，具体效果及代码可查看 Threej…
标签： webgl
WebGL笔记（四）GLSL ES 着色器语言
GLSL详细的学习； 一、概述 GLSL ES语言大小写敏感，每一条语句都要以分号结尾； 着色器程序必须有且只有一个 main 函数； 注释，单行注释：// ；多行注释： /* 注释内容 */；这个和js一致； 数据值类型：数值（整型、浮点型）和布尔值（true、false）类型；不支持字符串类型； 变量名：字母、数字和下划线，首字母不能是数字，不能以gl_、webgl_或_webgl_开头，不能…
WebGL笔记（三）纹理
前两篇整理了《WebGL编程指南》的一到四章，笔记的重要性体现出来了，130页的内容，整理到两篇文章中，能非常快的进行回顾或复习或重新学习（长时间不用，大部分知识就忘了，这也是整理笔记的主要原因）； 本篇开始进入第5章“颜色与纹理”； 发生在顶点着色器和片元着色器之间的从图形到片元的转化，又称图元光栅化； 一、varying 变量 作用：从顶点着色器往片元着色器传值； 看下面的顶点着色器和片元着色…
WebGL笔记（一）着色器和缓冲区
《WebGL编程指南》笔记； 之前用 three.js 做了一些效果，有一些地方不是很懂，就想着从头开始学习一下WebGL，也能看看 three.js 到底封装了哪些操作； 本文主要记录了WebGL基础、着色器和缓冲区相关知识； 1、基础 1.1、着色器语言 WebGL 是从 OpenGL ES 2.0 派生出来的，OpenGL ES 是 OpenGL 的一个特殊版本，移除了 OpenGL 中的一…
WebGL笔记（二）变换
变换包括平移、旋转、缩放等，单纯地用数学表达式可以实现变换功能，但遇到复杂的变换，数学表达是就有些吃力了，这时候变换矩阵就派上了用场；下面用这两种方式分析一下变换的基本原理； 一、数学表达式 查看平移、旋转、缩放的demo请点击这里； 1、平移 顶点着色器代码 上面的代码表示以 a_Position 坐标为基准，移动 u_Transition 这个向量，a_Position 和 u_Transit…