Site updated: 2022-03-28 15:38:29

2016/06/use-ssh/index.html

@@ -87,9 +87,8 @@ <h1 class="page-title">
     <div class="picture-container">
 
     </div>
-    <p>记录ssh的使用</p>
-<h1 id="SSH的使用"><a href="#SSH的使用" class="headerlink" title="SSH的使用"></a>SSH的使用</h1><p>SSH是一种连接服务器的方式，使用SSH可以不必每次都输入用户名和密码</p>
-<h2 id="一、-Add-SSH-key-to-Github"><a href="#一、-Add-SSH-key-to-Github" class="headerlink" title="一、 Add SSH key to Github"></a>一、 Add SSH key to Github</h2><h3 id="Mac"><a href="#Mac" class="headerlink" title="Mac"></a>Mac</h3><h5 id="1-打开命令行工具，输入以下内容-替换你的邮箱名"><a href="#1-打开命令行工具，输入以下内容-替换你的邮箱名" class="headerlink" title="1. 打开命令行工具，输入以下内容,替换你的邮箱名"></a>1. 打开命令行工具，输入以下内容,替换你的邮箱名</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ssh-keygen -t rsa -C &quot;your_email@example.com&quot;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+    <p>SSH是一种连接服务器的方式，使用SSH可以不必每次都输入用户名和密码</p>
+<h1 id="SSH的使用"><a href="#SSH的使用" class="headerlink" title="SSH的使用"></a>SSH的使用</h1><h2 id="一、-Add-SSH-key-to-Github"><a href="#一、-Add-SSH-key-to-Github" class="headerlink" title="一、 Add SSH key to Github"></a>一、 Add SSH key to Github</h2><h3 id="Mac"><a href="#Mac" class="headerlink" title="Mac"></a>Mac</h3><h5 id="1-打开命令行工具，输入以下内容-替换你的邮箱名"><a href="#1-打开命令行工具，输入以下内容-替换你的邮箱名" class="headerlink" title="1. 打开命令行工具，输入以下内容,替换你的邮箱名"></a>1. 打开命令行工具，输入以下内容,替换你的邮箱名</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ssh-keygen -t rsa -C &quot;your_email@example.com&quot;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
 <blockquote>
 <p><code>-t</code> : [rsa | dsa ] 加密类型,默认rsa</p>
 </blockquote>

2022/03/webgl-shader/index.html

@@ -87,8 +87,32 @@ <h1 class="page-title">
     <div class="picture-container">
 
     </div>
-    <p>不会3D的程序员不是一个好司机，这个时代总得卷起来，不然可能就得去开滴滴。 在这元宇宙概念的背景下，上级领导也要求做点技术储备，看了一段时间3D框架后，顺便了解点webgl原理。</p>
-<h4 id="webgl"><a href="#webgl" class="headerlink" title="webgl"></a>webgl</h4><p><img src="/img/webgl/webgl.png"></p>
+    <p>(//未完成 todo)<br>不会3D的程序员不是一个好司机，这个时代总得卷起来，不然可能就得去开滴滴。 在这元宇宙概念的背景下，上级领导也要求做点技术储备，看了一段时间3D框架后，也顺便学习下webgl的原理。</p>
+<h2 id="WebGL"><a href="#WebGL" class="headerlink" title="WebGL"></a>WebGL</h2><p>webgl其实是一个很底层的图像引擎，主要提供的能力就是你输入一堆图形的顶点坐标，程序在GPU中帮你画出图形(光珊化)和上色后输出到浏览器，在GPU运行的程序则是一种OpenGL着色语言(GLGS)。</p>
+<p><img src="/img/webgl/webgl.png"></p>
+<p>创建上下文，初始化之类的调用api的就不讲了，主要介绍下着色器怎么运作的</p>
+<h2 id="着色器"><a href="#着色器" class="headerlink" title="着色器"></a>着色器</h2><p>简单点的说着色器就干两件事：</p>
+<ol>
+<li>根据顶点坐标绘制图像</li>
+<li>给图形的每个像素点上色</li>
+</ol>
+<p>在<code>webgl</code>中分别对应两种着色器，<strong>顶点着色器(vertext shader)</strong> 和 <strong>片元着色器(fragment shader)</strong> ，两种是成对出现的组成一段着色程序在GPU上运行。</p>
+<h2 id="缓冲区"><a href="#缓冲区" class="headerlink" title="缓冲区"></a>缓冲区</h2><p>缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 也可以存储任何数据。</p>
+<p>如果我们要画一个三角形，那我们在缓冲区写入三个顶点的数据,数据类型是一个<code>Float32Aarray</code> 就是一个一维数组:</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">//三个2维顶点</span></span><br><span class="line"><span class="keyword">var</span> positions = <span class="keyword">new</span> <span class="built_in">Float32Array</span>([</span><br><span class="line">     -<span class="number">0.5</span>, -<span class="number">0.5</span>,    <span class="comment">//v0</span></span><br><span class="line">     -<span class="number">0.5</span>,  <span class="number">0.5</span>,    <span class="comment">//v1</span></span><br><span class="line">      <span class="number">0.5</span>, -<span class="number">0.5</span>     <span class="comment">//v2</span></span><br><span class="line">])</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建buffer等方法省略。。。。</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>在gl中的坐标取值是<code>(-1,1）</code>最后渲染后会换算成屏幕空间坐标，假如我们的画布是400x300, 那<code>(-0.5,0.5)</code>的坐标就是(100,225）,屏幕的<code>(0,0)</code>是左下角</p>
+<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">（-<span class="number">1</span>,<span class="number">1</span>）                        （<span class="number">1</span>,<span class="number">1</span>）  </span><br><span class="line"> ----------------------------------</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |             (<span class="number">0</span>,<span class="number">0</span>)              |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> |                                |</span><br><span class="line"> ----------------------------------</span><br><span class="line">(-<span class="number">1</span>,-<span class="number">1</span>)                         (<span class="number">1</span>,-<span class="number">1</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<p>这是配置顶点数据的，下面我们继续看下画一个三角形顶点着色器和片元着色器的代码：</p>
+<h2 id="画一个三角形"><a href="#画一个三角形" class="headerlink" title="画一个三角形"></a>画一个三角形</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">//顶点着色器</span></span><br><span class="line"><span class="keyword">const</span> vsSource = <span class="string">`</span></span><br><span class="line"><span class="string">    //属性值，从缓冲中获取数据</span></span><br><span class="line"><span class="string">    attribute vec4 position;</span></span><br><span class="line"><span class="string">    void main(void) &#123;</span></span><br><span class="line"><span class="string">        //gl_Position内置的系统变量，记录顶点坐标</span></span><br><span class="line"><span class="string">        gl_Position = position;</span></span><br><span class="line"><span class="string">    &#125;`</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//片元着色器</span></span><br><span class="line"><span class="keyword">const</span> fsSource = <span class="string">`</span></span><br><span class="line"><span class="string">    varying vec4 v_color;</span></span><br><span class="line"><span class="string">    void main(void) &#123;</span></span><br><span class="line"><span class="string">      //gl_FragColor内置的系统变量，记录像素颜色</span></span><br><span class="line"><span class="string">      gl_FragColor = vec4(0.0,  1.0,  0.0,  1.0); //green color</span></span><br><span class="line"><span class="string">    &#125;`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//画图</span></span><br><span class="line"><span class="keyword">const</span> type = gl.TRIANGLES</span><br><span class="line"><span class="keyword">const</span> offset = <span class="number">0</span> <span class="comment">//从第一个顶点开始</span></span><br><span class="line"><span class="keyword">const</span> vCount = <span class="number">3</span> <span class="comment">//总顶点数，执行多少次</span></span><br><span class="line">gl.drawArrays(type, offset, vCount)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+<p>上面就是画一个纯色三角形着色器所需要的代码，最后调用<code>gl.drawArrays(type, offset, vCount)</code> 。</p>
+<p><strong><code>attributes</code></strong> 属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器,前面我们已经在缓冲区创建了一个顶点数组，两个可以理解为等值，通过webgl api绑定后，在顶点着色器中就可以获取到，<br>顶点着色器中除了<code>attributes</code>获取数据还有其它三种类型数据**全局变量(uniforms)<strong>、</strong>纹理(textures)<strong>、</strong>全局变量(varyings)**。</p>
+<h2 id="画立方体"><a href="#画立方体" class="headerlink" title="画立方体"></a>画立方体</h2><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a target="_blank" rel="noopener" href="https://webglfundamentals.org/webgl/lessons/zh_cn/">https://webglfundamentals.org/webgl/lessons/zh_cn/</a></p>
+<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL</a></p>
+<p><a target="_blank" rel="noopener" href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">https://dev.opera.com/articles/introduction-to-webgl-part-1/</a></p>
+<p><a target="_blank" rel="noopener" href="https://dev.opera.com/articles/raw-webgl-part-1-getting-started/">https://dev.opera.com/articles/raw-webgl-part-1-getting-started/</a></p>
+<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/WebGL_model_view_projection#perspective_matrix">https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/WebGL_model_view_projection#perspective_matrix</a></p>
+<p>《WebGL 编程指南》</p>
 
     <hr>
   </article>

index.html

@@ -94,8 +94,8 @@ <h1 class="index-title">
 
   <div class="excerpt">
 
-    不会3D的程序员不是一个好司机，这个时代总得卷起来，不然可能就得去开滴滴。 在这元宇宙概念的背景下，上级领导也要求做点技术储备，看了一段时间3D框架后，顺便了解点webgl原理。
-webgl
+    (//未完成 todo)不会3D的程序员不是一个好司机，这个时代总得卷起来，不然可能就得去开滴滴。 在这元宇宙概念的背景下，上级领导也要求做点技术储备，看了一段时间3D框架后，也顺便学习下webgl的原理。
+WebGLwebgl其实是一个很底层的图像引擎，主要提供的能力就是你输入一堆图形的顶点...
 
   </div>
   <div class="index-meta">
@@ -350,9 +350,8 @@ <h1 class="index-title">
 
   <div class="excerpt">
 
-    记录ssh的使用
-SSH的使用SSH是一种连接服务器的方式，使用SSH可以不必每次都输入用户名和密码
-一、 Add SSH key to GithubMac1. 打开命令行工具，输入以下内容,替换你的邮箱名12$ssh-keygen -t rsa -C &quot;your_email@exa...
+    SSH是一种连接服务器的方式，使用SSH可以不必每次都输入用户名和密码
+SSH的使用一、 Add SSH key to GithubMac1. 打开命令行工具，输入以下内容,替换你的邮箱名12$ssh-keygen -t rsa -C &quot;your_email@example.com&...
 
   </div>
   <div class="index-meta">