文字作为纹理贴图 From:http://www.linhongxu.com/post/view?id=222 这里可以使用canvas作为纹理贴图,Three为我们提供里CanvasTexture function getTextCanvas(text){ var width=512, height=256; var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height;

很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref="canvas" width="200" height="200"/> 正常情况下一般都是这么写的,但是实际上对于canvas来说,这个canvas.width canvas.height 与canvas.style.width canvas.styl

在这个课程里主要完成讲解两个demo: 一个是电视墙:用视频做纹理 一,用视频做纹理 首先我们用video标签把视频源引入: <video id="video" autoplay loop style="display:none"> <source src="http://10.1.26.29:84/assets/video/sintel_trailer-480p.ogv" type="video/ogg"&

本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.显示模糊照片 其实一般的交互不是模糊照片,这里我只是为了夸张下效果,用了张模糊的原图,哈哈哈,canvas本身是可以对清晰的图片做滤镜处理,涉及到很多图形学的算法,然后我不会,默默的打开了PS手动高斯模糊了一张照片...嗯,没毛病! 首先定义一个canvas元素 <canvas id="canva

在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制. 首先是场景截图: 上图在场景中导入一个Babylon骨骼模型,使用asdw.空格.鼠标控制加速度移动,在移动时播放骨骼动画. 上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后会加速远离人类. 上图,一个局域网中的新玩家进入场景,(他们头上的数字是WebSocket分配的session id),兔子们受到0和1的叠加影响. 具体实现: 一.工程结构: 前台WebStorm工程: 其中ma

苹果公司在 iPhone 5s 的发布会上公布了全新的指纹识别安全技术,也就是 Touch ID,开创了生物安全识别技术在便携设备上使用的新篇章.此后,苹果还将此技术带到了 iPad 上.此前没有任何厂家将指纹识别成功的打造在如此常用的设备上,因为涉及到非常复杂的工艺和技术难关.苹果在2012年收购在此方面技术领先的 Authen Tec 公司作为技术基础,并为iOS设备量身打造了 Touch ID.这使得苹果在智能设备的指纹识别方面比其他厂商更加智能且利于使用.三星的指纹识别功能必须要用手指按

WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite/tunnel three.js的粒子系统 three.js的粒子系统主要是依靠精灵体来创建的,要实现three.js中的粒子系统创建,一般有两种方式. 第一种是在场景中使用很多歌THREE.Sprite创建单个的精灵,这样创建的每一个精灵体,我们都可以单独对它们进行操作,同时我们也可以用一个THR

使用粒子可以很容易的创建很多细小的物体,例如雨滴雪花等 本章主要内容: 1 使用ParticleBasicMaterial(基础粒子材质)来创建和设计粒子 2 使用ParticleSystem来创建一个粒子集合 3 使用已有的几何体来创建一个粒子系统 4 让粒子和粒子系统动起来 5 用纹理给粒子造型 6 使用ParticleCanvasMaterial在画布上为粒子造型 名称 描述 Sprite粒子 参数是material,生成的sprite可以设置position和scale等属性直接添加到场

在前三篇文章的基础上,为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程,包括从手中选择单位放入棋盘.显示单位具有的技能.选择技能.不同单位通过技能进行交互.处理交互结果以及进入下一回合恢复棋子的移动力.因为时间有限,这一阶段的目的只是实现基本规则的贯通,没有关注场景的美观性和操作的便捷性,也没有进行充分的测试. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate2/HTML/TEST4rule.html查看“规则测试页面

我的博客简单简洁 可能表达不清. 如有想法, 敬请留言.谢谢! 群:881784250 https://github.com/ccaleb/endless-runner/tree/master/javascript-pixi/pixi.js-master 1:pixi.js的优点 代码简单,性能高效,扩展性强 PixiJS的性能优势, pixi.js专注于渲染,在js2d游戏引擎中,其性能是相当彪悍的.(官网上说最强) 见测试 https://www.goodboydigital.com/pix

纹理分析是对图像灰度(浓淡)空间分布模式的提取和分析.纹理分析在遥感图像.X射线照片.细胞图像判读和处理方面有广泛的应用.关于纹理,还没有一个统一的数学模型.它起源于表征纺织品表面性质的纹理概念,可以用来描述任何物质组成成分的排列情况,例如医学上X 射线照片中的肺纹理.血管纹理.航天(或航空)地形照片中的岩性纹理等.图像处理中的视觉纹理通常理解为某种基本模式(色调基元)的重复排列.因此描述一种纹理包括确定组成纹理的色调基元和确定色调基元间的相互关系.纹理是一种区域特性,因此与区域的大小和形状有关

朴素贝叶斯python代码实现(西瓜书) 摘要: 朴素贝叶斯也是机器学习中一种非常常见的分类方法,对于二分类问题,并且数据集特征为离散型属性的时候, 使用起来非常的方便.原理简单,训练效率高,拟合效果好. 朴素贝叶斯 贝叶斯公式: 朴素贝叶斯之所以称这为朴素,是因为假设了各个特征是相互独立的,因此假定下公式成立: 则朴素贝叶斯算法的计算公式如下: 在实际计算中,上面的公式会做如下略微改动: 由于某些特征属性的值P(Xi|Ci)可能很小,多个特征的p值连乘后可能被约等于0.可以公式两边取log然后

一.论原五行相生.相克关系不妥之处: 祖国医学原“五行说”即金.木.水.火.土.在五行学说中说相生规律为:金生水:水生木:木生火:火生土:土生金.相克规律为:火克金:金克木:木克土:土克水:水克火.这种相生相克规律有的不妥.相生规律如:1.木不生火,而是木生气,气生火.2.金不生水,而是金生电,电生水.相克规律如:1.火不克金,而是火克木,是水克金:2.金不克木,而是金克火,是火克木.3.木不克土,而是木克电,是电克土:4.土不克水,而是土克气,是气克水:5.水不克火,而是水克金,是金克火. 何

目录 什么是决策树(Decision Tree) 特征选择 使用ID3算法生成决策树 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策树 Python代码(sklearn库) 什么是决策树(Decision Tree) 引例 现有训练集如下,请训练一个决策树模型,对未来的西瓜的优劣做预测. 先不谈建立决策树模型的算法,我们先看一下基于“信息增益”(后面讲)生成的决策树的样子 一棵决策树包含一个根节点.若干个内部节点.若干个叶节点.

本博客是基于对周志华教授所著的<机器学习>的"第7章 贝叶斯分类器"部分内容的学习笔记. 朴素贝叶斯分类器,顾名思义,是一种分类算法,且借助了贝叶斯定理.另外,它是一种生成模型(generative model),采用直接对联合概率P(x,c)建模,以获得目标概率值的方法. 目录 预备知识 先验概率与后验概率 贝叶斯定理(Bayesian Theorem) 朴素贝叶斯分类器 何为"朴素":属性条件独立性假设 分类准则 离散属性与连续属性值的分别处理 例子

前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebGL引擎(下文简称WebGL引擎)使用Web Worker的一些实践方案,虽然这个项目最终夭折并且我也从搜狗离职了,但在开发WebGL引擎过程中的一些心得和实践还是值得写一写的. 搜狗地图WebGL引擎使用Actor模型管理worker线程,所以这篇文章就围绕这一点展开,包括以下内容: WebGL引擎

<Machine Learning in Action>-- 白话贝叶斯,"恰瓜群众"应该恰好瓜还是恰坏瓜 概率论,可以说是在机器学习当中扮演了一个非常重要的角色了.Taoye对概率论知识的掌握目前也还仅仅只是停留在本科期间所接触到的,而且还都已经忘了不少.快速的复习回顾一下之后,用来理解机器学习中的贝叶斯算法,还是足够的. 手撕机器学习系列文章目前已经更新了支持向量机SVM.决策树.K-近邻(KNN),现在我们来玩玩贝叶斯算法,其他机器学习系列文章可根据自己需求来食用(持

[决策树]西瓜数据graphviz可视化实现 一.问题描述: 使用西瓜数据集构建决策树,并将构建的决策树进行可视化操作. 二.问题简析: 首先我们简单的介绍一下什么是决策树.决策树是广泛用于分类和回归任务的模型.本质上,它从一层层的if/else问题中进行学习,并得出结论. 三.代码实现: 说明:本实例运行在linux环境下,通过jupyter notebook运行. 依赖项:graphviz 下载GraphViz's executables的网址:http://www.graphviz.org

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { margin: 0; overflow: hidden; //隐藏body窗口区域滚动条 } </style> <!--引入three

function  pxRa(cxt) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRa

我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的",对比一下两个图,可以发现下图比较清晰.   我们先画一个线宽为1像素的线,代码和显示效果如下: const ctx = document.getElementById(canvas).getContext("2d"); ctx.strokeStyle = "re