【WebGL 第15页

WebGL - 示例绘制圆形点

之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过**内置变量gl_FragCoord**来访问片元的坐标，还可以通过另一个**内置变量gl

「已注销」·2023-09-26 02:04

WebGL 雾化

目录前言如何实现雾化线性雾化公式雾化因子关系图根据雾化因子计算片元颜色公式示例程序（Fog.js）代码详解编辑详解如何计算雾化因子（clamp()）详解如何计算最终片元颜色（根据雾化因子计算片元颜色公式mix()）示例效果示例程序（使用w分量代替顶点与视点的距离Fog_w.js）前言在三维图形学中，术语雾化（fog）用来描述远处的物体看上去较为模糊的现象。在现实中，任何介质中的物体都可能表现出雾化

山楂树の·2023-09-26 02:33

WebGL 绘制圆形的点

目录前言如何实现圆形的点？片元着色器内置变量（gl_FragCoord、gl_PointCoord）gl_PointCoord的含义示例程序（RoundedPoint.js）代码详解前言本文将讨论示例程序RoundedPoint，该程序绘制了圆形的点，如下图所示。如何实现圆形的点？为了绘制一个圆点，我们需要将原先的方点“削”成圆形的。之前说过，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被

山楂树の·2023-09-26 01:30

什么是3D模型，什么是GLTF，又如何使用GLTF文件

glb,gltf模型(webvrmodel)-gltf模型下载定制,glb模型下载定制,三维项目电商网站在线三维展示,网页VR模型下载,三维模型下载,webgl网页模型下载VR模型网（www.webvrmodel.com

qq_41347078·2023-09-25 11:13

Mars3D(含Cesium)数据及服务篇：单体小模型转为glTF格式

KhronosGroup是WebGL和COLLADA的背后财团。#1.三维模型源数据的设计要求#1.1建模设计要求无论是通过什么工具来设计建

木遥·2023-09-25 11:42

SuperMap webgl 中使用的gltf模型制作方法

当我们使用Cesium开发KML+GLTF模型表示动态的运动轨迹的时候总会用到gltf格式的模型，但是一般官方的模型库总是只有几个，不能够满足使用，这里整理了一套从数据下载到使用的全家桶套餐供各位看官享用。话不多说，上菜~目录一、下载模型二、下载安装模型转换需要的插件三、模型开始导出四、常见问题

THEDEAMON·2023-09-25 11:42

UnityWebGl与Vue通讯问题（及如何内嵌Webgl至Vue）

最近有一个需求，需要把网页的用户登录信息在unitywebgl项目启动时传进unity，试了很多方法都不成功，下面是最后的解决方案Unity定义一个jslib文件，名字随意，比如global.jslib

Angeladaddy·2023-09-24 22:34

phaser3入门教程-从零开始开发一个打砖块游戏

它使用了许多HTML5API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的逻辑，例如管理游戏循环并为我们提供了物理引擎。

__豆约翰__·2023-09-24 18:21

Unity 发布WebGL平台，C#与JavaScript交互

这是一种高级的技巧，主要用于一些特殊情况，比如在WebGL项目中使用JavaScript来实现与Web页面的互操作。

watl0·2023-09-24 15:11

前端教程-H5游戏开发

EgretEGRETIARC版本正式发布从端到云一站式区块链游戏开发工作流官网LayaAir在渲染模式上，LayaAir支持Canvas和WebGL两种方式；在工具流的支持程度上，主要是提供了LayaAirIDE

累牛满面·2023-09-24 06:01

WebGL笔记：WebGL中JS与GLSL ES 语言通信，着色器间的数据传输示例：用鼠标控制点位

用鼠标控制点位attributevec4a_Position;voidmain(){//点位gl_Position=a_Position;//尺寸gl_PointSize=50.0;}voidmain(){gl_FragColor=vec4(1,1,0,1);}import{initShaders}from"./utils.js";constcanvas=document.querySelecto

Wang's Blog·2023-09-24 01:25

WebGL笔记：WebGL的基本绘图原理

同步与异步绘图如果想要画出多个点，而不是每次点击只生成一个点，这时候就需要保存点击的痕迹但是如果代码中，有异步去绘制webgl的点，则会出现问题，如下关键代码//修改attribute变量gl.vertexAttrib2f

Wang's Blog·2023-09-24 01:54

vue项目中使用腾讯美颜SDK

步骤一、阅读腾讯特效SDK官方文档直接看SDK接入>Web端接入步骤二、安装依赖npminstalltencentcloud-webar创建美颜工具函数import{ArSdk,isWebGLSupported

·半傻半呆半疯癫·2023-09-23 23:48

WebGL绘制带箭头的线

最近公司项目要求根据指定的经纬度绘制一个带箭头的线指向某个点额外还提供了距离和角度因为常用的技术栈为mapbox和leaflet，对比了一下两种的方法，还是选择mapbox来绘制该效果，其实leaflet也是跟mapbox相似，改一下对应的方法就行。对于实现的第一反应是用图片，毕竟简单速度还很快,但是这个也是问题最多的一个情况，缩放级别比较小的情况下还是ok的，毕竟很多信息看不到，但是一旦放大，很

黄坏坏·2023-09-23 14:57

Unity fbx动画压缩自动化

应用场景：UnityWebGl项目，原先的动画压缩后也有20到30M，导致用户进入网页加载太慢。需求是在不对动画精确度造成影响的前提下，影响尽可能地压缩动画。

晦渊子·2023-09-23 10:00

WebGIS开发教程：三维数据格式

下面是Cesium中常用的几种三维数据格式：1.glTF：glTF（GLTransmissionFormat）是⼀种用于在WebGL、OpenGLES和OpenXR等图形API中传输和加载3D动态场景的开放标准

GIS学姐嘉欣·2023-09-23 02:46

0基础学three.js前言（1）

关于学习three，对于新手来说，没人带两眼懵逼，找个前辈问问吧，告诉你学three先去学html，学js，学vue，学webgl返回来再学three，就会轻松些，这满口废话，学完这些我还用问怎么学three

智商偏低·2023-09-23 02:34

unity发布webgl和html,Unity WebGL打包发布报错

UnityWebGL打包发布时在BuildingnativebinarywithIL2CPP...报错：FailedrunningD:DownloadAppsUnity2019.4.8f1EditorDatail2cpp

weixin_36444911·2023-09-23 02:20

记录unity WebGL出现Uncaught ReferenceError: myGameInstance is not defined的问题

最近将一个Unity2017.4.1版本的WebGL项目升级到Unity2021.1.0;因为新版本的加载速度得到了极大的优化，但是也遇到了一点问题，特此记录一下以便帮助后面同样遇到此问题的朋友。

Nirvana---·2023-09-23 02:20

Unity3D WebGL异常：RangeError:Maximum call stack size exceeded

默认发布WebGl之后，会有一个Index.html文件，内容大致如下：UnityWebGLPlayer|TestWebGlvargameInstance=UnityLoader.instantiate

skask007·2023-09-23 02:50

前端动画实现

动画是通过快速连续排列批次差异极小的连续图像来制造运动错觉和变化错觉的过程——维基百科关键词：快速连续排列彼此差异极小制造错觉动画的历史与发展：动画早在五千年前就存在了：常见的前端动画技术:Sprite动画、CSS动画、JS动画、SVG动画、WebGL

会思想的苇草i·2023-09-22 21:58

前端新玩具——webGL简介

webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。

zbz197201·2023-09-22 19:54

ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)

ThreeJS画一个立方体HelloWorld.第一个three.js文件_WebGL三维场景body{margin:0;overflow

xyphf_和派孔明·2023-09-22 19:54

初探WebGL-基于Three.js绘制顶点不同颜色的旋转立方体

一、简介WebGL是什么呢？

Elvira_D·2023-09-22 19:24

Three.js教程：WebGL渲染器设置(锯齿模糊)

ygtu2018·2023-09-22 19:24

Threejs-渲染器

渲染器WebGLRenderer构造器WebGLRenderer(parameters:Object)parameterscanvas-一个供渲染器绘制其输出的canvas它和下面的domElement

工頁光軍·2023-09-22 19:52

关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用

首先来看下THREE.WebGLRenderer可以设置的参数如下：varrenderer=newTHREE.WebGLRenderer({//创建渲染器对象//canvas:document.getElementById

前端-阿辉·2023-09-22 19:22

【前端知识】Three 学习日志（十二）—— WebGL渲染器设置(锯齿模糊)

Three学习日志（十二）——WebGL渲染器设置(锯齿模糊)一、设置抗锯齿constrenderer=newTHREE.WebGLRenderer({antialias:true,});二、效果对比设置前

前端Outman·2023-09-22 19:21

Three.js基础之图元

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

四月的你·2023-09-22 17:37

我不想做webgl3:three js初步学习2

参考链接：linkhttp://www.yanhuangxueyuan.com/Three.js/鼠标操作三维场景为了使用鼠标操作三维场景，可以借助three.js众多控件之一OrbitControls.js，可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls)。然后和引入three.js文件一样在html文件中引入控件O

陈傻鱼·2023-09-22 17:04

WebGL 选中物体

目录前言如何实现选中物体示例程序（PickObject.js）代码详解gl.readPixels（）函数规范示例效果前言有些三维应用程序需要允许用户能够交互地操纵三维物体，要这样做首先就得允许用户选中某个物体。对物体进行选中操作的用处很广泛。比如，让用户选中三维用户界面上的一个按钮，或者让用户选中三维场景中的多张照片中的某一张，这些动作都具有实际意义。选中三维物体比选中二维物体更加复杂，因为我们需

山楂树の·2023-09-22 15:54

WebGL 用鼠标控制物体旋转

目录鼠标控制物体旋转如何实现物体旋转示例程序（RotateObject.js）代码详解示例效果鼠标控制物体旋转有时候，WebGL程序需要让用户通过鼠标操作三维物体。

山楂树の·2023-09-22 12:41

WebGL基础：着色器基础知识

今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL的干货接下来让我们开启奇幻旅程，进入3D的世界。

七脉神剑·2023-09-22 11:40

【WebGL】一、画布创建和着色器基本操作及封装

一、画布创建和着色器基本操作及封装一、基本信息1、WebGL简介2、WebGL的优势二、基本操作1、画布创建2、clearColor—清空颜色3、clear—清空canvas三、着色器基本操作1、顶点着色器

zmsup·2023-09-22 11:10

webgl 着色器

webgl绘图需要两种着色器：顶点着色器（Vertexshader）：描述顶点的特征，如位置、颜色等。片元着色器（Fragmentshader）：进行逐片元处理，如光照。

weixin_38107457·2023-09-22 11:40

WebGL中如何初始化顶点着色器和片源着色器，和添加到程序中

1.WebGL中如何初始化顶点着色器和片源着色器，和添加到程序中这个流程主要分为着几步.创建对应的着色器(顶点着色器，片源着色器),createShader()设置着色器的数据源(设置着四器的GLSL程序代码

你大爷的,这都没注册了·2023-09-22 11:39

WebGL 创建和初始化着色器过程

1.编译GLSLES代码，创建和初始化着色器供WebGL使用。

weixin_34080903·2023-09-22 11:39

WebGL切换着色器绘制不同物体

WebGL切换着色器绘制不同物体1、为何切换着色器WebGL绘制不同的物体需要使用不同的着色器，每个着色器中可能有非常负责的逻辑以实现各种不同的效果。

wangcuiling_123·2023-09-22 11:09

04 WebGL绘图之着色器

WebGL不同于canvas2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。

暮志未晚Webgl·2023-09-22 11:08

05 WebGL初始化着色器

初始化着色器函数initShaders()被定义在了cuon.util.js中使用：initShaders(gl,vshader,fshader);参数：gl指定渲染的上下文vshader指定顶点着色器程序代码(字符串)fshader指定片元着色器程序代码（字符串）返回值：true初始化着色器成功false初始化着色器失败顶点着色器varVSHADER_SOURCE=""+"voidmain(){

暮志未晚Webgl·2023-09-22 11:08

玩转WebGL(三)着色器

上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去.1.拆分在src下创建shader文件夹,新建Dot.vs和Dot.fs文件Dot.vs:voidmain(){gl_Position=vec4(0.0,0.0,0.0,1.0);//Setthevertexcoordinatesofthepointgl_PointSize=50.0;//Setthepointsize}Do

李尔在此·2023-09-22 11:38

WebGL - 着色器初始化流程

之前对着色器的初始化都是使用的initShaders()这个方法，部分代码在文章最后，其内部分执行细节没有去清晰的了解过，下面做进一步的了解和分析，才能更深入的了解webgl的原理initShaders

「已注销」·2023-09-22 11:36

WebGL初始化着色器（笔记4）

初始化着色器函数initShaders()被定义在了cuon.util.js中使用：initShaders(gl,vshader,fshader);参数：gl指定渲染的上下文vshader指定顶点着色器程序代码(字符串)fshader指定片元着色器程序代码（字符串）返回值：true初始化着色器成功false初始化着色器失败顶点着色器varVSHADER_SOURCE=""+"voidmain(){

朱桂彪·2023-09-22 11:36

webgl——使用着色器给图形给点颜色看看（二）

文章目录前言绘制一个点初始化着色器存储限定符向webgl系统传递变量前言接前面文章，我们实现了一个最简单的webgl程序，但是只是程序运行起来只是漆黑一片，我们想要通过webgl绘制一些图形。

jiegiser#·2023-09-22 11:05

webgl 系列 —— 着色器语言

Tip:webgl1.0绝大多数浏览器都支持，webgl

2301_76725413·2023-09-22 11:04

webgl基础：着色器基础

前言：(十分重要)上节文章中，跟大家分享了一下如何入门webgl并在画布上绘制一个点。诚然，我们看到的流程是十分繁琐的。这里想说明的一点是，webgl基础很类似于JavaScript基础。

YancyCathy·2023-09-22 11:04

WebGL 初始化着色器

目录前言初始化着色器的7个步骤创建着色器对象（gl.createShader（））gl.createShader（）规范gl.deleteShader（）规范指定着色器对象的代码（gl.shaderSource（））gl.shaderSource（）规范编译着色器（gl.compileShader（））gl.compileShader（）规范编辑gl.getShaderParameter（）规范g

山楂树の·2023-09-22 11:02

WebGL 计算点光源下的漫反射光颜色

目录点光源光逐顶点光照（插值）示例程序（PointLightedCube.js）代码详解示例效果逐顶点处理点光源光照效果时出现的不自然现象更逼真：逐片元光照示例程序（PointLightedCube_perFragment.js）代码详解点光源光与平行光相比，点光源光发出的光，在三维空间的不同位置上其方向也不同，如下图所示。所以，在对点光源光下的物体进行着色时，需要在每个入射点计算点光源光在该处的

山楂树の·2023-09-22 02:48

Unity WebGL C#与JS的相互通信

一、C#代码与JS代码交互传参首先在Plugins/WebGL下创建一个WebGL.jslib，代码如下:官网教程:传送门mergeInto(LibraryManager.library,{FileBtn

人无两度s·2023-09-22 02:41

Unity WebGL用到的WebSocket

WebGL与服务器交互总结(资源及代码)想到啥写啥首先用到的资源BestHttp:传送门我这里只做了客户端，服务端是同事做的。同样是用的WebSocket，具体是什么框架就不得而知。