c-zhuo / easycanvas Goto Github PK

View Code? Open in Web Editor NEW

330.0 11.0 49.0 37.85 MB

数据驱动、2D&3D、渐进式Canvas库，支持JSX，配备Chrome调试插件，支持微信小游戏、物理引擎等。

Home Page: https://c-zhuo.github.io/easycanvas/

License: MIT License

JavaScript 95.05% Vue 3.22% CSS 1.25% HTML 0.34% Shell 0.14%

canvas canvas-game javascript-library webgl webgl-library canvas-library animation

easycanvas's Introduction

Easycanvas

Easycanvas是一个同时支持2D和3D渲染、轻量、高效、MVVM模式的渐进式canvas渲染库。提供了基于组件的开发方式，支持JSX写法，可在浏览器、微信小游戏和小程序中使用，并具备Chrome插件来便于开发（包括数据结构的显示、对canvas中某个元素的样式进行调整等），也支持物理引擎、3D模型渲染等插件的渐进式引入。

浏览器兼容性：IE>=9（原因为defineProperty）

中文教程及在线Demo.

Feature

☑ 渐进式基础库
☑ JSX写法
☑ 脚手架
☑ 2D渲染
☑ 精灵动画（组件形式）
☑ 物理引擎（插件）
☑ 事件、生命周期钩子、自定义钩子
☑ 使用JSX开发（babel-plugin）
☑ 开发者工具（Chrome扩展插件）
☑ 基础文档
☑ 基础功能的单元测试
☑ 3D渲染（插件）
☑ 2D、3D混合渲染
☑ 3000个150x150的图片2D渲染时保持60fps
☑ 1000个3D模型渲染时保持60fps
☑ 允许自定义组件
☑ 允许自定义插件
☑ 2D图片的运行时像素编辑
☑ 文档补齐
☑ 支持加载mmd模型（插件）
☑ 支持加载3ds模型（插件）
☑ 支持加载fbx模型（插件）
☑ 支持加载dds图片（插件）
☑ 支持微信小游戏（插件）
☑ 支持微信小程序（插件）
☑ CanvasUI基础组件
☐ 支持typescript
☐ 导出原生javascript+canvas骨架屏（未开放）
☐ 调试工具完善
☐ CanvasRouter路由（插件）
☐ CanvasStore数据管理（插件）
☐ 更多功能的单元测试
☐ Webgl的3D渲染性能优化

Changelog

更新日志.

Chrome调试工具

Clone这个仓库，打开Chrome://extensions，然后将chrome-devtools/dist目录拽进去安装即可。

Introduction

A lite(30kb+) canvas library, includes a Chrome plugin for debugging. Support physics and animations with high performace. Suits mobile and PC(including IE).

More demos

npm run dev, then localhost:8080/demos/demo1.html.

How to use

Import Easycanvas:

build/index.common.js: For Node.
build/easycanvas.standalone.dev.js: Standalone version, support chrome develop tools.
build/easycanvas.standalone.prod.js: Standalone version for production mode, 30kb+.

easycanvas's People

Contributors

Stargazers

Watchers

easycanvas's Issues

webgl添加透明纹理的问题

您好!
我使用Easycanvas的webgl插件渲染图片,添加了一个背景图,又在背景图上增加了一个组件图;
组件图使用的纹理图片是.png格式,图片是透明背景,
但是最终的渲染结果是组件图有了白色的背景,能帮忙指点一下原因吗?这种情况有办法解决吗?
测试代码在这个链接: https://cyitianyou.github.io/easycanvas-demo/demo.html

有没有Easycanvas.webglShapes.custom使用纹理贴图的demo呀?

类似于这样的，我只找到了使用colors的demo,可以使用img吗?
Easycanvas.webglShapes.custom({
　　　vertices: vertices,
　　　indices: indices,
　　　textures: textures,
　　　img: 'https://raw.githubusercontent.com/c-zhuo/tanyitan/3d/debug/docs/stone.jpg'
})