WEBGL学习
关注
分享
扫一扫
高热度网
主要技能：前端、小程序、网站开发，NodeJS全栈技术开发，欢迎交流
展开
-
Blender软件导出的obj数据格式文件内容解读
【cube.obj】# Blender v2.78 (sub 0) OBJ File: ''# www.blender.orgmtllib cube.mtl #这里是引用了一个外部材质文件cube.mtlo Cube #指定了模型名称v 1.000000 -1.000000 -1.000000 #开始按照如下格式定义顶点坐标，v x y z [w], 共计定义了立方体的八个顶点...原创 2018-01-12 22:02:47 · 7497 阅读 · 1 评论 -
WEBGL学习【十四】利用HUD技术在网页上方显示三维物体
关键点：<!--实现原理：要保证这两个canvas相互重叠;z-index表示了两个画布的上下层关系--><!--是WEBGL的三维图形Canvas（主要用于绘制三维场景）--><canvas id="webgl" width="400" height="400" style="position: absolute; z-index: 0"> ...原创 2018-01-11 16:26:47 · 964 阅读 · 0 评论 -
WEBGL学习【十三】鼠标点击立方体改变颜色的原理与实现
// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'attribute float a_Face;\n' + // 表面的编号（1-6），不能使用int类型（当前顶点属于哪一个表面）【float类型】...原创 2018-01-11 16:13:38 · 721 阅读 · 0 评论 -
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-d...原创 2017-11-12 22:37:04 · 1293 阅读 · 0 评论 -
WEBGL学习【四】模型视图矩阵
<html lang="zh-CN"><!--服务器运行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> ...原创 2017-10-26 12:44:27 · 596 阅读 · 0 评论 -
WEBGL学习【一】初识WEBGL
<html lang="zh-CN"><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> <!--引入需要的库文件--> <script type="text/javascript" src="Oak3D_v_0_5....原创 2017-10-26 12:36:16 · 721 阅读 · 0 评论 -
WEBGL学习【二】平面图形
<html lang="zh-CN"><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> <!--引入需要的库文件--> <script type="text/javascript" src="Oak3D_v_0_5....原创 2017-10-26 12:38:02 · 594 阅读 · 0 评论 -
WEBGL学习【三】颜色选择
<html lang="zh-CN"><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> <!--引入需要的库文件--> <script type="text/javascript" src="Oak3D_v_0_5....原创 2017-10-26 12:43:17 · 419 阅读 · 0 评论 -
WEBGL学习【五】纹理贴图
<html lang="zh-CN"><!--服务器运行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> ...原创 2017-10-26 12:45:44 · 1740 阅读 · 0 评论 -
WEBGL学习【六】动起来的三棱锥和立方体
<html lang="zh-CN"><!--服务器运行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--><head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> ...原创 2017-11-02 20:44:02 · 1487 阅读 · 0 评论 -
WEBGL学习【七】画布绘图
主要是对WEBGL的绘图部分进行了进一步加强的认识和理解<!DOCTYPE HTML><html lang="en"><head> <title>WEBGL高级编程----绘制六边形</title> <meta charset="utf-8"> <script id="shader...原创 2017-11-06 21:16:28 · 874 阅读 · 0 评论 -
WEBGL学习【八】模型视图投影矩阵
<!--探讨WEBGL中不同图形的绘制方法:[待测试2017.11.6]--><!DOCTYPE HTML><html lang="en"><head> <title>WEBGL高级编程----绘制三维场景（变换矩阵）</title> <meta charset="utf-8"> &...原创 2017-11-07 22:35:40 · 623 阅读 · 0 评论 -
WEBGL学习【九】立方体贴不同的纹理
<html><!--开始实现一个三维街景的渲染效果--><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>NeHeWebGL----环境光（光照模型）</title> <meta...原创 2017-11-10 22:15:35 · 2644 阅读 · 1 评论 -
WEBGL学习【十】运动模型
<!DOCTYPE HTML><html lang="en"><head> <title>LWEBGL6.2, Animated WebGL Scene with Key Input.</title> <script src="./lib/webgl-debug.js"></script> ...原创 2017-11-12 17:07:10 · 1759 阅读 · 1 评论 -
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-d...原创 2017-11-12 22:28:26 · 803 阅读 · 0 评论 -
自己对WEBGL坐标系的转换过程的理解【如图】
原创 2017-11-07 16:45:20 · 944 阅读 · 0 评论 -
WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结
实现三维场景载入操作的实现步骤：主要知识点：着色器，纹理贴图，文件载入实现思路：获取canvas，初始化WEBGL上下文信息。主要是实现WEBGL上下文的获取，设置视的大小，此时gl存储了WEBGL的上下文信息初始化着色器初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。原创 2018-02-01 18:56:22 · 3747 阅读 · 0 评论