Canvas与WebGL
Canvas操作与WebGL
太古时代
这个作者很懒,什么都没留下…
展开
-
FabricJS基本操作
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> <script src="js/fabric.js"></script&.原创 2020-08-02 10:41:46 · 1187 阅读 · 0 评论 -
WebGL贴图 -- 支持非2的n次幂数值的图
WebGL贴图手里有一张图:2000x2048在WebGL无法显示。原因是WebGL只支持2的n次幂数值的图比如,高度和宽度符合一下规则2^0=12^1=22^2=42^3=82^4=162^5=322^6=642^7=1282^8=256gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D,texture);gl.t.原创 2020-07-28 17:48:54 · 1691 阅读 · 0 评论 -
ThreeJs: webgl_geometry_shapes.html
<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - geometry - shapes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device...原创 2019-11-04 22:46:22 · 362 阅读 · 0 评论 -
WebGL Api使用初探: 立方体
之前一直用ThreeJs来学习Web3D。但是随着深入学习,对原生的WebGL Api发生了兴趣。WebGL Api使用初探: 立方体网上有几个立方体的例子,不过都不完全,要么代码有问题,要么找不到外部js文件。我就东拼西凑,整理出来一个完整的例子。能找到原文的,留下了参考地址,不知道从哪参考来的,就不管了。只引用了一个外部js文件cuon-matrix.js。本来想把cuon...原创 2019-10-09 22:40:22 · 309 阅读 · 1 评论 -
Threejs与OGRE,Material的一些属性Math, Vector3, Matrix3, Matrix4, Quaternion
在学习ThreeJs过程中碰到了一些单词,比如Math,Vector3,Matrix3 ,Matrix4, Quaternion参考:https://blog.csdn.net/jinold/article/details/97831606在scene.add(cube);处设个断点观察cube看到还有不知道的几个属性: layers:Layers ...转载 2019-09-10 22:11:30 · 757 阅读 · 0 评论 -
ThreeJs:裁剪( Path编)挖洞和贴图
本内容是裁剪( Path编)的延申裁剪( Path编):https://blog.csdn.net/jinold/article/details/91345585<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - geometry - shapes<...原创 2019-09-03 23:37:01 · 5184 阅读 · 0 评论 -
ThreeJs:裁剪( BSP编)挖洞和贴图
ThreeBSP的下载https://github.com/sshirokov/ThreeBSP<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body ...原创 2019-09-01 09:01:07 · 2550 阅读 · 0 评论 -
ThreeJs的学习:贴图(三)BufferGeometry
之前学习了Face贴图,自定义着色器贴图等。在这儿学习BufferGeometry的贴图。而且是平铺var loader = new THREE.TextureLoader();var texture = loader.load( "module/6.png" );texture.wrapS = texture.wrapT = THREE.RepeatWrapping;textur...原创 2019-08-11 23:30:24 · 6953 阅读 · 0 评论 -
Threejs学习:裁剪( clip编 )
参考:webgl_clipping_intersection.html// 裁剪点var clipPlanes = [ new THREE.Plane( new THREE.Vector3( 1, 0.5, 0 ), 0 ), new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ), new THREE.Plane( new THR...原创 2019-05-23 14:02:29 · 4421 阅读 · 0 评论 -
ThreeJs的学习
几何体GeometryBufferGeometryBoxGeometryShapeBufferGeometry(平面)-->和THREE.Shape一起使用,参考webgl_geometry_shapes.html的地面ExtrudeBufferGeometry(几何体) --> 和THREE.Shape一起使用,参考例子webgl_geometry_shapes....原创 2019-06-08 15:26:29 · 523 阅读 · 0 评论 -
Threejs学习:裁剪( Path编)
参考:webgl_geometry_shapes.html// Smileyvar smileyShape = new THREE.Shape();smileyShape.moveTo( 80, 40 );smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );// 主模型var smileyEye1Path = new T...原创 2019-06-08 16:23:41 · 2218 阅读 · 0 评论 -
ThreeJs的学习: 创建正方形平面
创建正方形平面:Shapevar squareShape = new THREE.Shape();squareShape.moveTo( 0, 0 );squareShape.lineTo( 0, sqLength );squareShape.lineTo( sqLength, sqLength );squareShape.lineTo( sqLength, 0 );square...原创 2019-06-30 16:44:31 · 4472 阅读 · 0 评论 -
ThreeJs的学习:BufferGeometry理解(1) 生成正方形立方体
var bgeometry = new THREE.BufferGeometry();/*// BufferGeometry形成一个最简单的平面// 一个平面由两个三角形组成,每个三角形由3个坐标,每个坐标由XYZ组成// 所以一个平面需要六个坐标var vertices = new Float32Array( [ // 三角形1 - 三个顶点 -10 ,10, 0, -10 ...原创 2019-07-08 23:51:35 · 3312 阅读 · 0 评论 -
ThreeJs的学习:阴影的产生
要产生阴影,需要在三个地方设置属性,光源、物体、地板 光源和物体设置castShadow = true; 地板设置receiveShadow = true;例子: 1. 光源: var pointLight = new THREE.PointLight( 0xffffff, 0.8 ); pointLight.position.set(50,...原创 2019-06-29 23:04:39 · 1294 阅读 · 0 评论 -
ThreeJs的学习:BufferGeometry理解(2),Index与postion的关系,以及groups的理解
webgl_buffergeometry_indexed.html例子1var segments_Shuliang = 2;var geometry = new THREE.BufferGeometry();geometry.setIndex( [1, 0, 4, 0, 3, 4, 2, 1, 5, 1, 4, 5, 4, 3, 7, 3, 6, 7, 5, 4, 8, 4, 7, ...原创 2019-07-11 23:58:42 · 5299 阅读 · 1 评论 -
ThreeJs的学习:BufferGeometry的理解(3),Geometry和BufferGeometry的关系
在Three.js的这个方法中可以观察各个Geometry的转换目前为止的观察,发现所有的Geometry都会到projectObject进行转换,最后转换成BufferGeometry。function projectObject( object, camera, groupOrder, sortObjects )GeometryGeometry转换成BufferGeome...原创 2019-08-02 23:05:55 · 8140 阅读 · 0 评论 -
ThreeJs的学习:贴图(2)自定义着色器-GLSL接触
着色器语言GLSL ES和相关的WebGL API、OpenGL ES Shader相关API —— GLSL 语法<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - indexed instancing (single box), dynamic updates...原创 2019-07-25 20:06:58 · 1846 阅读 · 0 评论 -
ThreeJs的学习:贴图(1)Face贴图
参考:https://blog.csdn.net/jinold/article/details/97873523比之前的例子,多了贴图<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - indexed instancing (single box), dyn...原创 2019-09-01 15:23:24 · 2144 阅读 · 0 评论 -
ThreeJs的学习:Face的理解
先上代码:<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - indexed instancing (single box), dynamic updates</title> <meta charset="utf-8"> <meta...原创 2019-08-01 07:09:47 · 4200 阅读 · 1 评论 -
WebGL编程
webgl_interactive_cubes.html<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - map controls</title> <meta charset="utf-8"> <meta name="vie...原创 2019-04-26 17:17:03 · 279 阅读 · 0 评论