2019年09月_卜若

原创卜若的代码笔记-webgl系列-第二十七章：熟练应用A-粒子

1 当你一步一步的看完博客之后，你将从一只脆弱的蚂蚁变成一只强壮的蚂蚁，这一章我们将会创建粒子，也就是俗称精灵的东西：1.1 第一种写法，Three.js自带的，也就是不用shader的直接代码咯：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

2019-09-26 13:41:05 125

原创卜若的代码笔记-webgl系列-第二十六章：glsl的应用(六)>通过attribute实现光标追踪

1 我现在需要去绘制一个圆，一个六边形的圆，需要六个三角形，18个顶点，圆心为动点(x,y)这是一个最简单的图形学绘制问题，我们需要来温习一下极坐标方程现在，我们让z = 0，然后去让deltaTh = 360/6 = 60去创建这18个顶点：...

2019-09-25 15:08:22 319

原创卜若的代码笔记-webgl系列-第二十五章：glsl的应用(五)>glsl的坐标系的补充及上一章的完善

1 webgl坐标系：2 屏幕坐标坐标系3 视口坐标系投影坐标，也就是需要算上摄像机的深度，也就是z轴，因为摄像机是透视的，当它里焦点越远时，可以看到的区域就越宽广，而这个区域是可以计算的：并且，这个坐标系是和webgl坐标系平行的比如，camera的深度 = 20的情况下的坐标系分布：4 shader的逐像素坐标(操作的像素点对应的坐标)配套的...

2019-09-25 14:08:40 348

原创卜若的代码笔记-webgl系列-第二十四章：glsl的应用(四)>使用uniform光标追踪(以及初始场景简介)

1 在第十五章里面，我们讨论了关于uniform限定字的作用，那么接下来呢，我们将会讨论怎么通过uniform去传递鼠标坐标，并且通过shader去渲染出光圈。在此之前，我们先约定一下初始场景1.1 初始标准场景：简单介绍一些环境，因为我对webgl进行了封装，所以，有些代码看不到，但我们这一章主要介绍的shader，所以，我们应该要去掉细枝末节，如果对这一块不了解的建议去看之前的文章。...

2019-09-25 13:41:00 298

原创卜若的代码笔记-webgl系列-第二十三章：glsl的应用(三)>尽可能的去掉白边

1 在二十一章的透明任务中，我们发现白边很多所以现在需要解决这个问题，在二十一章中的主要算法是判断该像素如果为白色，则认为要透明，现在我们通过阈值去进行判断，如果接近白色，就进行透明： <script id="fragment_shader" type="x-shader/x-fragment"> uniform sampler2D ...

2019-09-22 21:28:19 295

原创卜若的代码笔记-webgl系列-第二十二章：glsl的应用(二)>利用shader让图像旋转

1 在上一章中，我们发现了一个奇怪的bug，我们的图像居然是反的！！卧槽？？这怎么能忍？主要原因是我没有分配正确的uv，这其实并不重要，我只需要然fragShader里面的uv坐标旋转一下就行啦~旋转公式： float s = sin(coe)*(v_TexCoord.x-0.5)+cos(coe)*(v_TexCoord.y-0.5); ...

2019-09-22 21:15:45 330

原创卜若的代码笔记-webgl系列-第二十一章：glsl的应用(一)>实现透明效果

1 在网页中，我们可能会有这种需求：比如我想让一张图里面指定的某张图片的某些颜色给透明掉：比如：我希望这张图白色部分不可见：如以下效果：那么，我们就可以通过webgl来实现：glsl的基础部分请看前面的系列内如，现在我们单独把shader拎出来讲：首先，要使用透明，那么必然要开启混合： glContext.enable(glContext....

2019-09-22 19:59:04 901

原创卜若的代码笔记-webgl系列-第二十章：glsl探索(八)$webgl中关于纹理的使用$

1 资源的加载 var texture = glContext.createTexture(); // 创建 Image对象 var imgObj = new Image(); // 为 src 属性赋值 imgObj.src = "../../../image/b2.jpg"...

2019-09-19 21:21:23 281

原创卜若的代码笔记-webgl系列-第十九章：glsl探索(七)$关于VertexShader向FragmentShader传递的uv的探索和思考$

1 使用立方体去探索它的uv是一个很复杂的过程，及其变态，所以为了解决这个问题，我们需要去简化它，最简单的方法就是通过三角面去探索这个问题。1.1以下是一个封装好的用于三角面的函数var geometryCache = new Array();function geometryCachePush(vector3) { geometryCache.push(vecto...

2019-09-19 15:50:05 802

原创卜若的代码笔记-webgl系列-第十八章：glsl探索(六)$VertexShader和FragmentShader之间的桥梁Varying$

1 Varying是一座桥梁，它沟通了VertexShader和FragmentShader如图所示：啊...这张图实在是太常见了！我们可以看到的是，从顶点着色器里面输出了varying，然后这个varying又进入了FragmentShader。我们来看一串代码1.1 传递UV由此，我有一个大胆的猜测！其实逐顶点和逐片元是顺序执行的，比如我有...

2019-09-19 13:23:41 397

原创卜若的代码笔记-webgl系列-第十七章：glsl探索(五)$探索二中的gl_PFragColor$

1 接下来我们继续聊gl_FragColor这个东西，不过在此之前，我们得简化一下上面的两个Shader，VertexShader和FragmentShader：我发现我并不需要Varing去让VetexShader和FragementShader去进行通信，所以要他们干嘛！删之 <script id="fragment_shader" type="x-shader/x-fr...

2019-09-19 13:03:35 320

原创卜若的代码笔记-webgl系列-第十六章：glsl探索(四)$探索二中的gl_Position$

1 随着探索的深入，我们逐渐的不可避免的需要去逛网站了...不过在此之前，我们还是回顾一下渲染过程里面的坐标变换吧...这张图很典型了：举个例子现在，我输入一组顶点到glsl中，这组顶点是组成了一个Cube但是，这个Cube应该显示在哪个地方呢？所以，[Cube]*[x,y,z,w]'这个过程就叫做模型变换model transform然后就是摄像机开始捕获...

2019-09-19 12:46:39 929

原创卜若的代码笔记-webgl系列-第十五章：glsl探索(三)$第探索二中的uniform$

1 先来从入口上去解决这些问题：1.1 uniformuniform是啥？在探索一种其实有比较明确的解释，这里有了例子，我们再重写回顾一下这个过程：它是一种存储限定字：可以理解为一种存储变量的方法，也可以理解为外部世界和内部的Shader世界进行交互interact的接口！我们来看这张图：在这张图里面呢，是不是要将uniform变量输入进去？是哒！没错，u...

2019-09-19 10:46:32 192

原创卜若的代码笔记-webgl系列-第十四章：glsl探索(二)$第一个shader$

1 第一个shader应该在第四章的时候，就应该生出来了，但是，那个时候我太菜了，现在貌似懂一点，终于可以写一个简单的shader了。1.1 先介绍一个Shader函数入口<-基于Three.jsvar material = new THREE.ShaderMaterial({ uniforms: params, ...

2019-09-19 10:22:24 393

原创卜若的代码笔记-webgl系列-第十三章：glsl探索(一)$glsl基础$

1 顶点shader：VertexShader主要功能1.1使用模型视图以及投影矩阵进行顶点变换1.2 法线变换及归一化1.3 纹理坐标生成和变换1.4 逐顶点或者逐像素光照计算1.5 颜色计算需要注意的是，顶点处理器在没有被指定之前呢，是属于固定管线的范畴，一旦你指定了相关的顶点处理器之后呢，就意味着，必须按照顶点处理器的处理来干活了2片元着色器fragm...

2019-09-19 09:40:48 255

原创卜若的代码笔记-netty系列-第X-1章：MessageEvent，WebSocketFrame，ChannelBuffer对象

1 当你建立Websocket链接，并使用Netty作为服务器程序时，通常会使用WebSocketFrame去处理接收的数据帧。1.1 获取数据帧：e:MessageEvent//MessageEvent，前端向后端发送请求，数据会缓存在这个类中Object msg = e.getMessage()WebSocketFrame rq = (WebSocketFrame)msg;...

2019-09-15 13:49:52 361

原创卜若的代码笔记-webgl系列-第十二章：帧率的计算

1 帧率是一个非常重要的东西1.1 举个栗子我们在做一款网络游戏，两个角色A和B需要同步，我们设定了相同的速度100，如果没有使用帧率去约束它一秒走的路层，那么我这个144hz的电脑就牛逼了，我1s走14400m，而你才是60hz帧率，就会产生...你1s才走了6000m？？肯定有猫病啊！要怎么解决呢，其实很简单,就代表你我1s走的路程总是一样的这样，我们就能够完成即使我们...

2019-09-14 11:51:08 429

原创卜若的代码笔记-webgl系列-第十一章：Three.js里面的碰撞检测

1 原理通过射线去监听一个动态的坐标(比如你的角色的移动)，当你的角色移动到如图所示的位置在这里呢，就是你的贪吃蛇的head，碰撞到了一个红色的箱子。接下来呢，它的坐标传递给射线，然后摄像机就向着这个地方发射一条射线，射线就会穿过一组物体，这一组就是允许探测的物体，接着，返回穿过的信息，如果存在信息，就表明发生了碰撞。以下是示例代码： var point = new...

2019-09-14 11:15:21 652 4

原创卜若的代码笔记-webgl系列-第十章：在Webgl场景里面添加UI

1 首先你必须要了解，在html里面2d才是爸爸，canvas只是提供了一个绘制的容器，所以，在webgl里面提供标签，本质其实是...canvas和html 的dom元素的联合显示：最简单的例子：本质上是两个div的叠加，一个div存放canvas，另外一个div存放的是UI，当然咯，两个要联合显示，需要一点点style 的设置： <div > ...

2019-09-12 15:23:15 322

原创卜若的代码笔记-webgl系列-第九章：屏幕坐标和世界坐标的转化

1 什么是世界坐标：需要注意的一点是：我们所能看到的3D世界其实是裁剪后的世界：下图是一张非常经典的图：这个世界坐标其实更为复杂，在这篇博客里面并不讨论这种情况，我们讨论的是另外一种情况，也就是摄像机垂直的情况：绿色的是视锥体，蓝色的则是观察平面，那么，其实，屏幕坐标就是webgl坐标，在第8章有提到一张典型的图，它的坐标划分其实如此：我只需要计算出，视锥体和...

2019-09-12 14:22:38 409

原创卜若的代码笔记-webgl系列-第八章：交互，racast初步

1.将绝对坐标和webgl坐标进行变换2 使用raycast3 Control Demo: //用来保存鼠标坐标信息 var mouse = new THREE.Vector2(); //添加鼠标移动事件，检测鼠标的移动 document.addEventListener('mousemove', onDocumentMouseMove...

2019-09-11 14:09:42 204

原创卜若的代码笔记-webgl系列-第七章：光源初步(一个Cube怎么去接收光源)

1 在webgl里面假设要使用一个光源，你需要：1.1 一个光源var light = new THREE.AmbientLight( 0xff0000 );1.2 在场景中添加光源scene.add(light);1.3 你要接收光源的物体，比如一个cube必须要是能够使用光源的材质，比如这种：MeshLambertMaterial这是我封装的光照材质的Cube...

2019-09-11 12:16:30 168

原创卜若的代码笔记-webgl系列-第六章：通过按键让你绘制的立方体移动

1 上下文代码<!DOCTYPE html><html><head> <title>webgl</title> <script src="../ThreeJSLib/three.js"></script> <script src="stats.js"></scri...

2019-09-10 10:30:07 195

原创卜若的代码笔记-webgl系列-第五章：使用threejs库画出一个万花筒

1 效果展示2 代码2.1 上下文<!DOCTYPE html><html><head> <title></title><!-- <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js">&l...

2019-09-09 19:18:42 240

原创卜若的代码笔记-webgl系列-第三章：几何渲染Rendering Geometry

1 在webgl里面表述几何体最关键的两种数据类型：顶点和索引(vertices and indices.)1.1 顶点是什么？顶点定义了3D对象的角点，每一个顶点由三个元素组成x,y,z。在webgl里面，它没有传递单独顶点到渲染管道的API，只能够传一组顶点去让webgl渲染管道执行渲染，而这个数组的通常是由JavaScript Array完成的。1.2 索引是什么？...

2019-09-09 15:52:31 324

原创卜若的代码笔记-webgl系列-第四章：适用threejs库创建你的第一个Cube

1 非常不好意思，因为在下实在是太菜了，所以只能先使用threejs了你如果要使用three.js请先下载这个库2 让我们建立我们的第一个demo2.1 View三要素：Scene,Camera,Renderer:function create(div) { var scene = new THREE.Scene(); var camera = new THRE...

2019-09-09 15:51:17 299

原创卜若的代码笔记-webgl系列-第二章：第一个webgl的demo

1.Webgl的组成：1.1 canvas：canvas是啥玩意？它是就是你的html里面去用于渲染的一块地方。在JS里面时一个DOM元素，就非常像我们的Unity里面的GameObject对象的子类Canvas对象1.2 Objects:一个渲染常见RenderScene里面的组成元素比如一个圆柱体，一个球体，这种体就是Objects。1.3 Lighting：...

2019-09-06 12:53:30 430

原创卜若的代码笔记-unityshader系列-unityshader入门精要读书笔记-第一天

该系列内容均来自冯乐乐大佬撰写的Unity入门精要仅做交流学习，不做商业用途，特此声明，在今后的章节中将不做赘述。1.什么是渲染流水线？计算机将一系列的顶点数据，纹理数据转化为一张人眼可以看见的图像的过程，就叫做渲染流水线。2.渲染流水线的过程2.1：应用阶段主要处理哪些事情？1.准备场景数据，摄像机，视锥体的位置，模型，光源2.剔除culling操作，...

2019-09-05 21:02:26 197

原创卜若的代码笔记-webgl系列-第一章：什么是webgl

注：该系列主要是围绕着一本书：Packtpub.WebGL.Beginners.Guide.Jun.2012做读后感，包括代码实现和相关自己的见解。1.渲染是什么:rendering is the process of generating an image from a model by means of computer programs渲染是一个从计算机程序定义的模...

2019-09-04 10:48:43 155

原创卜若的代码笔记-android系列-插件：带图片的Spinner插件

1.该插件是我自己封装了一下，提高用户体验，具体解释请转以下：https://blog.csdn.net/Zaajuan1150/article/details/817048652.插件封装：package com.draw.depp.deeplearningdrawer.Plugins.ImageSpinnerPlugins;import android.content....

2019-09-01 11:23:35 159

qq_37080133的博客