WebGL學習筆記着色器語法篇-數據類型篇
數據類型 基礎數據類型 關鍵字 數據類型 值 bool 布爾值 ture 或 false int 整型數 值為整數，比如0,1,2,3... float 單精度浮點數 浮點數用小數點表示，比如0.6,3.14,2.8 變量定義 // 整型變量 int coun
昵稱 風研雨墨
@前端
貢獻者508
粉絲0
貢獻者
@前端
動態 列表
可視化學習：使用極座標參數方程和SDF繪製有趣的圖案
前言 本文將介紹如何使用極座標參數方程和上一篇文章提到的距離場SDF來繪製有趣的圖案。 説到曲線和幾何圖形的繪製，我們知道圖形系統默認支持的是通過直角座標繪製，但是有些曲線呢，不太容易使用直角座標系來表示，卻可以很方便地使用極座標來表示，這個時候我們可以選擇通過極座標和直角座標的相互轉換，來實現圖形的繪製。 下面我就用玫瑰線、花瓣線等曲線作為例子來進行演示。 在開始演示之前，我先簡單介紹下極座標和
昵稱 beckyyyy
可視化學習 | 如何使用噪聲生成紋理
本文分享的是如何使用噪聲生成紋理。 首先，什麼是噪聲呢？在上篇文章中我介紹過一個生成隨機數的函數，利用隨機技巧我們生成了一個類似剪紙的圖案，那在自然界中，這種離散的隨機也是比較常見的，比如蟬鳴突然響起又突然停下，比如雨滴隨機落在一個位置，但是隨機和連續並存是更常見的情況，比如山脈的走向是隨機的，但山峯之間的高度又是連續的，比如天上的雲朵、水面的波紋等等。 那麼這種把隨機和連續結合起來，就形成了噪聲
昵稱 beckyyyy
可視化學習：如何使用後期處理通道增強圖像效果
前言 大家好，本文分享的是如何使用後期處理通道增強圖像效果，通過前面幾篇文章，我們瞭解了一些動態生成紋理的方法，比如符號距離場SDF、基於參數方程生成圖案、基於噪聲生成紋理，等等。這些生成紋理的技術有相似的地方，就是根據片元的紋理座標，對片元着色，直接生成紋理。 因為GPU是並行渲染的，每個像素的着色器程序是並行執行的，這樣的渲染很高效。但是在實際需求中，有時我們計算片元色值時，需要依賴周圍像素點
昵稱 beckyyyy
可視化學習：如何用WebGL繪製3D物體
在之前的文章中，我們使用WebGL繪製了很多二維的圖形和圖像，在學習2D繪圖的時候，我們提過很多次關於GPU的高效渲染，但是2D圖形的繪製只展示了WebGL部分的能力，WebGL更強大的地方在於，它可以繪製各種3D圖形，而3D圖形能夠極大地增強可視化的表現能力。 相信很多小夥伴都對此有所耳聞，也有不少人學習WebGL，就是衝着它的3D繪圖能力。 接下來，我就用一個簡單的正立方體的例子來演示在Web
昵稱 beckyyyy
純前端實現圖片偽3D視差效果
作者：vivo 互聯網前端團隊- Su Ning 本文通過depth-anything獲取圖片的深度圖，同時基於pixi.js，通過着色器編程，實現了通過深度圖驅動的偽3D效果。該方案支持鼠標/手勢與手機陀螺儀雙模式交互，在保證性能的同時，為不同終端用户提供沉浸式的視覺體驗。 本文提供配套演示代碼，可下載體驗： Github | vivo-parallax 一、引言 在當今的網頁設計與交互
昵稱 vivo互聯網技術
Cannot find module 'node:fs' 報錯解決 nuxt
問題描述 啓動項目報錯Cannot find module 'node:fs'，百度説是node版本問題，試了各種node版本還是不行（最開始是20.10.0，嘗試了降級到14、16都不行） 解決方法 更新nuxt版本，之前是2.14.6，更新為2.15.8問題解決，啓動後報另一個錯，增加安裝依賴@babel/plugin-proposal-private-property-in-object後問
昵稱 suri
Nuxt.js實戰：Vue.js的服務器端渲染框架
創建Nuxt.js項目 首先，確保你已經安裝了Node.js和yarn或npm。然後，通過命令行創建一個新的Nuxt.js項目： yarn create nuxt-app my-nuxt-project cd my-nuxt-project 在創建過程中，你可以選擇是否需要UI框架、預處理器等選項，根據需要配置。 目錄結構 Nuxt.js遵循特定的目錄結構，其中一些關鍵目錄如下： ├── .nux
昵稱 天涯學館
使用 AST 遷移複雜前端項目的探索
寫在前面 也不知道為什麼，每一次工作變動，所接手的第一個項目，都和項目遷移有關。這次也不例外，在 5 月初入職樂天之後，處理完雜七雜八的事情，第一個接手的項目是將一個大概有 5 年開發週期的 nuxt 2 前端項目，遷移到 nuxt 3 版本。 項目遷移與“屎山” 談及項目遷移，尤其是複雜項目，很容易讓人把它和“屎山”聯繫起來，而事實上也是如此，大多數規模較大的項目，往往都具備“屎山”的各種特徵，
昵稱 littlelyon
用 Nuxt 寫了個簡歷並做了自動化
Nuxt Nuxt 是一個集成了前後端的框架，對於一些小型網站，不需要前後端分離的，是個好的選擇 比如最近就做了一個 me.imba97.cn，準備放一些關於我的一些東西 預覽 大概長這樣 Docker 除了這個簡歷，我把之前的《寫了個簡單的頁面，分享此時此刻在聽的歌》也遷過去了 你可以訪問 me.imba97.cn/playing 查看 之前接口是用的 PHP，因為涉及到後端，需要 Node
昵稱 imba久期
在node環境下使用Mongoose來操作MongoDB
一. 準備工作 在create-react-app 腳手架工具的src文件夾創建pages/Server/server.js做好前期準備工作。 二. 前置文件安裝 yarn add mongoose ,yarn add express,yarn add nondemon 三. 理清概念 我們要知道要使用mongoDB數據庫，你必須先啓動mongoddb的服務，默認地址是localhost:27
昵稱 FFF方
mongose 模糊檢索
$regex為模糊查詢的字符串提供正則表達式功能，MongoDB使用Perl兼容正則表達式 //通過條件查找,支持username模糊搜索並分頁 findAdminByParamsAndPageHasFuzzy(params, pager) { if (params.username) { let pattern = new RegExp(param
昵稱 freeman_Tian
前端模塊化演變歷程
前端模塊化是指將一個大型的前端應用程序分解為小的、獨立的模塊，每個模塊都有自己的功能和接口，可以被其他模塊使用。 前端模塊化的出現主要是為了解決以下幾個問題： 代碼複用：通過模塊化，可以在多個地方重複使用同一個模塊，而不需要重複編寫相同的代碼。 代碼維護：模塊化後的代碼更加清晰，每個模塊負責的功能明確，便於維護和升級。 依賴管理：模塊化可以很好地處理模塊間的依賴關係，確保模塊使用時其依賴已
昵稱 鄧佔勇
duxapp：基於Taro使用模塊化開發，提升開發效率
duxapp是基於Taro二次開發的模塊化框架 使用這個框架，結合框架提供的UI庫和工具庫，能幫助你快速且高質量的完成項目，且能實現同時開發小程序、H5、APP（React Native），並且保證各個端的一致性 duxapp還針對APP開發（React Native）做了大量優化，大大降低了APP發開的難度，你可以閲讀React Native教程，瞭解詳情 下面讓我來詳細介紹如何使用duxapp
昵稱 ShaoGongBra
構建模塊化 CLI：Lerna + Commander 打造靈活的基礎腳手架
在現代軟件開發中，創建 定製化的命令行工具(CLI) 已成為滿足公司業務需求的關鍵一環。這類工具可以輔助執行諸如代碼檢查、項目初始化等任務。為了提高開發效率並簡化維護過程，我們將功能模塊化，並通過多個子包來組織這些功能。本文將介紹如何使用 Lerna 來管理一個多包項目，並基於 Commander 實現一個基礎的 CLI 腳手架框架。 初始化：創建入口文件 項目結構 我們以 ice-basic-c
昵稱 一顆冰淇淋
Promise 與異步編程
Promise 是 JavaScript 中的一個重要概念，與前端的工作更是息息相關。因此本文將整理一下 Promise 在日常工作中的應用。 概念 從 MDN | 使用 Promise 中我們能學習到 Promise 的基礎使用與錯誤處理、組合等概念，可以將 Promise 的特點概括為: Promise 對象有三種狀態，且狀態一旦改變就不會再變。其值記錄在內部屬性 [[Promis
昵稱 anran758
從零開始搭建 TS + webpack-dev-server 的開發環境
目的： 可使用 TypeScript 來開發項目 結合 webpack-dev-server 的熱重載，提升開發效率 瞭解相關依賴和配置的作用 準備 一、初始項目目錄結構（非常簡單） |_ src | |_ index.ts |_ public |_ index.html（只需在body標籤中添加script src="./index.js"/script）
昵稱 Evans_波
你的項目切換代理需要重啓嗎？
問題 參與過多人項目之後，總是會碰到下面的問題。 需要跟另一個人對接了，那麼就要把代理的target改成他的ip地址，改完還得重啓項目。 別人把配置文件的代碼提交了，覆蓋了我的target配置。又得改回來，再次重啓項目。 有可能配置文件的代碼是這樣的 module.exports = { devServer:{ proxy:{ '/api':{
昵稱 我是好人
webpack dev server 與 hot module replace 提高開發效率
通過 webpack 命令編譯源代碼時，如果我們對源代碼進行了修改，需要重新執行命令才能看到編譯後的效果。 這樣在開發中非常的影響效率，如果存在一種方式，當文件被修改時，webpack 自動監聽重新編譯，並反饋給開發者，這樣就能更高效的進行開發。 watch 我們通過 webpack 執行命令時，編譯完成之後進程會停止，而 webpack --watch 編譯完成後，不會停止進程，並且當文件內容發
昵稱 一顆冰淇淋
vue項目中webpack-dev-server的open和host0.0.0.0配置衝突
一個比較老的公司項目，webpack 用的 v3 版本，為了實現localhost、127.0.0.1和本機ip可以同時訪問，webpack的devServer裏的 host 我們一般會設置成 0.0.0.0，這樣本機所有 ipv4 地址都可以實現訪問。 比如我們要將本地運行的前端項目，分享給公司的後端、產品、測試...預覽效果，如果 host 直接設置的 localhost，運行後打開的地址 h
昵稱 咖啡教室
抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細緻排查過程
事情的起因是這樣的，在一個已上線的項目中，其中一個包含登錄和獲取菜單的接口因響應時間較長，後端讓我嘗試未經服務轉發的另一域名下的新接口，舊接口允許跨域請求，但新接口不允許本地訪問（只允許發佈測試/生產的域名訪問）。 問題 那麼問題來了，本地環境該如何成功訪問到新的接口並驗證業務功能是否生效呢？ 嘗試過程 我首先就想到了直接在 webpack 項目中配置 devServer，並且修改接口地址
昵稱 一顆冰淇淋
從0到1：React項目中的Webpack配置實戰
公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目
昵稱 一顆冰淇淋
完整版移動端滑動事件封裝
touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {
昵稱 羊先生
移動端click事件300ms延時解決方案
問題描述 移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生 解決方案 方法一：全局禁止縮放 在html頁面頭部的meta標籤中加上content="user-scalable=no" meta content="user-scalable=no" 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時 適用場景：需要對整個頁面進行禁用雙擊行為。但
昵稱 chen