webgl编程指南学习
关注
分享
扫一扫
文章平均质量分 92
directx3d_beginner
这个作者很懒，什么都没留下…
展开
-
shadowmap2，扩展z值范围
书上是用rgba表示浮点型的z值，扩大了范围，但是大点了也会出问题。以后可能考虑用cascade shadowmap<html><head>11</head><body><canvas id = "test" width = "800" height = "800">canvas </canvas><scri...原创 2019-12-04 17:24:38 · 253 阅读 · 0 评论 -
shadowmap
这个例子其实没什么，主要是要注意光线坐标系的传递，以及纹理的传递1，光源坐标系的传递，主要是要比较深度图的大小 gl.useProgram(program_shadowMap); .... mvpMatrixFromLight_triangle.set(g_mvpMatrix); .... mvpMatrixFromL...原创 2019-12-04 15:44:28 · 340 阅读 · 0 评论 -
渲染到纹理
这节是重点，应该多写写。高级的渲染都要涉及到渲染到纹理。在dx中，初始化设定surface和纹理后，每帧 setrendertarget，获得离屏纹理，然后传递给需要的物体。同样，在webgl中，也是这样，dx中的surface，在webgl称作帧缓冲区对象，后者分为颜色关联对象，深度关联对象和模板关联对象dx中 的texture，在webgl中划分为两部分，纹理对象和渲染缓冲区对...原创 2019-12-03 17:08:24 · 647 阅读 · 0 评论 -
使用不同的渲染
<html><head>11</head><body><canvas id = "test" width = "800" height = "800">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-12-02 22:04:29 · 153 阅读 · 0 评论 -
简易半透明
1,颜色上加alpha通道2，关闭消隐面隐藏功能注释掉 //gl.enable(gl.DEPTH_TEST);3，开启混合gl.enable(gl.BLEND);4，设置混合参数gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);代码如下：<html><head>11&l...原创 2019-11-29 14:29:20 · 165 阅读 · 0 评论 -
雾化（使用w分量）
<html><head>11</head><body><canvas id = "test" width = "800" height = "800">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-29 11:47:33 · 336 阅读 · 0 评论 -
雾化
<html><head>11</head><body><canvas id = "test" width = "800" height = "800">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-29 11:23:40 · 175 阅读 · 0 评论 -
每帧旋转
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-21 15:57:34 · 525 阅读 · 0 评论 -
逐片元光照
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-21 14:48:05 · 219 阅读 · 0 评论 -
点光源
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-21 14:09:38 · 301 阅读 · 0 评论 -
旋转后计算法线
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-21 11:53:05 · 355 阅读 · 0 评论 -
环境光+散射光
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-21 11:16:44 · 469 阅读 · 0 评论 -
漫反射
主要是方向的确定<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script...原创 2019-11-21 09:26:07 · 203 阅读 · 0 评论 -
纯白色正方体
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 18:45:15 · 334 阅读 · 0 评论 -
索引缓冲区和顶点缓冲区
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 18:32:44 · 398 阅读 · 0 评论 -
设置多边形偏移
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 17:09:42 · 682 阅读 · 0 评论 -
清除深度缓存
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 16:55:56 · 421 阅读 · 0 评论 -
模型视图投影矩阵传递
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 16:36:15 · 191 阅读 · 0 评论 -
拆分模型坐标系
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 16:24:07 · 206 阅读 · 0 评论 -
透视投影
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 14:59:45 · 139 阅读 · 0 评论 -
修改正交投影宽高比
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-11-20 14:36:09 · 168 阅读 · 0 评论 -
以投影坐标系和摄像机坐标系相乘，进行
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script>&l...原创 2019-11-20 14:32:02 · 186 阅读 · 0 评论 -
正射投影矩阵
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script>&l...原创 2019-11-20 14:18:11 · 826 阅读 · 0 评论 -
传递摄像机矩阵和世界矩阵的乘积构成的矩阵
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-10-12 14:37:53 · 108 阅读 · 0 评论 -
传递世界坐标系和摄像机坐标系到shader
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-10-12 11:45:14 · 239 阅读 · 0 评论 -
多重纹理
<html><head>11</head><body><canvas id = "test" width = "500" height = "500">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-10 18:13:26 · 203 阅读 · 0 评论 -
创建纹理
<html><head>11</head><body><canvas id = "test" width = "500" height = "500">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-10 16:15:58 · 305 阅读 · 0 评论 -
带颜色三角形
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-10 11:19:45 · 246 阅读 · 0 评论 -
变化每个顶点的颜色
首先，还是要用缓存区偏移。传递颜色时，由于颜色不同，故用attribute，再用varying传递到片元着色器<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><scrip...原创 2019-10-10 09:56:06 · 150 阅读 · 0 评论 -
用缓冲区偏移量绘制顶点集的坐标和大小
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-10 09:32:20 · 167 阅读 · 0 评论 -
绘制不同缓冲区
主要是点集合的大小和位置两个不同<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderSource =...原创 2019-10-09 20:36:49 · 258 阅读 · 0 评论 -
用matrix类旋转平移缩放
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...原创 2019-10-09 18:39:43 · 532 阅读 · 0 评论 -
旋转放缩平移矩阵
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-09 17:32:52 · 316 阅读 · 0 评论 -
绘制点集
<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderSource = 'attribute vec4...原创 2019-10-09 16:07:47 · 437 阅读 · 0 评论 -
传递颜色
由于颜色在片元着色器中，故不能用attribute,用uniform得到并传递<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器...原创 2019-10-09 15:11:33 · 451 阅读 · 0 评论 -
传递点的大小
仍然用attribute，因为是顶点着色器，<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var vertexShaderS...原创 2019-10-09 14:43:07 · 105 阅读 · 0 评论 -
webgl编程指南学习，传递坐标
这个例子也有错误，本来是program,却写成了gl.program,故更改，上代码。吐槽下，翻译的大哥们，认真点不好么？<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas>&l...原创 2019-10-09 14:25:59 · 173 阅读 · 0 评论 -
webgl学习画点
看了几本书，都是来回调用各种文件，故记录下，不难，但是麻烦。下次直接拷贝<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script >//顶点着色器var ve...原创 2019-10-09 13:54:43 · 208 阅读 · 0 评论