首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js使用webgl

js使用webgl

作者头像
sofu456
发布于 2020-10-26 07:19:19
发布于 2020-10-26 07:19:19
2K00
代码可运行
举报
文章被收录于专栏:sofu456sofu456
运行总次数:0
代码可运行

初始化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
painter.prototype.initWebGL = function() {
	// attempt to get a webgl context
	try {
		var gl = this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
	} catch (e) {
		return false;
	}
	
	if (!gl) {
		return false;
	}

	// init buffers
	this.buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), gl.STATIC_DRAW);

	// The main YCbCrToRGBA Shader
	this.program = gl.createProgram();
	gl.attachShader(this.program, this.compileShader(gl.VERTEX_SHADER, SHADER_VERTEX_IDENTITY));
	gl.attachShader(this.program, this.compileShader(gl.FRAGMENT_SHADER, SHADER_FRAGMENT_YCBCRTORGBA));
	gl.linkProgram(this.program);
	
	if( !gl.getProgramParameter(this.program, gl.LINK_STATUS) ) {
		throw new Error(gl.getProgramInfoLog(this.program));
	}
	
	gl.useProgram(this.program);
	
	// setup textures
	this.YTexture = this.createTexture(0, 'YTexture');
	this.CBTexture = this.createTexture(1, 'CBTexture');
	this.CRTexture = this.createTexture(2, 'CRTexture');
	
	var vertexAttr = gl.getAttribLocation(this.program, 'vertex');
	gl.enableVertexAttribArray(vertexAttr);
	gl.vertexAttribPointer(vertexAttr, 2, gl.FLOAT, false, 0, 0);


	// Shader for the loading screen
	this.loadingProgram = gl.createProgram();
	gl.attachShader(this.loadingProgram, this.compileShader(gl.VERTEX_SHADER, SHADER_VERTEX_IDENTITY));
	gl.attachShader(this.loadingProgram, this.compileShader(gl.FRAGMENT_SHADER, SHADER_FRAGMENT_LOADING));
	gl.linkProgram(this.loadingProgram);

	gl.useProgram(this.loadingProgram);

	vertexAttr = gl.getAttribLocation(this.loadingProgram, 'vertex');
	gl.enableVertexAttribArray(vertexAttr);
	gl.vertexAttribPointer(vertexAttr, 2, gl.FLOAT, false, 0, 0);
	
	return true;
};

webkit

html渲染使用webkit,v8是chrome的js脚本引擎,webgl包含在webkit中

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WebGL基础笔记
片元着色器(Fragment Shader):顶点之间的轮廓中的所有像素都会经过片元着色器处理。(并行处理)
赤蓝紫
2023/01/02
1.2K0
WebGL基础笔记
高冷的 WebGL
在上一篇文章中,我给大家分享了,如何能快速入门Threejs。Threejs是一个用于在浏览器中绘制3D图形的JS库,其底层实际是对浏览器提供的WebGL Api进行了封装。作为一个好奇宝宝,看到了T
周明礼
2017/05/17
5.5K0
高冷的 WebGL
【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期
本文是专题类文章,主要是针对数字孪生和WEB 3D可视化展开,下面是数字孪生相关概念。
愚公搬代码
2023/08/27
8420
WebGL2 Shader实现的动态图形效果
css 动画效果是最适合小白学习的案例, 希望本文可以给各位带来帮助哦!! 关注若城, 带你遨游代码的海洋!!
全栈若城
2024/02/29
3400
WebGL2 Shader实现的动态图形效果
WebGL三角形平移变换
本程序实现一个三角形的平移变换任务,最终效果如下图。 整个程序包含两个文件,分别是: 1. TranslatedTriangle.html <!DOCTYPE HTML PUBLIC "-//W3C/
步行者08
2018/10/09
6450
一起学 WebGL:纹理对象学习
纹理对象,是将像素(texels)以数组方式传给 GPU 的对象,常见场景是贴图,就是将图片的数据应用到 3D 物体上。
前端西瓜哥
2023/08/18
3530
一起学 WebGL:纹理对象学习
【WebGL】初探WebGL,我了解到这些
WebGL基于OpenGL ES(嵌入式系统) 一种广泛用于在各种平台上渲染2D和3D图形的标准。它允许开发人员使用JavaScript与用户设备的GPU(图形处理单元)交互,实现硬件加速渲染。
且陶陶
2023/10/16
5550
【WebGL】初探WebGL,我了解到这些
WebGL三角形旋转变换
本程序实现一个三角形的旋转变换任务,最终效果如下图。 整个程序包含两个文件,分别是: 1. RotatedTriangle.html <!DOCTYPE HTML PUBLIC "-//W3C//DT
步行者08
2018/10/09
1.2K0
CG实验6 交互与动画
(1) 示范代码1为交互实例:在鼠标点击的位置上绘制出点;示范代码2为动画实例:三角形按照恒定的速度(45度/秒)旋转。结合示范代码,学习理解交互与动画的基本思想与实现; (2) 结合示范代码1,将示范代码2改为根据鼠标来控制三角形的旋转;
步行者08
2018/10/09
6400
【愚公系列】2022年09月 微信小程序-WebGL动画的使用
在现实中webgl的用途很多,比如医院运维网站,地铁运维网站,海绵城市,可以以三维网页形式展示出现实状态。
愚公搬代码
2022/09/28
1.2K0
【愚公系列】2022年09月 微信小程序-WebGL动画的使用
【愚公系列】2022年09月 微信小程序-WebGL画渐变色正方形
在现实中webgl的用途很多,比如医院运维网站,地铁运维网站,海绵城市,可以以三维网页形式展示出现实状态。
愚公搬代码
2022/09/30
6320
【愚公系列】2022年09月 微信小程序-WebGL画渐变色正方形
【愚公系列】2022年03月 微信小程序-系统相机
小程序调用相机可以用camera组件,也可以用wx.createCameraContext(this)接口。
愚公搬代码
2022/12/01
6580
【愚公系列】2022年03月 微信小程序-系统相机
HT for Web基于HTML5的图像操作(三)
HT for Web
2018/01/03
8990
HT for Web基于HTML5的图像操作(三)
Three.js教程(1):初识three.js
今天开始我们进入一个新的世界,那就是3D世界。由于我自己也是刚接触到这块内容,所以如果文章中有问题,请尽快在文章最后的留言板中请指出。本教程有配套代码仓库,请点击https://github.com/KaiOrange/three.js-demo。
kai666666
2020/10/19
24K0
Three.js教程(1):初识three.js
canvas霓虹爱心
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas霓虹爱心</title> <style> body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } </style> </head> <body> <canva
我不是费圆
2021/12/30
6780
canvas霓虹爱心
【愚公系列】2022年09月 微信小程序-WebGL立体图形的绘制
在现实中webgl的用途很多,比如医院运维网站,地铁运维网站,海绵城市,可以以三维网页形式展示出现实状态。
愚公搬代码
2022/09/28
8190
【愚公系列】2022年09月 微信小程序-WebGL立体图形的绘制
CG实验4 三维几何变换
1.实验目的 学习了解三维图形几何变换原理。 理解掌握WebGL三维图形几何变换的方法。 2. 实验内容 阅读教材有关三维图形变换原理,运行示范实验代码,掌握WebGL程序三维图形变换的方法; 请分别
步行者08
2018/10/09
7340
最简WebGL教程,仅需 75 行代码
现代 OpenGL(以及名为WebGL的扩展)与我过去学习的传统 OpenGL 有很大不同。我了解栅格化的工作原理,所以对这些概念很满意。但是我所阅读的每篇教程都介绍了抽象和辅助函数,这使我很难理解哪些部分是 OpenGL API 的真正核心。
疯狂的技术宅
2020/07/16
2.1K0
最简WebGL教程,仅需 75 行代码
从关键概念开始,万字带你轻松入门 WebGL
只要理解了 WebGL 背后的概念,学习 WebGL 并没有那么难。很多 WebGL 入门文章并没有介绍这些重要的概念,直接使用 WebGL 复杂的 API 开始渲染图形,很轻松就把入坑文变成了劝退文。这篇文章将会着重讲解这些概念,并一步步探究 WebGL 是如何渲染图片到屏幕的,理解这些重要的概念,将会大大降低学习曲线。
羽月
2022/10/08
2.3K0
从关键概念开始,万字带你轻松入门 WebGL
【愚公系列】2022年09月 微信小程序-WebGL画正方形
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。–百度百科
愚公搬代码
2022/10/05
9840
【愚公系列】2022年09月 微信小程序-WebGL画正方形
相关推荐
WebGL基础笔记
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验