webgl
关注
分享
扫一扫
A873054267
这个作者很懒，什么都没留下…
展开
-
webgl2 实现msaa
官网上的示例加了许多新东西，不太利于理解，因此自己重新实现了一遍主要就是renderbuffer后进行blit的操作。直接替换掉 webgl指南源码中的framebufferObject中的代码即可，将context改为webgl2// HelloQuad.js (c) 2012 matsuda// Vertex shader program//顶点坐标，纹理坐标，模型视图矩阵，将顶点着色器中的纹理坐标传递给片元v_TexCoord纹理坐标var m_VSHADER_SOURCE =原创 2021-05-15 18:30:53 · 1031 阅读 · 0 评论 -
three.js添加鼠标交互
目前主要是引入OrbitControls.js进行控制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/three.min.js"></script> <script src="../js/OrbitCo..原创 2020-06-03 09:17:45 · 1242 阅读 · 0 评论 -
webgl draw_buffers mrt
主题逻辑与framebuffer的实现没有什么区别，主要的区别在于初始化frameuffer时，要调用draw_buffers，着色器中使用gl_fragData数组开启扩展，渲染流程如下：shader部分初始化帧缓冲区部分使用texture部分原始代码 (本文所用的代码均截至webgl指南源码的framebufferObjects中，可以用下面代码直接替换原书中的代码即可)// HelloQuad.js (c) 2012 matsuda//...原创 2021-04-16 16:42:05 · 819 阅读 · 0 评论 -
化繁为简 -webgl -framebuffer的使用
fbo在webgl中很常见，但在cesium的开发工作中基本用不到，而源码修改时，这又是必经的一条道，因此，转头回去学习了一下fbo的使用；由于原文的fbo使用了贴图，相对复杂，不利于理解，本人在理解的时候就移除了部分内容；fbo一词尝与离屏渲染相关联，webgl系统默认绑定的是窗口缓冲区，即绑定的shaderprogram会把对应的数据直接绘制到屏幕上，但是很多时候，绘制的直接结果不是我们想要的，因此可以使用fbo即帧缓冲区。渲染流程图，实际上渲染到fbo与渲染到屏幕上的流程没有任何差异...原创 2021-04-16 14:45:08 · 1759 阅读 · 1 评论 -
gltf数据结构
原创 2020-12-30 18:44:14 · 390 阅读 · 0 评论 -
图片增加水印-基于canvas实现
有一个需求是在前端渲染机器学习的结果，传过来的是图片和识别的像素坐标，这样我们就需要在图片上进行绘制。原理就是将canvas叠在图像之上，然后利用canvas的绘图函数进行绘制。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrapp原创 2020-07-30 17:35:43 · 417 阅读 · 0 评论 -
three.js 光锥
走到后面，发现其实好多效果都是贴图实现的，光锥也不例外，实现原理是通过两个相互垂直的平面+渐变贴图实现的 let texture = new THREE.TextureLoader().load('./lightray_yellow.jpg'), material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, ...原创 2020-07-10 13:41:44 · 1170 阅读 · 0 评论 -
three.js 流动线shader实现方式（伪）
原文来至，在原文的基础上，优化了一些逻辑https://blog.youkuaiyun.com/weixin_43842660/article/details/97940152<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/three.min..原创 2020-07-02 11:58:57 · 2799 阅读 · 1 评论 -
three.js lensare光源
一般用来模拟太阳光光晕效果：其实从调用的逻辑来推测（没看过源码），就是贴图，将太阳、光线、光晕分别沿 点光源起点和target这条直线贴核心逻辑，由于示例中的光线贴出来是横向的，因此直接抹去 // 添加 lens flares const textureLoader = new THREE.TextureLoader(); textureLoader.load("../images/lensflare0.png",textureFlare0=> {原创 2020-06-30 10:33:45 · 404 阅读 · 0 评论 -
three.js 后处理 理解
后处理的效果也实现了几种了，但仅限于cv，都还未做理解，借着对自定义shader的实现，谈谈对后处理接口的使用理解。要实现后处理效果，应有3个步骤1:初始化后处理的入口，即 new THREE.EffectComposer(renderer); 后处理的基础包，使用它来渲染场景、应用通道和输出结果。2var renderPass = new THREE.RenderPass(scene, camera);该通道会在当前场景和摄像机的基础上渲染出一个新场景，可以理解为保存当前的场景3...原创 2020-06-29 18:04:53 · 976 阅读 · 0 评论 -
three.js 后处理-自定义shader 扫光效果
先上效果吧shader来源于https://www.cnblogs.com/eco-just/p/11667713.html源代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="ren.原创 2020-06-29 17:46:57 · 1626 阅读 · 0 评论 -
three.js 选中效果
function initThree(elid) { let scene,camera ,renderer,viewer,el viewer={} el = document.getElementById(elid) const width = el.offsetWidth, height = el.offsetHeight,asp = width / height renderer = new THREE.WebG..原创 2020-06-24 11:41:07 · 1015 阅读 · 0 评论 -
three.js中使用html2canvas
其核心是基于材质可以使用canvas，这样所有的html元素都可以作为geometry的材质来使用 document.body.insertAdjacentHTML('beforeend', "<div class='capture'> Hello world!</div>") const element = document.body.lastChild element.style.zIndex = -1 html2canvas(element,{原创 2020-06-24 11:11:22 · 875 阅读 · 0 评论 -
three.js动态扩散圆
主要就是用圆柱体的API，贴图过后，动态改变其scale就行了，下面是所用的图片，也是渐变的 function transparentObject(geometry, material) { var obj = new THREE.Object3D(); var mesh = new THREE.Mesh(geometry, material); mesh.material.side = THREE.BackSide;..原创 2020-06-22 15:07:22 · 3869 阅读 · 2 评论 -
three.js后处理之FXAA 抗锯齿
引入的js<script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../../plugins/CopyShader.js"></script><script src="原创 2020-06-17 13:59:10 · 2888 阅读 · 0 评论 -
three.js后处理之 BokehPass 背景虚拟化，模糊
引入的js<script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../../plugins/CopyShader.js"></script><script src="原创 2020-06-17 13:46:47 · 1579 阅读 · 0 评论 -
three.js后处理之 afterimage-运动幻影效果
使用的js<script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../../plugins/CopyShader.js"></script><script src="..原创 2020-06-17 13:37:49 · 757 阅读 · 0 评论 -
three.js后处理之 聚焦效果focus
类似于舞台聚光灯的效果引入的js<script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../../plugins/CopyShader.js"></script>.原创 2020-06-17 11:42:43 · 1498 阅读 · 0 评论 -
three.js后处理之bloom 泛光
引入文件<script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../../plugins/CopyShader.js"></script><script src=".原创 2020-06-16 17:51:20 · 2369 阅读 · 0 评论 -
three.js后处理之outline
three的后处理接口相较于cesium来说复杂的多，要引入5个js，这些js具体是干啥的，还没去看，先实现吧<script src="../../plugins/EffectComposer.js"></script><script src="../../plugins/CopyShader.js"></script><script src="../../plugins/RenderPass.js"></script>原创 2020-06-16 16:26:58 · 1659 阅读 · 0 评论 -
three.js飞线--适用于迁徙图
https://github.com/ecojust/flyline记录一下、原创 2020-06-14 16:28:15 · 1583 阅读 · 0 评论 -
three.js光效扫描
<script src="../../plugins/ys/ys.min.js"></script><script src="../../plugins/threeLibrary/three.min.js"></script><script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script><script src="../.....原创 2020-06-14 16:22:04 · 3907 阅读 · 2 评论 -
three.js使用shader材质
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/three.min.js"></script> <script src="../js/OrbitControls.js"></script> <.原创 2020-06-14 15:24:14 · 768 阅读 · 0 评论 -
three.js流动线
此功能借助meshline插件来实现最为简便，初学就暂不探究其原理了。github地址： https://github.com/spite/THREE.MeshLine本文主要学习了跃焱邵隼作者的源代码，但由于作者已将自己的插件一步一步壮大，导致初学时，无法准确切入到核心，因此特别记录一下。https://www.wellyyss.cn/ysThree/main/app.html效果先看最基本的 function initThree(el, options) { ..原创 2020-06-14 14:30:21 · 5700 阅读 · 4 评论 -
three.js 创建线
初学three，发现创建线的代码有一些区别，以下两种方式可以发现，最后实际上都是以line来构建渲染对象最终，添加到scene中还有一种方式是直接根据mesh来创建，目前还无法掌握，暂不列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/thr原创 2020-06-08 09:04:54 · 816 阅读 · 0 评论 -
shdertoy学习系列4- 雷达（2）
上文中的雷达仅绘制了圆边和扫描线，渐变区域还未添加#define PI 3.1415926535897932384626433832795// 绘制线，传入参数，圆心，线的终点， 片元坐标float LineToPointDistance2D( vec2 a, vec2 b, vec2 p){ vec2 pa = p - a; //片元坐标-圆心坐标 vec2 ba = b - a; // 线终点坐标-圆心坐标 //片元坐标到圆心的距离/半径 flo原创 2020-05-25 11:45:20 · 440 阅读 · 0 评论 -
shadertoy学习2 -全局变量学习
初学shader，有很多陌生的知识，一步步记录吧；iResolution: 指的是canvas的分辨率 例如指定canvas大小为 width:800,height:600，则iResolution.x为800;iTime : 着色器已经运行的时间，以秒为单位fragCoord: 片元坐标，非归一化的fragCoord 调试：Itime调试图：iResolution调试：...原创 2020-05-25 11:06:50 · 917 阅读 · 0 评论 -
shdertoy学习系列3 雷达（一）
源码链接：https://www.shadertoy.com/view/XdsXRf#define PI 3.1415926535897932384626433832795// 绘制线，传入参数，圆心，线的终点， 片元坐标float LineToPointDistance2D( vec2 a, vec2 b, vec2 p){ vec2 pa = p - a; //片元坐标-圆心坐标 vec2 ba = b - a; // 线终点坐标-圆心坐标 //...原创 2020-05-25 11:06:27 · 512 阅读 · 0 评论 -
shadertoy学习1 -hello shadertoy
void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec2 uv = fragCoord/iResolution.xy; if(uv.x*uv.x+uv.y*uv.y>0.01){ fragColor =vec4(1.0,0.1,0.1,1.0); } els...原创 2020-04-14 17:22:00 · 584 阅读 · 1 评论 -
webgl阴影 shadowmap 实现原理
由于一直没搞明白cesium中可视域分析是怎么完成的，因此转而研究webgl中阴影的实现，然后去理解cesium中shadowmap的实现原理，（cesium可视域分析就是基于shadowmap来完成的）。由于看webgl的时候跳过了一些高级技术，导致在学习阴影这个demo时，出现了一些问题；因此在学习一些关联模块时，顺便也记录一下学习的历程。第一个重要的技术就是离屏绘制。...原创 2020-04-14 11:12:15 · 2444 阅读 · 0 评论 -
webgl 指南 click points
// ClickedPints.js (c) 2012 matsuda// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n' + ' gl_PointSize = 10.0...原创 2020-04-08 16:56:02 · 359 阅读 · 0 评论 -
webgl 指南- 补全缺掉的角案例分析
本案例提出设置投影矩阵，将far扩大可解决三角形缺掉一角的问题但实际上由于视角在改变的过程中，视线会延伸至无限远处，所以无论怎么设置far，都会导致角在表面上缺失。只不过是消失的时刻来的快慢而已。...原创 2019-12-18 16:35:21 · 256 阅读 · 0 评论 -
webgl学习系列--3 三维模型的加载原理
初识webgl时，一直很好奇，三维模型是如何加载显示的呢。其实计算机是“很蠢”的，只认识二进制的数据。而对于人和计算机交互的一个中间数据那就是json和图片。其实三维模型的加载也基本是这两种数据。那么就有疑问了，三维模型包括很多种数据格式，常见的如dae、obj、b3dm。这些数据通常我们用文本格式打开都是乱码。这如何解释呢。第一个疑问：数据格式是不同行业应用造成的，但是他们都遵循...原创 2019-05-27 11:10:46 · 1731 阅读 · 0 评论 -
webgl学习系列--2 初识three.js
依据第一节的原理，可以看出基于three.js的三维与纯webgl的逻辑大致是相同的，但是three.js帮我们省去了很多工作，这就是框架的意义。构建顺序：获取canvas元素；创建three渲染器创建三维场景设置画图区域及容器大小。创建相机、光源、纹理渲染场景，加载下一帧。requestAnimationFrame()函数目前还不能理解，将此函数放在onload中...原创 2019-05-26 11:02:23 · 221 阅读 · 0 评论 -
webgl学习系列--1 hello webgl
首先来看webgl的工作流程1 创建画布元素--也就是canvas元素2 获取画布上下文3 初始化视口4 创建渲染数据5 创建转换矩阵6 着色器绘制算法7 使用参数初始化着色器8 绘制。解释：1 2自然不用说3 想象我们会如何去画图。由于我们拿到的是整个canvas，绘图要有一个指定的区域和开始的起点。因此需要指定绘图的范围和下笔的那一点，webg...原创 2019-05-06 10:51:19 · 319 阅读 · 0 评论