圖形學(xué)3D渲染【免費(fèi)下載鏈接】spritejsA cross platform high-performance graphics system.項(xiàng)目地址https://gitcode.com/gh_mirrors/sp/spritejs點(diǎn)擊查看免費(fèi)下載SpriteJS 官方文檔中的 examples 示例頁(yè) 是理解這套跨平臺(tái)高性能圖形系統(tǒng)最快的人口它以分組畫廊的形式將全部官方 Demo 劃分為 Basic基礎(chǔ) 2D、D3.js數(shù)據(jù)可視化、Proton.js粒子系統(tǒng)、Ext3D三維渲染四大板塊。本文將以該文檔為骨架逐項(xiàng)解析每個(gè) Demo 的技術(shù)看點(diǎn)并對(duì)照倉(cāng)庫(kù)中 demos 目錄 的真實(shí)源碼config.jsindex.js說(shuō)明其實(shí)現(xiàn)要點(diǎn)幫助你快速定位適合自己的示例作為上手或移植的起點(diǎn)。示例體系總覽examples 頁(yè)、demos 源碼與構(gòu)建產(chǎn)物先厘清三層關(guān)系后續(xù)閱讀示例代碼時(shí)就能對(duì)號(hào)入座文檔入口docs/zh-cn/examples.md 是 docsify 側(cè)邊欄中「例子」一節(jié)的頁(yè)面頁(yè)面內(nèi)通過(guò)ul classdemos列表渲染卡片式導(dǎo)航每張卡片由縮略圖 名稱 路由鏈接/demo/#...組成并帶有data-nosearch屬性以避免被全文搜索干擾。示例源碼demos/ 目錄是每個(gè) Demo 的源碼所在典型結(jié)構(gòu)是config.jsindex.js部分含index.html、style.css。config.js統(tǒng)一采用 webpackraw-loader拉取同目錄資源返回{javascript, html, css, packages}給演示平臺(tái)注入渲染。以 demos/quick_start/config.js 為例export default async () { const [html, javascript, css] await Promise.all([ import(!raw-loader!~/index.html), import(!raw-loader!./index.js), import(!raw-loader!~/style.css), ]); return { javascript, html: { code: html }, css: { code: css }, packages: { js: [] } }; };構(gòu)建產(chǎn)物與可直開頁(yè)面docs/demo/ 目錄存放構(gòu)建后的演示站點(diǎn)資源runtime~index.bundle.js、spritejs.js、spritejs.es.js等打包文件即/demo/#...路由對(duì)應(yīng)的運(yùn)行時(shí)而 examples/ 目錄下還有一批可直接在瀏覽器打開的單頁(yè) HTML 示例如 examples/quick_start.html、examples/d3_map.html適合不搭構(gòu)建工具直接看效果。所有 Demo 的公共骨架都在 demos/quick_start/index.js 中體現(xiàn)在#stage容器上創(chuàng)建Scene調(diào)用scene.layer()分層、scene.preload()預(yù)加載紋理、layer.append()掛載精靈最后通過(guò)spritejs全局對(duì)象或import * as spritejs from spritejs訪問(wèn) Scene、Sprite、Label、Group、Path 等類。安裝與引入方式詳見 快速入門npm install spritejs瀏覽器可用 CDN 版本Node 端需配合 node-canvas。Basic 基礎(chǔ)示例Basic 板塊覆蓋了 SpriteJS 2D 渲染的核心能力共 13 個(gè)示例是對(duì)基礎(chǔ) API 的最佳演示。quick start快速上手示例源碼 演示了完整的多圖層 動(dòng)畫鏈路創(chuàng)建 1200×1200 的Scene用scene.layer(bg)與scene.layer(fg)分出背景層與前景層handleEvent: false關(guān)閉事件以提升性能背景層繪制帶borderRadius的圓角Sprite舞臺(tái)前景層掛載以texture: guanguan1.png初始化的機(jī)器人精靈。隨后用一連串a(chǎn)wait robot.animate([...], {...}).finished串起「走路動(dòng)畫easing: step-end的逐幀換紋理、下落ease-in、橫移ease-in-out、原地轉(zhuǎn)身direction: alternateiterations: 2、循環(huán)行走」等動(dòng)作最后while(1)無(wú)限重放。它直觀展示了animate()返回對(duì)象的finishedPromise 與attr({pos, anchor, scale, transformOrigin})的變換寫法。basic sprites基礎(chǔ)精靈示例源碼 展示了用多個(gè)Sprite拼裝角色并分層動(dòng)畫head/neck/body/leftArm/rightArm 五個(gè)精靈通過(guò)pos與zIndex組合成人偶依次以delay間隔做「下墜落地」動(dòng)畫body → leftArm → rightArm → neck → head隨后combine()/stretch()兩組函數(shù)在mouseenter/mouseleave事件觸發(fā)下往復(fù)「伸長(zhǎng)-收回」。注意其中l(wèi)ayer.canvas.style.backgroundColor直接設(shè)置畫布背景色這是跨實(shí)現(xiàn)都生效的通用寫法。path groups路徑與分組示例源碼 是本板塊信息量最大的一個(gè)先用 SVG 風(fēng)格的路徑串M... C...構(gòu)造Path檸檬外輪廓與半透明投影opacity: 0.05再用Group聚合 12 個(gè)三角形Path拼成旋轉(zhuǎn)檸檬lemonGroup.animate([{rotate: 360}], {duration: 10000, iterations: Infinity})做無(wú)限旋轉(zhuǎn)同時(shí)演示了通過(guò)layer.timeline.playbackRate 3.0 / 1.0在鼠標(biāo)懸停時(shí)加速/恢復(fù)全局時(shí)間軸——這是 SpriteJS 時(shí)間軸控制的經(jīng)典用法。labels文字標(biāo)簽示例源碼 展示了Label的基礎(chǔ)使用new Label(Hello World !)設(shè)置font: bold 48px Arial與fillColor兩個(gè) Label 放入Group后對(duì)Group整體做scale/rotate交替動(dòng)畫direction: alternate無(wú)限往返體現(xiàn)「分組變換 文字渲染」的組合。button按鈕示例源碼 用Label常態(tài)文字Sprite懸停高亮塊實(shí)現(xiàn)完整交互按鈕mouseenter時(shí)高亮塊從寬 96 動(dòng)畫擴(kuò)展到 324ease-in300msmouseleave收回ease-out500ms并針對(duì)移動(dòng)端處理了touchstart/touchend與鼠標(biāo)事件的沖突touched標(biāo)記、mousedown/mouseup的按壓縮放scale: 0.9 / 1.0與click回調(diào)。代碼中的注釋還列出了移動(dòng)端事件觸發(fā)順序是處理跨端交互的實(shí)用參考。transforms變換示例源碼 用 5 個(gè)按鈕translate/rotate/scale/skew/stop逐一演示變換屬性動(dòng)畫{translate: [0, -100]}位移、{rotate: 360}旋轉(zhuǎn)、含scale: [0, 1]、scale: [-1, 1]的鏡像縮放序列、{skew: [0, 30]}斜切以及animation.cancel()的中止控制。注意這里的按鈕是繼承Label的子類在connect(parent, zOrder)鉤子里批量注冊(cè)mouseenter/mousedown/mouseup/mouseleave事件——這是自定義可復(fù)用精靈的推薦姿勢(shì)。events事件示例源碼 把事件模型玩到了極致虛擬鍵盤上的KeyButtonLabel子類同時(shí)監(jiān)聽keydown/mousedown/touchstart與keyup/mouseup/touchenddocument層監(jiān)聽物理鍵盤把event.key轉(zhuǎn)成button.dispatchEvent(event)派發(fā)回虛擬按鍵人物huanhuan平時(shí)做懸浮撲翼動(dòng)畫{translate: [8.5, 10]} → {translate: [-8.5, -10]}交替按下 W/A/S/D 時(shí)暫停撲翼、按duration Math.abs(10 * (y - destY))等比例時(shí)長(zhǎng)移動(dòng)松開后flapping.play()恢復(fù)。涉及animation.pause()/play()/cancel(true)的完整生命周期管理。filters濾鏡示例源碼 用generateSpriteWithFilter()工廠函數(shù)一口氣演示了與 CSS3 同名同參數(shù)的全部濾鏡drop-shadow(2px, 2px, 10px, #FF6040)、blur(4px)、brightness(50%)、contrast(200%)、grayscale(100%)、hue-rotate(90deg)、invert(75%)、opacity(0.25)、saturate(30%)、sepia(100%)同時(shí)展示了textureRect: [50, 40, 180, 220]截取紋理局部區(qū)域的用法。濾鏡參數(shù)的解析與渲染在 src/utils/filter.js 中實(shí)現(xiàn)相關(guān)測(cè)試見 test/utils/filter.test.js。animations動(dòng)畫控制示例源碼 是動(dòng)畫綜合場(chǎng)10 只噴火小鳥Group包裹Sprite(huanhuan.png) 內(nèi)外兩層Path火焰各自隨機(jī)時(shí)長(zhǎng)飛行并通過(guò)iterations: Infinity無(wú)限往返右側(cè) 4 個(gè)控制按鈕直接操作fglayer.timeline.playbackRateSpeed up 0.2、Slow down- 0.2、Pause 0、Play 1另有一個(gè)Label每 100ms 刷新顯示實(shí)時(shí)速率。它證明時(shí)間軸是圖層級(jí)的全局屬性可以整體加速/暫停所有元素動(dòng)畫。svg pathSVG 路徑形變示例源碼 演示Path的路徑插值形變morph為內(nèi)外兩層火焰各準(zhǔn)備 4 段同構(gòu)的d路徑串target.animate([{d: from}, {d: to}], {duration: 600})逐個(gè)形變并循環(huán)。配合scale: 4 / 3放大與fillColor著色就實(shí)現(xiàn)了與 pasition 類庫(kù)同款的火苗搖曳效果是矢量路徑動(dòng)畫的代表作。offset api偏移路徑動(dòng)畫示例源碼 演示 CSS Motion Path 語(yǔ)義的沿路徑運(yùn)動(dòng)先繪制一條作為輔助線的Path黃色描邊再讓Sprite設(shè)置offsetPath: d與輔助線同一路徑串然后animate([{offsetDistance: 0}, {offsetDistance: 1}], {duration: 8000, direction: alternate, iterations: Infinity})沿路徑來(lái)回巡游第二條動(dòng)畫用offsetRotate: auto/reverse控制精靈沿路徑自動(dòng)轉(zhuǎn)向配合scale: [0.2, -0.2]實(shí)現(xiàn)掉頭時(shí)的鏡像翻轉(zhuǎn)。groups分組示例源碼 結(jié)合dat.GUI演示對(duì)象樹的按名查詢給Group與內(nèi)部精靈設(shè)置name屬性通過(guò)layer.getElementsByName(val)/group.getElementsByName(val)動(dòng)態(tài)切換被控制對(duì)象GUI 滑條直接改寫目標(biāo)元素的x/y屬性。它說(shuō)明元素name 查詢 APIsrc/selector/index.js是管理大量節(jié)點(diǎn)的利器。ray光線示例源碼 結(jié)合Animator與Gradient實(shí)現(xiàn)隨機(jī)光柱特效每次生成一條二次貝塞爾PathM10,80 q${controller},-80 350,0new Animator(3000, p {...})中根據(jù)進(jìn)度p構(gòu)造動(dòng)態(tài)Gradient漸變描邊并調(diào)用s.getPathLength()/s.getPointAtLength()計(jì)算路徑采樣點(diǎn)最后s.remove()自清理。這是「外部時(shí)鐘驅(qū)動(dòng) 程序化漸變色」的進(jìn)階示例?？s略圖參考Basic 基礎(chǔ)示例效果D3.js 數(shù)據(jù)可視化示例SpriteJS 的對(duì)象樹結(jié)構(gòu)與 d3 引擎天然友好官方特性 明確列出「對(duì) d3 引擎友好能夠無(wú)縫使用」核心技巧是d3.select(layer)直接選擇圖層再用append(sprite/path/label)以 d3 的數(shù)據(jù)驅(qū)動(dòng)模式批量創(chuàng)建精靈。bar graph柱狀圖示例源碼 是入門 d3 集成的最短路徑d3.select(fglayer)后selectAll(sprite).data(dataset).enter().append(sprite)批量生成柱體chart.transition().duration(2000).attr(width, d scale(d)).attr(bgcolor, ...)用 d3 transition 完成入場(chǎng)動(dòng)畫坐標(biāo)軸用SpriteSvg承載new SpriteSvg({x, y})d3.select(axisNode.svg).append(g).call(d3.axisBottom(scale))注釋中還保留了 3.4 之前把 SVG 軸轉(zhuǎn)成 Blob 紋理的舊方案對(duì)比。hierarchy層級(jí)關(guān)系圖示例源碼 用d3.hierarchy d3.pack生成圓形打包圖把每個(gè)節(jié)點(diǎn)渲染成label元素pos/size/bgcolor/borderRadius均由數(shù)據(jù)回調(diào)決定字號(hào)按Math.log2(d.value)縮放text只在葉子節(jié)點(diǎn)顯示名稱mousemove時(shí)高亮border: [3, red]并把名稱寫入頂部 Labelmouseleave清除——體現(xiàn)「d3 數(shù)據(jù)綁定 SpriteJS 渲染」的配合。map地圖示例源碼 演示 GeoJSON 地圖渲染d3.geoMercator()投影 d3.geoPath()生成路徑串a(chǎn)ppend(path).attr(d, path)直接繪制各省輪廓click打印d.properties.namemouseenter/mouseleave切換fillColor。渲染效果可參考 examples/d3_map.html 與縮略圖links力導(dǎo)向關(guān)系圖示例源碼 把d3.forceSimulation的節(jié)點(diǎn)/連線映射為sprite與pathtick回調(diào)中更新每條連線d與每個(gè)節(jié)點(diǎn)pos后手動(dòng)layer.render()圖層以autoRender: false關(guān)閉自動(dòng)渲染以配合 d3 幀循環(huán)拖拽通過(guò)d3.drag()layer.toLocalPos(d3.event.x, d3.event.y)把屏幕坐標(biāo)換算為圖層局部坐標(biāo)實(shí)現(xiàn)是「外部引擎驅(qū)動(dòng) 手動(dòng)合幀」的典型模式。map centroid地圖質(zhì)心縮放示例源碼 用d3.geoAlbersUsa() topojson 繪制美國(guó)各州點(diǎn)擊某州時(shí)用path.centroid(d)求質(zhì)心再d3.select(layer).selectAll(path).transition().duration(750).attr(pos, ...)平移整個(gè)圖層完成「點(diǎn)擊聚焦」效果。map search地圖搜索鉆取示例源碼 是 D3 板塊最復(fù)雜的實(shí)戰(zhàn)項(xiàng)目構(gòu)建World類實(shí)現(xiàn)多級(jí)地圖鉆取。MapLoader按/assets/mapdata/${mapId}.json加載倉(cāng)庫(kù) docs/assets/mapdata/ 下的地圖數(shù)據(jù)并緩存getPath(destId)基于mapRelation的父子關(guān)系計(jì)算進(jìn)出路徑enter/leave方法用Animator對(duì)layer.attributes.transform矩陣插值實(shí)現(xiàn)「放大進(jìn)入 / 縮小退出」的平滑過(guò)渡最后在頁(yè)面頂部注入輸入表單按地區(qū)名或 ID 搜索并world.moveTo(id)。它還示范了path.bounds()做視口外要素過(guò)濾、layer.getResolution()自適應(yīng)等工程化細(xì)節(jié)。Proton.js 粒子系統(tǒng)示例Proton 是一個(gè)流行的 JavaScript 粒子引擎SpriteJS 通過(guò)ProtonRenderer(layer)把粒子直接渲染到圖層上。5 個(gè)示例從入門到進(jìn)階展示了完整粒子工作流。circle particle圓形粒子示例源碼 是最簡(jiǎn)粒子模板new Proton.Emitter()依次配置emitter.rate new Proton.Rate(Proton.getSpan(10, 20), 0.1)每 0.1 秒發(fā)射 10~20 個(gè)、addInitialize(Radius(1, 12))、Life(2, 4)、Velocity(3, Span(0, 360), polar)與Color(#ff0000, random)、Alpha(1, 0)行為設(shè)置emitter.p.x/y后emitter.emit(5)最后new ProtonRenderer(layer)掛進(jìn)proton用requestAnimationFrame循環(huán)proton.update()。block particle塊粒子與 custom behavior自定義行為behavior 示例源碼 演示了兩大進(jìn)階能力一是軌跡殘留——用new Block()以半透明bgcolor蒙層覆蓋圖層并重寫renderer.onProtonUpdate鉤子在每幀繪制蒙層與layer.render({clear: false})形成拖尾效果二是自定義行為——手寫{initialize(particle), applyBehaviour(particle)}結(jié)構(gòu)的circleBehaviour/rouletteBehaviour用內(nèi)外擺線參數(shù)方程驅(qū)動(dòng)粒子畫出旋轉(zhuǎn)花環(huán)軌跡行為結(jié)束后自動(dòng)changeBehaviour()切換到下一行為同時(shí)Color.parse(hsl(...))每 100ms 輪換顏色。block 示例demos/protonjs/block/則聚焦 Block 元素在粒子場(chǎng)景中的使用。big fire大火示例源碼 展示紋理粒子與混合模式先loadImage異步加載火花貼圖new Sprite({texture: image})作為粒子外觀addInitialize(new Proton.Body(sprite))發(fā)射源用CircleZone圓形區(qū)域關(guān)鍵一行是gl.blendFunc(gl.ONE, gl.ONE)——直接操作layer.renderer.glRenderer.gl切換為疊加混合讓密集粒子產(chǎn)生熾熱發(fā)光效果再配合Scale(1, 0.2)、Alpha(1, 0.2)衰減。bg particles背景粒子示例源碼 是綜合性最強(qiáng)的一個(gè)雙層圖層bglayer負(fù)責(zé)粒子、fglayer是contextType: 2d的疊加層粒子以Arc({radius: 5})圓形幾何體為外觀RectZone全屏隨機(jī)出生并CrossZone邊界回收renderer.onProtonUpdateAfter鉤子里用 2D context 在兩兩粒子距離小于 R 時(shí)畫連線經(jīng)典的「星空連線」效果鼠標(biāo)按下時(shí)emitter.emit(once)定向爆噴、移動(dòng)時(shí)粒子平滑跟隨p0.p.x (e.x - p0.p.x) * ease。示例還演示了scene.addEventListener(resize, ...)配合_.debounce的響應(yīng)式重排。Ext3D 三維渲染示例Ext3D 是 SpriteJS 的 3D 擴(kuò)展用法見 3D 擴(kuò)展文檔通過(guò)scene.layer3d()創(chuàng)建 3D 圖層從spritejs.ext3d引入幾何體、著色器與相機(jī)。examples 頁(yè)列出 13 個(gè)三維示例涵蓋從立方體到 GPGPU 的全鏈路。3D Cube三維立方體示例源碼 是最短的三維起步代碼scene.layer3d(fglayer, {camera: {fov: 35, pos: [3, 3, 5]}})配置相機(jī)視野與位置layer.createProgram({...shaders.NORMAL_GEOMETRY, cullFace: null})用內(nèi)置法線著色器創(chuàng)建程序new Cube(program, {colors: red red blue blue green green})六面著色后layer.append(cube)最后layer.setOrbit()一行開啟鼠標(biāo)軌道控制。效果見縮略圖Camera相機(jī)與視錐剔除示例源碼 展示了自定義 GLSL 著色器與視錐剔除vertex/fragment內(nèi)聯(lián)著色器實(shí)現(xiàn)樹木的霧效與高度淡出layer.loadModel()加載 JSON 模型后批量new Mesh3d生成 400 棵隨機(jī)旋轉(zhuǎn)縮放的樹隨后創(chuàng)建第二個(gè)Camerafov: 65, far: 10并把Cylinder相機(jī)模型掛載其上在layer.tick()中驅(qū)動(dòng)相機(jī)沿cameraPath移動(dòng)、lookAt追蹤目標(biāo)逐幀updateFrustum()后layer.traverse(node node.attributes.display frustumCamera.frustumIntersects(node) ? : none)做視錐內(nèi)/外可見性切換——這是性能優(yōu)化的標(biāo)準(zhǔn)示范。其余三維示例一覽其余 11 個(gè)示例覆蓋 Ext3D 的各個(gè)進(jìn)階主題均可在 demos/3d/ 對(duì)應(yīng)子目錄找到源碼并與 3D 擴(kuò)展進(jìn)階文檔 一一對(duì)應(yīng)示例主題對(duì)應(yīng)文檔cubemap立方體貼圖環(huán)境ext3d 文檔pbr基于物理的渲染著色器 / 渲染模式geometry / geometry3基礎(chǔ)幾何體與模型幾何體繪制幾何體model_texture模型加載與貼圖模型 / 文字group33D 分組分組skydome天空穹頂著色器video視頻紋理模型shadow陰影陰影post后期處理通道后期處理通道gpgpu通用 GPU 計(jì)算通用GPU另外 examples.md 中被注釋掉的OBB Hit與Matter.js mixed shapes表明曾規(guī)劃 OBB 碰撞檢測(cè)與物理引擎集成示例目前尚未開放可作為后續(xù)版本的關(guān)注點(diǎn)。從示例到實(shí)戰(zhàn)推薦的探索路線結(jié)合 快速入門文檔 與上面的示例矩陣給出三條遞進(jìn)路徑2D 入門先跑 quick_start 與 basic_sprites 建立Scene/Layer/Sprite/attr/animate心智模型再對(duì)照 block 元素、路徑元素、過(guò)渡與動(dòng)畫、事件 文檔逐項(xiàng)深化需要交互 UI 時(shí)參考 button 與 events 的事件處理模式。數(shù)據(jù)可視化從 d3/bar 起步掌握d3.select(layer)的接入方式再依次攻 map靜態(tài)地理、links力導(dǎo)向 手動(dòng)合幀、map_search多級(jí)地圖鉆取 矩陣過(guò)渡即可支撐大多數(shù) dashboard 需求相關(guān)最佳實(shí)踐可參考 與 d3 一同使用。特效與三維粒子特效從 protonjs/circle 起手進(jìn)階殘留與自定義行為看 behavior疊加混合看 fire三維從 3d/basic 起步性能優(yōu)化看 camera2 的視錐剔除并配合 3D 擴(kuò)展 全篇文檔使用。示例代碼同時(shí)是倉(cāng)庫(kù)內(nèi)部 API 的最佳「活文檔」需要確認(rèn)某個(gè)類或?qū)傩缘男袨闀r(shí)直接在對(duì)應(yīng)示例的 index.js 里搜索用法再跳轉(zhuǎn) API 速查文檔 或源碼如 src/node/sprite.js、src/animation/index.js驗(yàn)證細(xì)節(jié)。按這條路線走你就能從「看示例」平滑過(guò)渡到「寫自己的 SpriteJS 應(yīng)用」。贊分享圖形學(xué)3D渲染【免費(fèi)下載鏈接】spritejsA cross platform high-performance graphics system.項(xiàng)目地址https://gitcode.com/gh_mirrors/sp/spritejs點(diǎn)擊查看免費(fèi)下載相關(guān)推薦SpriteJS 官方示例全覽從 Basic 基礎(chǔ)元素到 D3 可視化、Proton 粒子與 Ext3D 三維渲染SpriteJS 官方示例全覽從 Basic 基礎(chǔ)元素到 D3 可視化、Proton 粒子與 Ext3D 三維渲染 本文以 SpriteJS 官方示例畫廊圖形學(xué)3D渲染Platypus新手指南三步把腳本變成可雙擊運(yùn)行的macOS應(yīng)用Platypus新手指南三步把腳本變成可雙擊運(yùn)行的macOS應(yīng)用 你寫了一個(gè)批處理腳本自己在終端里跑得順可同事打不開終端你又不想一步步教。Platypu開發(fā)工具SpriteJS 3D 擴(kuò)展庫(kù)使用教程從基礎(chǔ)模型到復(fù)雜場(chǎng)景SpriteJS 3D 擴(kuò)展庫(kù)使用教程從基礎(chǔ)模型到復(fù)雜場(chǎng)景 SpriteJS 3D 擴(kuò)展庫(kù)是一個(gè)跨平臺(tái)高性能圖形系統(tǒng)為開發(fā)者提供了創(chuàng)建驚艷3D場(chǎng)景的強(qiáng)大工具圖形學(xué)3D渲染上一篇DataHub Redshift 采集權(quán)限配置實(shí)戰(zhàn)DataHub 用戶創(chuàng)建與系統(tǒng)表授權(quán)詳解下一篇OpenCore Legacy Patcher技術(shù)揭秘深度探索老Mac升級(jí)方案與非官方系統(tǒng)兼容性創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考