-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
1 lines (1 loc) · 27.6 KB
/
index.html
1
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Sanonz</title><meta name="author" content="Sanonz"><meta name="keywords" content="Sanonz、Web、WebGL、Font End、Developer、Mini Program"><meta name="description" content="Personal blog by Sanonz. I explain with words and code."><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><link rel="alternate" href="/atom.xml" title="Sanonz" type="application/atom+xml"><link rel="icon" href="/images/favicon.ico"><style type="text/css">@font-face{font-family:icomoon;src:url(/fonts/icomoon.eot?q628ml);src:url(/fonts/icomoon.eot?q628ml#iefix) format('embedded-opentype'),url(/fonts/icomoon.ttf?q628ml) format('truetype'),url(/fonts/icomoon.woff?q628ml) format('woff'),url(/fonts/icomoon.svg?q628ml#icomoon) format('svg');font-weight:400;font-style:normal}</style><link rel="stylesheet" href="/css/style.css"><!--[if lt IE 9]><style type="text/css">.nav-inner {top:0;}.author-meta {position:static;top:0;}.search-form {height:36px;}</style><script type="text/javascript" src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script><![endif]--><meta name="generator" content="Hexo 4.2.1"></head><body><main class="app"><header id="header" class="header clearfix"><div id="nav" class="nav"><div class="nav-mobile"><button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button><h1 class="nav-mobile-title nav-mobile-item">Sanonz</h1><button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button></div><nav id="nav-inner" class="nav-inner"><a class="nav-item active" href="/"><span class="nav-text">首页</span> </a><a class="nav-item" href="/categories/front-end"><span class="nav-text">前端</span> </a><a class="nav-item" href="/categories/back-end"><span class="nav-text">后端</span> </a><a class="nav-item" href="/tags"><span class="nav-text">标签</span> </a><a class="nav-item" href="/archives"><span class="nav-text">归档</span> </a><a class="nav-item" href="/atom.xml"><span class="nav-text">订阅</span> </a><a class="nav-item" href="/about"><span class="nav-text">关于</span></a></nav></div><aside id="aside" class="aside"><div id="aside-mask" class="aside-mask"></div><div id="aside-inner" class="aside-inner"><form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="https://sanonz.github.io"></form><div class="author-meta"><div class="author-avatar"><a href="/"><img src="/images/avatar.jpg" title="Sanonz"></a></div><div class="author-name">Sanonz</div><div class="author-work">Web Developer & Designer</div><div class="author-location"><i class="icon-location vm"></i> <span class="vm">Shenzhen, China</span></div><div class="author-thread-wrap"><div class="author-threads clearfix"><a class="thread-item" href="https://github.com/sanonz" target="_blank" rel="noopener"></a> <a class="thread-item" href="mailto:sanonz@126.com" target="_blank" rel="noopener"></a> <a class="thread-item" href="https://twitter.com/sanonze" target="_blank" rel="noopener"></a></div></div></div></div></aside></header><div id="content" class="content"><div id="wrapper" class="wrapper"><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2024/debugging-support-for-arm-cortex-m-microcontrollers-on-vscode/">用 VS Code 编辑器开发 STM32 嵌入式</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2024-01-16T12:10:00.000Z" itemprop="datePublished">2024-01-16</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/arm/" rel="tag">arm</a>, <a class="article-tag-link" href="/tags/mcu/" rel="tag">mcu</a>, <a class="article-tag-link" href="/tags/stm32/" rel="tag">stm32</a>, <a class="article-tag-link" href="/tags/vscode/" rel="tag">vscode</a></div></div></header><section class="article-body markdown-body"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>目前大家用 <a href="https://www.keil.com" target="_blank" rel="noopener">Keil</a> 和 <a href="https://www.iar.com" target="_blank" rel="noopener">IAR</a> 工具来开发 STM32 的比较多，而 Keil 和 STM 都是 ARM 的自己产品，适配做的不错，目前大家也是用 Keil 的居多，Keil 有优点也有缺点，Keil 调试方面做的很好，但是编辑器做的一般，在编辑器使用体验上 VS Code 会好用很多，Keil 6 已经做成了 VS Code 的插件形式，名字叫 <a href="https://marketplace.visualstudio.com/items?itemName=stmicroelectronics.stm32-vscode-extension" target="_blank" rel="noopener">STM32 VS Code Extension</a>，不过目前还没正式上线，使用起来问题较多，今天介绍另一种方式在 VS Code 上开发 STM32。</p><p class="article-more-link"><a href="/2024/debugging-support-for-arm-cortex-m-microcontrollers-on-vscode/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2021/use-fontcreator-to-edit-font-libraries/">使用 FontCreator 编辑字体库</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2021-06-16T06:45:20.000Z" itemprop="datePublished">2021-06-16</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/FontCreator/" rel="tag">FontCreator</a>, <a class="article-tag-link" href="/tags/font/" rel="tag">font</a></div></div></header><section class="article-body markdown-body"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>编辑字体的软件有很多种，例如：<a href="https://www.high-logic.com/font-editor/fontcreator" target="_blank" rel="noopener">FontCreator</a>、<a href="https://www.fontlab.com/" target="_blank" rel="noopener">FontLab</a>、<a href="https://www.coreldraw.com/en/product/coreldraw/" target="_blank" rel="noopener">CorelDRAW</a>、<a href="https://github.com/adobe-type-tools/afdko/" target="_blank" rel="noopener">AFDKO</a>、<a href="https://fontforge.org/" target="_blank" rel="noopener">FontForge</a> 等，据说 FontCreator 是下载量最高，使用最傻瓜的一款，作为外行的我们当然选择最傻瓜的一款比较好上手，接下来我们就以 FontCreator 这款字体编辑器进行编辑探索。</p><h2 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h2><ol><li>安装字体编辑软件：<a href="https://www.high-logic.com/font-editor/fontcreator" target="_blank" rel="noopener">FontCreator</a></li><li>下载上手编辑的字体：<a href="https://github.com/lvmorais/bebasneue" target="_blank" rel="noopener">BebasNeue-Regular.ttf</a></li></ol><p class="article-more-link"><a href="/2021/use-fontcreator-to-edit-font-libraries/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2020/state-management-and-performance-optimization-for-react-context-api-with-hooks/">使用 React Context API 和 Hooks 实现全局状态管理和性能优化</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2020-09-09T11:22:35.000Z" itemprop="datePublished">2020-09-09</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/React-js/" rel="tag">React.js</a></div></div></header><section class="article-body markdown-body"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>我们知道 React.js 默认没有全局状态的概念，需要安装第三方库来实现，最早的是流行的是 Facebook 自己出的 <a href="https://github.com/facebook/flux" target="_blank" rel="noopener">Flux</a>，因为 Flux 使用流程有点复杂，后来 <a href="https://github.com/reduxjs/redux" target="_blank" rel="noopener">Redux</a>、<a href="https://github.com/mobxjs/mobx" target="_blank" rel="noopener">MobX</a> 就兴起了。Redux 是借鉴 Flux 开发的，它们都是单向数据流，而 MobX 则有所不同，它是基于观察者模式实现。</p><p>虽然默认没有全局状态管理，但是也可以通过 <code>Context</code> 特性拼凑出来一个，那为啥以前没人拼凑一个出来用呢？那是因为 React.js 以前的 <code>Context</code> 不好用，也不稳定，官方不建议使用，所以一般是特殊情况非得用不可的时候才使用它，但是现在时过境迁，当初那个不成熟的 <code>Context</code> 现在已经变得强壮有力了。</p><p>在去年二月 React.js 发布了一个大的版本更新 <a href="https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019" target="_blank" rel="noopener">v16.8.0</a> 加入了 hooks 功能，其中内置了 <code>useReducer()</code> hook，它是 <code>useState()</code> 的替代品，简单的状态可以直接使用 <code>useState</code>，当我们遇到复杂多层级的状态或者下个状态要依赖上个状态时使用 <code>useReducer()</code> 则非常方便，在配合 <code>Context</code> 与 <code>useContext()</code> 就能实现类似 Redux 库的功能。</p><p class="article-more-link"><a href="/2020/state-management-and-performance-optimization-for-react-context-api-with-hooks/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2020/make-hybrid-platform-cordova/">使用 Phonegap + Cordova 搭建混合开发平台</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2020-06-10T22:20:53.000Z" itemprop="datePublished">2020-06-11</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/Cordov/" rel="tag">Cordov</a>, <a class="article-tag-link" href="/tags/Phonegap/" rel="tag">Phonegap</a></div></div></header><section class="article-body markdown-body"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>使用 Cordova 工具，把 HTML5 打包为 IOS 及 Android 等应用，Cordova 提供了一组设备相关的 API，通过这组 API，移动应用能够用 JavaScript 访问原生的设备功能，如摄像头、麦克风等。Cordova 支持多个操作系统，例如：ios、android、brower、electron、oxs、windows。</p><h2 id="作者所使用的环境"><a href="#作者所使用的环境" class="headerlink" title="作者所使用的环境"></a>作者所使用的环境</h2><ol><li>macOS — High Sierra 10.15.5</li><li>xcode — v11.5.0</li><li>Android Studio — v4.0.0</li><li>Node.js — v14.2.0</li><li>Phonegap — v9.0.0</li><li>Apache Cordova — v9.0.0</li></ol><p class="article-more-link"><a href="/2020/make-hybrid-platform-cordova/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2020/deploy-a-hexo-blog-from-github-actions/">利用 Github Actions 自动部署 Hexo 博客</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2020-05-12T12:35:42.000Z" itemprop="datePublished">2020-05-12</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/CI/" rel="tag">CI</a>, <a class="article-tag-link" href="/tags/Github-Actions/" rel="tag">Github Actions</a>, <a class="article-tag-link" href="/tags/Hexo/" rel="tag">Hexo</a></div></div></header><section class="article-body markdown-body"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>Github Actions 可以很方便实现 CI/CD 工作流，类似 Travis 的用法，来帮我们完成一些工作，比如实现自动化测试、打包、部署等操作。当我们运行 Jobs 时，它会创建一个容器 (runner)，容器支持：Ubuntu、Windows 和 MacOS 等系统，在容器中我们可以安装软件，利用安装的软件帮我们处理一些数据，然后把处理好的数据推送到某个地方。</p><p>本文将介绍利用 Github Actions 实现自动部署 hexo 到 Github Pages，在之前我们需要写完文章执行 <code>hexo generate --deploy</code> 来部署，当你文章比较多的时候，可能还需要等待很久，而且还可能会遇到本地安装的 Node.js 版本与 Hexo 不兼容的问题，目前我就是因为电脑的 Node.js 版本升到 v14 版本导致与 Hexo 不兼容部署不了，才来捣腾 Github Actions 功能的。利用 Github Actions 你将会没有这些烦恼。</p><h2 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h2><h3 id="创建所需仓库"><a href="#创建所需仓库" class="headerlink" title="创建所需仓库"></a>创建所需仓库</h3><ol><li>创建 <code>blog</code> 仓库用来存放 Hexo 项目</li><li>创建 <code>your.github.io</code> 仓库用来存放静态博客页面</li></ol><p class="article-more-link"><a href="/2020/deploy-a-hexo-blog-from-github-actions/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2020/to-build-dark-and-light-theme-with-web/">在 WEB 端实现亮/暗主题跟随系统功能</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2020-04-02T04:14:45.000Z" itemprop="datePublished">2020-04-02</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/CSS/" rel="tag">CSS</a>, <a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a></div></div></header><section class="article-body markdown-body"><h2 id="黑暗模式介绍"><a href="#黑暗模式介绍" class="headerlink" title="黑暗模式介绍"></a>黑暗模式介绍</h2><p>在 2018～2019 年两年时间中，桌面端系统 Windows、MacOS 和 移动端系统 Android、iPhone 分别推出了 <strong>黑暗模式</strong>。在之前不管是微软的 Windows，还是苹果的 MacOS，界面都是以亮色为主，在夜间为了防止刺眼，我门通常会把屏幕亮度调暗，虽然调暗会有所改善，但是依然避免不了有点刺眼。有个别 APP 也提供的有黑暗模式，这种功能通常要在设置里手动打开，打开后白天 APP 依然是黑暗模式，虽然个别 APP 提供的有根据时间区间来控制开关黑暗模式，但是每个支持的 APP 都要设置一遍很麻烦，况且大多还不支持根据时间调节功能，即使都设置好了，返回到系统主页的时候，系统层面还会是刺眼的亮色。而目前系统提供的黑暗模式则可以让 APP 端跟随系统，这样就保证了不管是进系统界面还是进入 APP 页面都会保持统一的亮/暗色模式。</p><h3 id="这里分别引用苹果与谷歌的介绍"><a href="#这里分别引用苹果与谷歌的介绍" class="headerlink" title="这里分别引用苹果与谷歌的介绍"></a>这里分别引用苹果与谷歌的介绍</h3><p>苹果介绍：这是一种戏剧性的新外观，可以帮助您专注于工作，以及营造一种无干扰的环境。</p><p>谷歌介绍：</p><ol><li>可大幅度减少耗电量（取决于设备屏幕，例如 OLED 屏幕）。</li><li>为弱视以及对强光敏感的用户提高可视性。</li><li>让所有人都可以在光线较暗的环境中更轻松地使用设备。</li></ol><p class="article-more-link"><a href="/2020/to-build-dark-and-light-theme-with-web/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2019/pbr-materials-specular-vs-metalness-workflows/">Metalness vs Specular Workflows for PBR Shading</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2019-09-23T07:07:00.000Z" itemprop="datePublished">2019-09-23</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/3D/" rel="tag">3D</a>, <a class="article-tag-link" href="/tags/Canvas/" rel="tag">Canvas</a>, <a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>, <a class="article-tag-link" href="/tags/Three-js/" rel="tag">Three.js</a>, <a class="article-tag-link" href="/tags/WebGL/" rel="tag">WebGL</a></div></div></header><section class="article-body markdown-body"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>随着计算机硬件以及渲染上的进步，我们可以更好的从物理上去模拟灯光属性，从而诞生了新的工作流程 PBR 工作流。PBR是一种着色和渲染技术，基于物理的渲染过程，用于更精确的描述光如何与物体表面互动。</p><p>PBR的优势：</p><ol><li>方法论和算法基于精确的计算公式，免除创作表面的猜想过程。</li><li>在任何光照环境都能表现出正确的结果。</li><li>为不同的艺术家，提供统一的工作流程。</li></ol><h2 id="PBR-工作流分类"><a href="#PBR-工作流分类" class="headerlink" title="PBR 工作流分类"></a>PBR 工作流分类</h2><p>PBR有两种工作流：</p><ol><li>Metal Roughness Worfkow（金属性/粗超度工作流程）</li><li>Specular Glossiness Worfkow（高光/光泽度工作流程）</li></ol><blockquote><p>THREE.js 使用的是第一种工作流，名字子叫做 <code>Metallic-Roughness</code>，对应材质为 <a href="https://threejs.org/docs/index.html#api/en/materials/MeshStandardMaterial" target="_blank" rel="noopener">MeshStandardMaterial</a></p></blockquote><p class="article-more-link"><a href="/2019/pbr-materials-specular-vs-metalness-workflows/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2019/eth-transaction-for-wep3-and-infura/">以太坊概念与使用 wep3/infura 实现以太币及合约币交易流程</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2019-04-02T06:43:48.000Z" itemprop="datePublished">2019-04-02</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/BlockChain/" rel="tag">BlockChain</a>, <a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>, <a class="article-tag-link" href="/tags/Nodejs/" rel="tag">Nodejs</a>, <a class="article-tag-link" href="/tags/eth/" rel="tag">eth</a></div></div></header><section class="article-body markdown-body"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在写一个自动转账的脚本，经过了一番搜寻查阅及实战编写，总结了一些心得和见解，写出来希望能帮助到更多有需要的人。</p><h2 id="以太币及合约币转账概念"><a href="#以太币及合约币转账概念" class="headerlink" title="以太币及合约币转账概念"></a>以太币及合约币转账概念</h2><p>一个以太坊账号包含三个部分，<code>助记词（Mnemonic Phrase）</code>、<code>私钥（Private Key）</code> 以及 <code>地址</code> ，其中助记词与私钥是可以相互转换的。</p><blockquote><p>由于私钥64位，长得太难看，没有可读性，而私钥的备份在电脑上复制起来容易，手抄下来就比较麻烦，但私钥保存在联网的电脑上毕竟不安全，有被其他人看到的风险，于是有了助记词工具，利用某种算法可以将64位私钥转换成十多个常见的英文单词，这些单词都来源于一个固定词库，根据一定算法得来。私钥与助记词之间的转换是互通的，助记词只是你的私钥的另一种外貌体现。</p></blockquote><p>以太坊是一个分布式的智能合约平台，有一套 <a href="https://eips.ethereum.org/EIPS/eip-20" target="_blank" rel="noopener">ERC-20</a> 标准，通过此标准可以发行自己的合约币（Token），最早叫代币，后来统一翻译为通证。以太币是以太坊发行的币，主要是用来结算合约币（Token）交易费用。</p><p class="article-more-link"><a href="/2019/eth-transaction-for-wep3-and-infura/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2019/raspberry-ip-wechat/">实现树莓派(Raspberry Pi)联网发送本机IP到绑定的微信</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2019-02-16T11:33:00.000Z" itemprop="datePublished">2019-02-16</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/IoT/" rel="tag">IoT</a>, <a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>, <a class="article-tag-link" href="/tags/Nodejs/" rel="tag">Nodejs</a>, <a class="article-tag-link" href="/tags/Raspberry/" rel="tag">Raspberry</a></div></div></header><section class="article-body markdown-body"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>通常我们使用树莓派做小主机时往往是不需要连接屏幕的，在开发树莓派时如果没有屏幕的话首先需要知道主机的 IP 才能访问树莓派。一般情况下我们不需要知道，直接可以通过 <code>ssh pi@raspberrypi.local</code> 来连接主机，但是有些设备没有装 avahi 是不支持 <code>raspberrypi.local</code> 域名访问的，还要回归本质老老实实使用 IP，这时候我们每次访问树莓派都要一些步骤去获取 IP，整个过程可能将变得麻烦。我看网上也有一些比如发邮件的解决方案，实际情况大家用微信的频率要远远高于邮箱，这个项目可以让树莓派联网后自动发送本机 IP 到微信，相比邮箱可以减少微信切邮箱…邮箱切微信的动作。安装本项目后可以节约我们的一些时间成本，还可以增加一些开发乐趣。</p><p class="article-more-link"><a href="/2019/raspberry-ip-wechat/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><article class="article" itemscope itemprop="blogPost"><header class="article-header"><h1 itemprop="name"><a href="/2018/offscreen-render-target-with-three-js/">使用 Three.js 的 RenderTarget 实现离屏渲染</a></h1><div class="article-meta clearfix"><a class="article-date" href="https://sanonz.github.io/index.html"><i class="icon-calendar vm"></i> <time class="vm" datetime="2018-09-27T09:48:29.000Z" itemprop="datePublished">2018-09-27</time></a><div class="article-tag-list"><i class="icon-tag vm"></i> <a class="article-tag-link" href="/tags/Three-js/" rel="tag">Three.js</a>, <a class="article-tag-link" href="/tags/WebGL/" rel="tag">WebGL</a></div></div></header><section class="article-body markdown-body"><h2 id="RenderTarget-介绍"><a href="#RenderTarget-介绍" class="headerlink" title="RenderTarget 介绍"></a>RenderTarget 介绍</h2><p>在渲染的时候调用 <code>renderer.render(scene, camera, renderTarget, forceClear)</code> 方法，<code>render</code> 方法有四个参数，我们平时使用只传前两个参数，第一个参数是要绘制的场景，第二个参数是指定相机，相机照射的区域会转换成 2D 绘制到屏幕，而我们今天要讲的就是使用第三个参数，不让渲染的内容直接绘制到屏幕，而是存放到 <code>renderTarget</code> 里。RenderTarget 是一个缓冲区，用来记录渲染后的像素，而不是直接绘制到屏幕上，因此我们可以在绘制屏幕之前做一些处理，以满足特殊的需求。</p><h2 id="把-RenderTarget-作为贴图使用"><a href="#把-RenderTarget-作为贴图使用" class="headerlink" title="把 RenderTarget 作为贴图使用"></a>把 RenderTarget 作为贴图使用</h2><p>首先创建两个场景：一个 <code>RTScene</code> 场景，用来渲染 RenderTarget 贴图、另一个 <code>Scene</code> 场景，用来渲染最终显示到屏幕上的，并调用 <code>RTScene</code> 场景作为贴图。</p><p>创建一个尺寸为 300×300 大小的 RenderTarget 存放 RTScene 的渲染结果</p><figure class="highlight javascript"><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"><span class="keyword">const</span> RT_SIZE = <span class="number">300</span>;</span><br><span class="line"><span class="keyword">const</span> RenderTarget = <span class="keyword">new</span> THREE.WebGLRenderTarget( RT_SIZE, RT_SIZE);</span><br></pre></td></tr></table></figure><p class="article-more-link"><a href="/2018/offscreen-render-target-with-three-js/#more"><span class="vm">阅读更多</span> <i class="icon-arrow-double-right vm"></i></a></p></section></article><nav class="page-nav"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">下一页 »</a></nav></div></div><footer class="footer">Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?e4027971a230b210f4671f485b33846a";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script></footer></main><script type="text/javascript" src="https://unpkg.com/jquery@1.9.1/jquery.min.js"></script><script type="text/javascript">$(function(){var n={nav:$("#nav"),aside:$("#aside"),asideInner:$("#aside-inner"),navInner:$("#nav-inner")},e=!1;function i(){"none"!==n.navInner.css("display")&&n.navInner.css("display","")}n.asideInner.on("webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend",function(){n.aside.hasClass("mobile-open")?n.aside.removeClass("mobile-open"):n.aside.removeClass("mobile-close panel-show"),e=!1}),$("#open-panel, #aside-mask").on("click",function(){e||(n.aside.hasClass("panel-show")?n.aside.addClass("mobile-close"):n.aside.addClass("mobile-open panel-show"))}),$("#open-menus").on("click",function(){n.navInner.slideToggle("normal",i)}),window.innerWidth<=960&&setTimeout(function(){n.navInner.slideUp("normal",i)},3e3),$(window).on("resize",function(){960<$(this).width()&&n.navInner.css("display","")})})</script></body></html>