; The below sample group section shows all possible group values, ; create one or more 'real' group: sections to create "heterogeneous" ; process groups.
参数：type; （class&id） 参数：name; 参数：index；（数字） 含义：如果说 gihubcalendar 是一幅画，那么这个 layout 就是指定了哪面墙来挂画 而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。 其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。 最后墙的名字即是 name;
Symbol 是 ES6 中引入的新类型，它是一切非字符串的对象 key 的集合，在 ES6 规范中，整个对象系统被用 Symbol 重塑。在后面的文章中，我会详细叙述 Symbol 跟对象系统。这里我们只介绍 Symbol 类型本身：它有哪些部分，它表示什么意思，以及如何创建 Symbol 类型。Symbol 可以具有字符串类型的描述，但是即使描述相同，Symbol 也不相等。
Object
Object 是 JavaScript 中最复杂的类型，也是 JavaScript 的核心机制之一。Object 表示对象的意思，它是一切有形和无形物体的总称。 在 JavaScript 中，对象的定义是“属性的集合”。属性分为数据属性和访问器属性，二者都是 key-value 结构，key 可以是字符串或者 Symbol 类型。 我们必须认识到 3 与 new Number(3) 是完全不同的值，它们一个是 Number 类型， 一个是对象类型。 Number、String 和 Boolean，三个构造器是两用的，当跟 new 搭配时，它们产生对象，当直接调用时，它们表示强制类型转换。Symbol 函数比较特殊，直接用 new 调用它会抛出错误，但它仍然是 Symbol 对象的构造器。
var imgDataPath = "/blog/photos/photos.json"; //图片名称高宽信息json文件路径 var imgPath = "https://cdn.jsdelivr.net/gh/Cenergy/images/gallery/"; //图片访问路径 var imgMaxNum = 50; //图片显示数量
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (windowWidth < 768) { var imageWidth = 145; //图片显示宽度(手机端) } else { var imageWidth = 250; //图片显示宽度 }
工厂模式用来创建不同但是相关类型的对象（继承同一父类或者接口的一组子类），由给定的参数来决定创建哪种类型的对象。实际上，如果创建对象的逻辑并不复杂，那我们直接通过 new 来创建对象就可以了，不需要使用工厂模式。当创建逻辑比较复杂，是一个“大工程”的时候，我们就考虑使用工厂模式，封装对象的创建过程，将对象的创建和使用相分离。当每个对象的创建逻辑都比较简单的时候，我推荐使用简单工厂模式，将多个对象的创建逻辑放到一个工厂类中。当每个对象的创建逻辑都比较复杂的时候，为了避免设计一个过于庞大的工厂类，我们推荐使用工厂方法模式，将创建逻辑拆分得更细，每个对象的创建逻辑独立到各自的工厂类中。
Graphic cards (GPUs) have special memory types for images. Usually on CPUs images are stored as arrays of bytes but GPUs store images as sampler2D which is more like a table (or matrix) of floating point vectors. More interestingly, the values of this table of vectors are continuous. That means that values between pixels are interpolated in a low level.
In order to use this feature we first need to upload the image from the CPU to the GPU, to then pass the id of the texture to the right uniform. All that happens outside the shader.
Once the texture is loaded and linked to a valid uniform sampler2D you can ask for specific color value at specific coordinates (formated on a vec2 variable) using the texture2D() function which will return a color formatted on a vec4 variable.
1
vec4texture2D(sampler2Dtexture, vec2 coordinates)
Check the following code where we load Hokusai’s Wave (1830) as uniform sampler2D u_tex0 and we call every pixel of it inside the billboard:
If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right? Textures coordinates are consistent with the rest of the things we had seen and their coordinates are between 0.0 and 1.0 which match perfectly with the normalized space coordinates we have been using.
Now that you have seen how we correctly load a texture, it is time to experiment to discover what we can do with it, by trying:
Scaling the previous texture by half.
Rotating the previous texture 90 degrees.
Hooking the mouse position to the coordinates to move it.
Why you should be excited about textures? Well first of all forget about the sad 255 values for channel; once your image is transformed into a uniform sampler2D you have all the values between 0.0 and 1.0 (depending on what you set the precision to ). That’s why shaders can make really beautiful post-processing effects.
Second, the vec2() means you can get values even between pixels. As we said before the textures are a continuum. This means that if you set up your texture correctly you can ask for values all around the surface of your image and the values will smoothly vary from pixel to pixel with no jumps!
Finally, you can set up your image to repeat in the edges, so if you give values over or lower of the normalized 0.0 and 1.0, the values will wrap around starting over.
All these features make your images more like an infinite spandex fabric. You can stretch and shrink your texture without noticing the grid of bytes they are originally composed of or the ends of it. To experience this take a look at the following code where we distort a texture using the noise function we already made.
纹理分辨率
Above examples play well with squared images, where both sides are equal and match our squared billboard. But for non-squared images things can be a little more tricky, and unfortunately centuries of pictorial art and photography found more pleasant to the eye non-squared proportions for images.
How we can solve this problem? Well we need to know the original proportions of the image to know how to stretch the texture correctly in order to have the original aspect ratio. For that the texture width and height are passed to the shader as an uniform, which in our example framework are passed as an uniform vec2 with the same name of the texture followed with proposition Resolution. Once we have this information on the shader we can get the aspect ratio by dividing the width for the height of the texture resolution. Finally by multiplying this ratio to the coordinates on y we will shrink this axis to match the original proportions.
Uncomment line 21 of the following code to see this in action.
What we need to do to center this image?
数码装饰
You may be thinking that this is unnecessarily complicated… and you are probably right. Also this way of working with images leaves enough room to different hacks and creative tricks. Try to imagine that you are an upholster and by stretching and folding a fabric over a structure you can create better and new patterns and techniques.
This level of craftsmanship links back to some of the first optical experiments ever made. For example on games sprite animations are very common, and is inevitably to see on it reminiscence to phenakistoscope, zoetrope and praxinoscope.
This could seem simple but the possibilities of modifying textures coordinates are enormous. For example:
Now is your turn:
Can you make a kaleidoscope using what we have learned?
Way before Oculus or google cardboard, stereoscopic photography was a big thing. Could you code a simple shader to re-use these beautiful images?
What other optical toys can you re-create using textures?
In the next chapters we will learn how to do some image processing using shaders. You will note that finally the complexity of shader makes sense, because it was in a big sense designed to do this type of process. We will start doing some image operations!
你可能注意到 GLSL 对 for 循环和 数组 似乎不太友好。如前所说，循环不接受动态的迭代次数。还有，遍历很多实例会显著地降低着色器的性能。这意味着我们不能把这个方法用在很大的特征点集上。我们需要寻找另一个策略，一个能利用 GPU 并行架构优势的策略。
解决这个问题的一个方法是把空间分割成网格。并不需要计算每一个像素点到每一个特征点的距离，对吧？已经知道每个像素点是在自己的线程中运行，我们可以把空间分割成网格（cells），每个网格对应一个特征点。另外，为避免网格交界区域的偏差，我们需要计算像素点到相邻网格中的特征点的距离。这就是 Steven Worley 的论文中的主要思想。最后，每个像素点只需要计算到九个特征点的距离：他所在的网格的特征点和相邻的八个网格的特征点。我们已经在图案，随机和噪声这些章节介绍了如何把空间分割成网格，希望你已经熟悉这项技术。
1 2 3 4 5 6
// Scale st *= 3.;
// Tile the space vec2 i_st = floor(st); vec2 f_st = fract(st);
就像我们之前所做的那样，现在是扩大规模的时候，转而使用 Steven Worley 的论文中的方法。试着自己实现它。你可以通过点击下面的示例来获取帮助。注意 Steven Worley 的原始方法中，每个网格的特征点数是可变的，对大多数网格来说不止一个。在他的 C 语言实现中，这是用来提早退出来加速循环。GLSL 循环不允许动态的迭代次数，所以你可能更希望一个网格对应一个特征点。
我知道你一定在想：“这人是谁？”是的，他的工作非常杰出！但是说真的，他是如何优化算法的呢？我们已经知道在二维中他是如何在四个点（正方形的四个角）之间插值的；所以没错你已经猜到了，对于三维（这里有个示例）和四维我们需要插入 8 个和 16 个点。对吧？也就是说对于 N 维你需要插入 2 的 n 次方个点（2^N）。但是 Ken 很聪明地意识到尽管很显然填充屏幕的形状应该是方形，在二维中最简单的形状却是等边三角形。所以他把正方形网格（我们才刚学了怎么用）替换成了单纯形等边三角形的网格。
这时 N 维的形状就只需要 N + 1 个点了。也就是说在二维中少了 1 个点，三维中少了 4 个，四维中则少了 11 个！巨大的提升！
floatfaceforward(float N, float I, float Nref) vec2faceforward(vec2 N, vec2 I, vec2 Nref) vec3faceforward(vec3 N, vec3 I, vec3 Nref) vec4faceforward(vec4 N, vec4 I, vec4 Nref)
if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) ) paint white else paint black
现在我们有个更好的主意让这个想法实现，来试试把if语句换成step（），并用0到1代替10 x 10的范围。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
uniformvec2 u_resolution;
void main(){ vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0);
// Each result will return 1.0 (white) or 0.0 (black). float left = step(0.1,st.x); // Similar to ( X greater than 0.1 ) float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 )
// The multiplication of left*bottom will be similar to the logical AND. color = vec3( left * bottom );
gl_FragColor = vec4(color,1.0); }
step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0））并将其余的变成白色（vec3（1.0））。left 乘 bottom 效果相当于逻辑 AND —— 当 x y 都为 1.0 时乘积才能是 1.0。这样做的效果就是画了两条黑线，一个在画布的底边另一个在左边。
There are several ways to calculate that distance. The easiest one uses the distance() function, which internally computes the length() of the difference between two points (in our case the pixel coordinate and the center of the canvas). The length() function is nothing but a shortcut of the hypotenuse equation that uses square root (sqrt()) internally.
一旦我们得到角度和长度，我们需要单位化这些值：0.0到1.0。在27行，atan(y,x) 会返回一个介于-PI到PI的弧度值（-3.14 to 3.14），所以我们要将这个返回值除以 TWO_PI（在code顶部定义了）来得到一个-0.5到0.5的值。这样一来，用简单的加法就可以把这个返回值最终映射到0.0到1.0。半径会返回一个最大值0.5（因为我们计算的是到视口中心的距离，而视口中心的范围已经被映射到0.0到1.0），所以我们需要把这个值乘以二来得到一个0到1.0的映射。
这些 x 与 y（或亮度）之间一对一的关系称作线性插值（linear interpolation）。（译者注：插值是离散函数逼近的重要方法，利用它可通过函数在有限个点处的取值状况，估算出函数在其他点处的近似值。因为对计算机来说，屏幕像素是离散的而不是连续的，计算机图形学常用插值来填充图像像素之间的空隙。）现在起我们可以用一些数学函数来改造这些代码行。比如说我们可以做一个求 x 的 5 次幂的曲线。
在之前的例子中，注意第 12 行，我们用到 smoothstep 在 plot() 函数中画了一条绿色的线。这个函数会对给出的 x 轴上的每个值，在特定的 y 值处制造一个凹凸形变。如何做到呢？通过把两个 smoothstep() 连接到一起。来看看下面这个函数，用它替换上面的第 20 行，把它想成是一个垂直切割。背景看起来很像一条线，不是吗？
1
float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x);
正弦和余弦函数
当你想用数学来制造动效，形态或去混合数值，sin 和 cos 就是你的最佳伙伴。
这两个基础的三角函数是构造圆的极佳工具，就像张小泉的剪刀一样称手。很重要的一点是你需要知道它们是如何运转的，还有如何把它们结合起来。简单来说，当我们给出一个角度（这里采用弧度制），它就会返回半径为一的圆上一个点的 x 坐标（cos）和 y 坐标（sin）。正因为 sin 和 cos 返回的是规范化的值（即值域在 -1 和 1 之间），且如此流畅，这就使得它成为一个极其强大的工具。
voidmain() { vec2 st = gl_FragCoord.xy/u_resolution.xy; gl_FragColor=vec4(st.x,st.y,0.0,1.0); } </script> <script> var container; var camera, scene, renderer; var uniforms;
想象你的 CPU 是一个大的工业管道，然后每一个任务都是通过这个管道的某些东西 —— 就像一个生产流水线那样。有些任务要比别的大，也就是说要花费更多时间和精力去处理。我们就称它要求更强的处理能力。由于计算机自身的架构，这些任务需要串行；即一次一个地依序完成。现代计算机通常有一组四个处理器，就像这个管道一样运行，一个接一个地处理这些任务，从而使计算机流畅运行。每个管道通常被称为线程。
视频游戏和其他图形应用比起别的程序来说，需要高得多的处理能力。因为它们的图形内容需要操作无数像素。想想看，屏幕上的每一个像素都需要计算，而在 3D 游戏中几何和透视也都需要计算。
让我们回到开始那个关于管道和任务的比喻。屏幕上的每个像素都代表一个最简单的任务。单独来看完成任何一个像素的任务对 CPU 来说都很容易，那么问题来了，屏幕上的每一个像素都需要解决这样的小任务！也就是说，哪怕是对于一个老式的屏幕（分辨率 800x600）来说，都需要每帧处理480000个像素，即每秒进行14400000次计算！是的，这对于微处理器就是大问题了！而对于一个现代的 2800x1800 视网膜屏，每秒运行60帧，就需要每秒进行311040000次计算。图形工程师是如何解决这个问题的？
/usr/local/nginx/sbin/nginx -V ## 结果如下 nginx version: nginx/1.18.0 built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC) built with OpenSSL 1.0.2k-fips 26 Jan 2017 TLS SNI support enabled configure arguments: --prefix=/usr/local/nginx --with-http_ssl_module --with-http_gzip_static_module
平滑启动
1 2 3 4 5 6
## 测试语法的正确性 /usr/local/nginx/sbin/nginx -t nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful ## 启动 /usr/local/nginx/sbin/nginx -s reload
# new：使用线上模板创建一个新的 md 文件 # create a new slide with an official template $ nodeppt new slide.md # 使用模板 $ nodeppt new username/repo xxx.md
# create a new slide straight from a github template $ nodeppt new slide.md -t username/repo
# serve：启动一个 md 文件的 webpack dev server # start local sever show slide $ nodeppt serve slide.md # start local sever show slide with port $ nodeppt serve slide.md -p port
# build：编译产出一个 md 文件 # to build a slide $ nodeppt build slide.md
<!DOCTYPE html> <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly --> <html> <head> <linkrel="stylesheet"href="https://lib.baomitu.com/KaTeX/0.15.2/katex.min.css"integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering --> <scriptdefersrc="https://lib.baomitu.com/KaTeX/0.15.2/katex.min.js"integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: --> <scriptdefersrc="https://lib.baomitu.com/KaTeX/0.15.2/contrib/auto-render.min.js"integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"crossorigin="anonymous" onload="renderMathInElement(document.body);"></script> </head> ... </html>
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html Nunjucks Error: [Line 9418, Column 3465] expected variable end
wget https://download.osgeo.org/geos/geos-3.8.1.tar.bz2 tar -jxf geos-3.8.1.tar.bz2 cd geos-3.8.1 ./configure --prefix=/usr/local/geos-3.8.1 make && make install
:blush:
安装proj-6.3.2
1 2 3 4 5 6
wget http://download.osgeo.org/proj/proj-6.3.2.tar.gz tar -zxvf proj-6.3.2.tar.gz cd proj-6.3.2 ./configure --prefix=/usr/local/proj-6.3.2 # 编译时遇到下面的问题，说是sqlite版本太低！编译成功再进行下一步！ make && make install
wget https://download.osgeo.org/gdal/3.0.4/gdal-3.0.4.tar.gz tar -zxvf gdal-3.0.4.tar.gz cd gdal-3.0.4 # 带pg的配置，具体需要啥可以./configure --help 查看 ./configure --prefix=/usr/local/gdal-3.0.4 --with-pg=yes make # 编译时遇到下面的问题，成功则进行下一步！ make install
遇到
1 2 3
collect2: error: ld returned 1 exit status make[1]: *** [GNUmakefile:82: gdalinfo] Error 1 make: *** [GNUmakefile:112: apps-target] Error 2
wget https://github.com/protobuf-c/protobuf-c/releases/download/v1.3.3/protobuf-c-1.3.3.tar.gz tar -xzvf protobuf-c-1.3.3.tar.gz cd protobuf-c-1.3.3 export PKG_CONFIG_PATH=/usr/local/protobuf-3.11.4/lib/pkgconfig ./configure --prefix=/usr/local/protobuf-c-1.3.3 make && make install
wget http://distfiles.macports.org/cgal/cgal-4.14.3.tar.xz xz -d CGAL-4.14.3.tar.xz tar -xvf CGAL-4.14.3.tar cd CGAL-4.14.3 mkdir build && cd build cmake .. make && make install
安装pcre
1 2 3 4 5 6 7
wget https://ftp.pcre.org/pub/pcre/pcre-8.44.tar.gz tar -xzvf pcre-8.44.tar.gz cd pcre-8.44 ./configure --enable-utf8 --prefix=/usr/local/pcre-8.44 make && make intall echo"/usr/local/pcre/lib" > /etc/ld.so.conf.d/pcre-8.44.conf ldconfig
安装SFCGAL
遇到以下这个问题：
1 2
c++: internal compiler error: Killed (program cc1plus) Please submit a full bug report
wget https://github.com/Oslandia/SFCGAL/archive/v1.3.7.tar.gz tar -zxvf SFCGAL-1.3.7.tar.gz cd SFCGAL-1.3.7 mkdir build && cd build cmake -DCMAKE_INSTALL_PREFIX=/usr/local/sfcgal-1.3.7 .. make && make install
装完之后释放空间：
1 2 3
swapoff -a #详细的用法可以：swapoff --help #查看当前内存使用情况：free -m
wget https://github.com/pgRouting/pgrouting/releases/download/v3.0.2/pgrouting-3.0.2.tar.gz tar -zxvf pgrouting-3.0.2.tar.gz cd pgrouting-3.0.2 mkdir build && cd build #引入postgres的环境变量 source /home/postgres/.bashrc cmake .. make make install
$ hexo b INFO Start backup: git The file will have its original line endings in your working directory [master 79b18cc] backup updata: XXXX 2 files changed, 143 insertions(+), 4 deletions(-) Branch 'master'set up to track remote branch 'backup' from 'github'. To github.com:XXXXXX 89e022d..79b18cc master -> backup Branch 'master'set up to track remote branch 'backup' from 'coding'. To e.coding.net:XXXXXX 89e022d..79b18cc master -> backup INFO Backup done: git ======================Auto Backup Begin=========================== On branch master Your branch is up to date with 'coding/backup'.
nothing to commit, working tree clean fatal: remote origin already exists. remote: usage: git remote add [<options>] <name> <url> remote: remote: -f, --fetch fetch the remote branches remote: --tags import all tags and associated objects when fetching remote: or do not fetch any tag at all (--no-tags) remote: -t, --track <branch> branch(es) to track remote: -m, --master <branch> remote: master branch remote: --mirror[=(push|fetch)] remote: set up remote as a mirror to push to or fetch from remote: remote: fatal: 'origin' does not appear to be a git repository remote: fatal: Could not read from remote repository. remote: remote: Please make sure you have the correct access rights remote: and the repository exists. remote: fatal: not a git repository (or any of the parent directories): .git To XXXXXX:/home/git/backup.git 89e022d..79b18cc master -> master Everything up-to-date ==================Auto Backup Complete============================
服务器的文件夹/home/backup下可看到Hexo backup的备份文件，服务器端备份的文件与github或coding备份文件一致。同时，文件夹/home/hexo是hexo deploy的部署文件，通过Nginx提供 Web 服务。这就实现了服务器部署和备份的自动化操作。
# Port number for server to listen on Environment=PGPORT=5432
# Location of database directory Environment=PGDATA=/opt/pg12/data
# Where to send early-startup messages from the server (before the logging # options of postgresql.conf take effect) # This is normally controlled by the global default set by systemd # StandardOutput=syslog
# Disable OOM kill on the postmaster OOMScoreAdjust=-1000
欢迎体验 Fluid ，这是一款 Material Design 风格的 Hexo 主题，以简约的设计帮助你专注于写作，本篇文章可预览主题的样式及功能。
文字
文章大部分使用的是 github-markdown 样式，并加入了一些 Material 风格。
H3 标题
H4 标题
粗体
斜体
代码
行内代码：$ hexo new post "My New Post"
代码高亮使用的是 highlight.js，支持 185 种语言和 91 种高亮样式：
1 2 3 4 5 6 7
deffib(n): a, b = 0, 1 while a < n: print(a, end=' ') a, b = b, a+b print() fib(1000)
1 2 3 4 5 6
type Map struct { mu Mutex read atomic.Value dirty map[interface{}]*entry misses int }
表格
Header 1
Header 2
Header 3
Key 1
Value 1
Comment 1
Key 2
Value 2
Comment 2
Key 3
Value 3
Comment 3
列表
有序列表
Fluid 相较于其他主题的优势：
设计遵循简洁至上，同时具有轻快的体验，和优雅的颜值；
提供大量定制化配置项，使每个用户使用该主题都能具有独特的样式；
响应式页面，适配手机、平板等设备；
无序列表
Fluid 功能特性：
图片懒加载
自定义代码高亮方案
内置多语言
支持多款评论插件
支持使用数据文件存放配置
自定义静态资源 CDN
内置文章搜索
页脚备案信息
网页访问统计
支持 LaTeX 数学公式
支持 mermaid 流程图
音乐播放器
图片
LaTex
基于 MathJax 引擎：
流程图
基于 mermaid 语法：
sequenceDiagramparticipant Aliceparticipant BobAlice->>John: Hello John, how are you?loop Healthcheck John->>John: Fight against hypochondriaendNote right of John: Rational thoughts <br/>prevail...John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidsection A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5d
classDiagramClass01 <|-- AveryLongClass : CoolClass03 *-- Class04Class05 o-- Class06Class07 .. Class08Class09 --> C2 : Where am i?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaClass08 <--> C2: Cool label
内置 Tag 插件
内置了一些 Tag 插件，用于实现 Markdown 不容易生成的样式，具体使用方式请见 用户指南。
// continuously repaint the map, resulting in the smooth animation of the dot map.triggerRepaint();
// return `true` to let the map know that the image was updated returntrue; }, }; map.on('load', () => { map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
// continuously repaint the map, resulting in the smooth animation of the dot map.triggerRepaint();
// return `true` to let the map know that the image was updated returntrue; }, }; map.on('load', () => { map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
git rev-list HEAD | sort > config.git-hash LOCALVER=`wc -l config.git-hash | awk '{print $1}'` if [ $LOCALVER \> 1 ] ; then REVISE=`git rev-list origin/master | sort | join config.git-hash - | wc -l | awk '{print $1}'` VERSION=`git tag` echo"$VERSION" if [ $REVISE != $LOCALVER ] ; then REVISE="$REVISE+$(($LOCALVER-$REVISE))" fi if git status | grep -q "modified:" ; then REVISE="${REVISE}" fi
if [ ! -n "$VERSION" ]; then VERSION="v1.0.0" else VERSION=`git describe --tags $(git rev-list --tags --max-count=1)` fi
GIT_HASH=`git rev-list HEAD -n 1` GIT_SHORT_HASH=`git rev-list HEAD -n 1 | cut -c 1-8` TIME=`git log --pretty=format:"%cd"$GIT_SHORT_HASH -1` echo"$TIME" else GIT_VERSION= REVISE="x"SHORT_ fi rm -f config.git-hash
cat version.template | sed "s/\$FULL_HASH/$GIT_HASH/g" | sed "s/\$FULL_REVISE/$REVISE/g" | sed "s/\$FULL_VERSION/$VERSION/g" | sed "s/\$FULL_TIME/$TIME/g" > public/$REVISE cat version.json.template | sed "s/\$FULL_HASH/$GIT_SHORT_HASH/g" | sed "s/\$FULL_REVISE/$REVISE/g" | sed "s/\$FULL_VERSION/$VERSION/g" | sed "s/\$FULL_TIME/$TIME/g" > public/version.json
echo"$VERSION.$REVISE" echo"Generated version info : $REVISE"
{ "circle-color": [ "rgb", // red is higher when feature.properties.temperature is higher ["get", "temperature"], // green is always zero 0, // blue is higher when feature.properties.temperature is lower ["-", 100, ["get", "temperature"]] ] }
{ "circle-radius": [ "interpolate", ["linear"], ["zoom"], // zoom is 5 (or less) -> circle radius will be 1px 5, 1, // zoom is 10 (or greater) -> circle radius will be 5px 10, 5 ] }
一个单独的表达式可能使用 data 操作符、相机操作符和其他操作符的混合。这种组合表达式使一个图层的渲染决定于缩放等级和单独要素属性的组合。
1 2 3 4 5 6 7 8 9 10 11 12 13
{ "circle-radius": [ "interpolate", ["linear"], ["zoom"], // when zoom is 0, set each feature's circle radius to the value of its "rating" property 0, ["get", "rating"], // when zoom is 10, set each feature's circle radius to four times the value of its "rating" property 10, ["*", 4, ["get", "rating"]] ] }
一个同时使用了 data 和 camera 运算符的表达式同时考虑了 data 和 camera 表达式。
//通过 dom 的 getBoundingClientRect 方法获得当前显示区域距离左上角的偏移量 var left = renderer.domElement.getBoundingClientRect().left; var top = renderer.domElement.getBoundingClientRect().top;
//根据浏览器的设备类型来获取到当前点击的位置 var clientX = dop.browserRedirect() === "pc" ? event.clientX - left : event.touches[0].clientX - left; var clientY = dop.browserRedirect() === "pc" ? event.clientY - top : event.touches[0].clientY - top;
for (let i = 0; i < 300; i++) { let geometry = new THREE.BoxGeometry(10, 10, 10); let material = new THREE.MeshLambertMaterial({color: 0x00ffff}); let mesh = new THREE.Mesh(geometry, material); //随机位置 mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200)); group.add(mesh); }
let geometry = new THREE.BoxGeometry(10, 10, 10); let material = new THREE.MeshLambertMaterial({color: 0x00ffff}); for (let i = 0; i < 300; i++) { let mesh = new THREE.Mesh(geometry, material); //随机位置 mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200)); group.add(mesh); }
//合并模型，则使用merge方法合并 var geometry = new THREE.Geometry(); //merge方法将两个几何体对象或者Object3D里面的几何体对象合并，(使用对象的变换)将几何体的顶点、面、UV 分别合并。 //THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead. 如果新版本用老版本的会报这个错 for(var i=0; i<20000; i++){ var cube = addCube(); //创建了一个随机位置的几何体模型 cube.updateMatrix(); //手动更新模型的矩阵 geometry.merge(cube.geometry, cube.matrix); //将几何体合并 }
var m = new THREE.Matrix4(); m.lookAt(eye, center, up); //生成旋转变换矩阵
我们也可以通过旋转弧度来生成旋转变换矩阵：
1 2 3 4 5 6 7 8 9 10 11 12
var m = new THREE.Matrix4(); //通过绕x轴旋转生成变换矩阵 m.makeRotationX(Math.PI/2); //绕x轴旋转90度变换矩阵 m.makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI/2); //效果同上
//实例化一个Geometry对象 var geo = new THREE.Geometry(); //调用对象的fromBufferGeometry方法，并将需要转换的geometry传入 var bufferGeo = geo.fromBufferGeometry(geometry); //返回的对象转换成的BufferGeometry
BufferGeometry转换成Geometry
1 2 3 4 5
//实例化一个BufferGeometry对象 var bufferGeo = new THREE.BufferGeometry(); //调用对象的fromGeometry方法，并将需要转换的bufferGeometry传入 var geo = bufferGeo.fromGeometry(bufferGeometry); //返回的对象转换成的Geometry
接下来，我们将讲解一下 Three.js 内置几何体。
立方体 BoxGeometry 和 BoxBufferGeometry
立方体是最早接触的几何体，可以通过设置长宽高来创建各种各样的立方体。
看下面的案例，代码：
1 2 3 4
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );
var geometry = new THREE.CircleGeometry( 5, 32 ); var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); var circle = new THREE.Mesh( geometry, material ); scene.add( circle );
var geometry = new THREE.ConeGeometry( 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var cone = new THREE.Mesh( geometry, material ); scene.add( cone );
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );
var geometry = new THREE.SphereGeometry( 5, 32, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );
var geometry = new THREE.PlaneGeometry( 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); var plane = new THREE.Mesh( geometry, material ); scene.add( plane );
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); var torus = new THREE.Mesh( geometry, material ); scene.add( torus );
var texture = new THREE.TextureLoader().load( "textures/water.jpg" ); material.map = texture; //将纹理赋值给材质
或者直接实例化：
1 2
var texture = new THREE.Texture(canvas); //实例化的第一个对象可以是`img`、`canvas`和`video`。 material.map = texture; //将纹理赋值给材质
纹理重复问题
如果图片不是标准的2的幂数（2、4、8、16、32、64、128、256、512、1024、2048……），在控制台会给我们提示：“THREE.WebGLRenderer: image is not power of two”，意思就是说图片不是标准格式高宽不是2的幂数。我们需要的水平方向和垂直方向上设置的图片重复显示。需要配置的两个属性是：texture.wrapS（水平方向重复）和 texture.wrapT（垂直方向重复），默认值是：THREE.ClampToEdgeWrapping，即纹理的最后一个像素延伸到网格的边缘。可选项有：THREE.RepeatWrapping，表示纹理将重复无穷大；MirroredRepeatWrapping，表示镜像重复，可以理解为重复时，反着绘制一个然后正着绘制一个，达到的效果就是没有强烈的过渡感觉。
needsUpdate 属性
如果更新了纹理的相关属性，需要将此属性设置为 true，将数据同步到 WebGL。
repeat
纹理在整个表面水平方向和垂直方向重复多少次，也会受纹理重复设置的影响，设置方式为：
1 2 3 4
var texture = new THREE.TextureLoader().load( "textures/water.jpg" ); texture.wrapS = THREE.RepeatWrapping; //设置水平方向无限循环 texture.wrapT = THREE.RepeatWrapping; //设置垂直方向无限循环 texture.repeat.set( 4, 4 ); //水平方向和垂直方向都重复四次
var pointsArr = [ new THREE.Vector3( -10, 0, -5 ), new THREE.Vector3( -5, 15, 5 ), new THREE.Vector3( 20, 15, -5 ), new THREE.Vector3( 10, 0, 5 ) ]; //指定一些用于生成曲线线的三维顶点 var curve = new THREE.CatmullRomCurve3(pointsArr);
var points = curve.getPoints( 50 ); //使用getPoints获取当前曲线分成50段后的所有顶点 var curveGeometry = new THREE.BufferGeometry().setFromPoints( points ); //使用顶点生成几何体
var curveMaterial = new THREE.LineDashedMaterial( { color : 0xff0000 } ); //创建一条红色的线材质
var spriteMaterial = newTHREE.SpriteMaterial( { color: 0xffffff } ); var sprite = newTHREE.Sprite( spriteMaterial ); scene.add( sprite );
创建一个带有纹理图片的精灵：
1 2 3 4
var spriteMap = new THREE.TextureLoader().load( "sprite.png" ); var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } ); var sprite = new THREE.Sprite( spriteMaterial ); scene.add( sprite );
直接使用 canvas 创建精灵：
1 2 3 4
var spriteMap = new THREE.Texture(canvas); var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } ); var sprite = new THREE.Sprite( spriteMaterial ); scene.add( sprite );
相关属性
精灵特有的属性就一个，即 center 属性，值是一个二维向量 THREE.Vector2，这个属性意义就是当前设置的精灵位置点的位置处于精灵图中的位置。如果 center 的值是 0,0旋转的位置就在左下角，如果值为 1,1 的话，那旋转的位置则在精灵图的右上角，默认值是 0.5,0.5：
//球体 var sphereGeometry = newTHREE.SphereGeometry(5, 24, 16); var sphereMaterial = newTHREE.PointsMaterial({color: 0xff00ff}); var sphere = newTHREE.Points(sphereGeometry, sphereMaterial); scene.add(sphere);
上面是通过球体几何体创建的一个最简单的粒子特效。
使用任何几何体都可以，甚至自己生成的几何体都可以，比如创建星空的案例：
1 2 3 4 5 6 7 8 9 10 11 12 13
var starsGeometry = new THREE.Geometry(); //生成一万个点的位置 for (var i = 0; i < 10000; i++) { var star = new THREE.Vector3(); //THREE.Math.randFloatSpread 在区间内随机浮动* - 范围 / 2 *到* 范围 / 2 *内随机取值。 star.x = THREE.Math.randFloatSpread(2000); star.y = THREE.Math.randFloatSpread(2000); star.z = THREE.Math.randFloatSpread(2000); starsGeometry.vertices.push(star); } var starsMaterial = new THREE.PointsMaterial({color: 0x888888}); var starField = new THREE.Points(starsGeometry, starsMaterial); scene.add(starField);
// 引入 Gulp var gulp = require('gulp'); // 引入插件 var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify');
Permission denied (publickey). fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists. FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: the remote end hung up unexpectedly fatal: the remote end hung up unexpectedly error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054
local_search: enable:true # if auto, trigger search by changing input # if manual, trigger search by pressing enter key or search button trigger:auto # show top n results per article, show all results by setting to -1 top_n_per_article:1 # unescape html strings to the readable one unescape:false
# Default(true) will load mathjax/katex script on demand # That is it only render those page who has 'mathjax: true' in Front Matter. # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE. per_page:true
error: Your local changes to the following files would be overwritten by merge: protected/config/main.php Please, commit your changes or stash them before you can merge.
]]>
]]>
]]>
]]>
]]>
]]>
]]>
