在vscode中用js写webgl显示代码提示

最新推荐文章于 2024-04-05 18:27:17 发布

观亮

最新推荐文章于 2024-04-05 18:27:17 发布

阅读量2.8k

点赞数 11

文章标签： vscode html

本文链接：https://blog.csdn.net/oNanShengZhenZi/article/details/120565580

版权

最近在学习webgl，发现在vscode中写webgl缺乏提示信息，后来查阅资料，是因为用 document.getElementById获取的对象vscode不知道是什么类型，提示位any类型

在document.getElementById的上一行加入： /** @type {HTMLCanvasElement} */

这样再看canvas的类型就显示出来了

这样就会有代码提示啦

另外，如果在一个函数的参数中，想给这个参数在vscode中加入代码提示，方法如下：

/*** @param {!WebGLRenderingContext} gl */

function initVertexBuffers(gl){}

这样再使用函数中的gl时候vscode下也会有正确的代码提示了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

观亮

关注关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

canvas vacode 插件_[译]VSCode and WebGL 开发

weixin_39774808的博客

12-21

994

原文链接作者: Armno P.TH理由: 简单实用的小伎俩ForewordVscode 是一个优秀的前端开发编辑器，但仍然会有一些问题的存在，我觉得我应该做一些笔记。我见过大部分教程都是以这样开头: 首先创建index.html and main.js文件在index.html放入复制代码在main.js，获取 canvas 元素来作为渲染 WebGL内容的上下文const canvas = d...

在vscode中搭建webgl shader开发环境

HzjCsdn的博客

03-03

1814

环境插件1： Shader languages support for VS Code 插件2： glsl-canvas 语法错误提示插件1： glsl linter 下载：glslang 解压后放在任意文件夹下：在vscode中配置：vscode > preferences > settings > Extensions 效果如下：特别注意：着色器代码必须以**.frag或.vert**文件后缀名，否则语法检查哪里会报错，如： GLSL Linter: G

参与评论您还未登录，请先登录后发表或查看评论

关于vscode开发WebGL没有提示的解决办法1

08-08

关于vscode开发WebGL没有提示的解决办法1

vscode-glsl-canvas:GLSL着色器的实时WebGL预览

05-01

:gem_stone: vscode-glsl-canvas 通过提供Show glslCanvas命令，该扩展程序可在VSCode中打开GLSL着色器的实时WebGL预览。它使用的改进和改进版本，版本来自 javascript库和由制造的。现在支持WebGL2。只需在文件的开头添加#version 300 es 。现在支持带有相对路径的嵌套包含。在macOS上运行⇧P，在Windows上运行ctrl⇧P。然后键入Show glslCanvas命令以显示片段着色器的全屏预览。特征两者都支持WebGL和WebGL2。通过添加#version 300 es作为文件的第一行来自动创建WebGL2上下文。集成支持行高亮的错误处理。绘图模式： flat ， box ， sphere ， torus和mesh用默认的网格。 .obj格式的网格加载器和解析器。带有VERTEX宏的

WebGL-GLSL-Editor:适用于Visual Studio Code的WebGL GLSL着色器编辑器扩展

04-30

WebGL GLSL编辑器此扩展增加了对GLSL ES 100（WebGL 1和OpenGL ES 1.00）和GLSL ES 300（WebGL 2和OpenGL ES 3.00）的语言支持。它也支持所有与WebGL兼容的GLSL扩展。它支持大多数著名的VS Code语言功能，例如语法突出显示，IntelliSense等，请参见下面的详细信息。特征语法高亮该扩展为类型，内置类型，变量，内置变量，函数，关键字，限定符，运算符，预处理器指令和注释着色。诊断该扩展使用Khronos Group的参考GLSL编译器提供诊断信息（错误和警告）。它还将未使用的函数，类型和变量显示为灰色。离线文件该扩展使用提供内置变量和内置函数的脱机文档。签名帮助该扩展可以显示函数和构造函数（矩阵构造函数除外）的签名帮助器。代码完成该扩展根据当前作用域和着色器阶段，使用Intell

vscode-glsl:用于Visual Studio代码的GLSL（OpenGL阴影语言）语法

03-14

VS代码的GLSL语法 vscode-glsl vscode-glsl是Visual Studio Code的轻量级GLSL（OpenGL阴影语言）语法突出显示扩展。此扩展旨在为GLSL提供更好的语法，并使用（Sublime Text3的GLSL语法包）中的许多表达式，提供了我见过的几乎最好的GLSL语法。此扩展程序仍处于早期开发中，在某些情况下可能会变得很麻烦。随时！特征 GLSL语法突出显示。一些语法用于制成的Minecraft shaderpacks （例如/* DRAWBUFFERS:0 */输出）。句法下图提供了以Monokai颜色主题突出显示的示例语法。变更日志（在dev中）为Vulkan添加了内置类型(i|u)?texture[1-3]D(Array)?... 在OpenGL Shading Language 4.6文档中添加了一些修改器 <

vscode 开发webgl没有代码提示

09-06

要在 VSCode 中开发 WebGL，可以通过安装相应的插件来获得代码提示。一些常用的插件包括 "GLSL"，"Shader languages support for VSCode"和 "WebGL Shader Editor"等。这些插件可以帮助我们编写 WebGL 相关的着色器...

unity导出webgl 并用vscode浏览

最新发布

zhou_yh_的博客

04-05

528

step 7：安装后，回到资源管理器，右键html文件>选择open with live sever。step3：单击左下角玩家设置，将下面内容更改为gama，和normal equality。step4: 回到上一个窗口，单击（生成）building>选择路径>等待>输出如下。step1:在unity hub里选择版本> 右键 > 添加模块 >并选择安装。step2：安装完毕，打开项目，点击文件>生成设置>选择WebGL。step5: 直接单击html文件，显示报错，虚借助vscode打开。

vscode插件

騡儿的博客

12-24

321

感谢知乎网友 ctuu的回答今天想在vscode上写cpp并运行，网上一搜全是配置文件的，麻烦死了，后来遇到一个简单好用的，安装插件就ok：首先点【扩展】选项，输入c++ 就是这样，安装时候reload就行，再类似刚才，搜code runner 同样点install 之后reload。写一个cpp，点击文件左上角运行就ok ...

WebGL学习之旅-1.环境VSCode+Cesium

Howie‘sCyberspace

12-07

2670

环境Cesium+VSCode+nodeJSCesiumJS 自动提示创建一个最简单的Cesium项目创建项目（文件夹）将源码中的Build文件夹考入创建html，js文件创建服务器 CesiumJS 自动提示 cd project npm install --save @types/cesium @types/cesium 里面有各种js库的提示信息，包括threejs和这里的cesium，根...

webgl公用函数库

04-16

webgl编程指南中的4个公用函数库，希望能够帮助跟我一样到刚接触webgl的筒子们

iClient3D for Cesium&WebGL入门之使用vscode以服务方式运行调试

SuperMap技术控

07-20

3046

通常情况下，我们在查阅网上资料后，会得到的答案是“将程序部署在一个服务器，如tomcat中”、“借助iServer内置的tomcat，放到webapps文件夹中，启动iServer”…3.在弹出的界面中选择”工作区“-”扩展“-”live Server Config“，设置custom broswer为Chrome。会直接收到如下大大报错，因为这两种方式都属于是“本地打开方式”，这两种方式对于三维客户端都会导致无法进行测试的报错。2.安装完成后点击”设置“图标中的”设置“

unity打包WebGL问题记录（逐渐完善）

沈夕林的博客

08-05

2156

这两天在打包webgl，正好趁着这个机会记录一下遇到的问题，我现在用的unity版本是2018.02.17，开发工具用的vscode。一、PlayerSettings设置中把Strip Engine Code选项去掉，如果你感觉对代码感觉非常精准的话，可以勾选上，否则会出现很多莫名其妙的问题二、File.Exists (path)不能用打包了一天的webgl测试出这段代码不能用，查了一下百度，有大神是这样说的：“win10系统。查看接口说明才知道，如果你不是按管理员方式启动VS，而此文件需要管理员权

Web开发中19种推荐VSCode插件

极道Jdon的技术博客

01-27

803

使用 ES7+ 语法的 JS/TS 版 React、React-Native 和 Redux 扩展。为 Visual Studio Code 的 env 文件 (.env) 添加格式和语法高亮支持。适用于 Git 的常用 Visual Studio Code 扩展。可自动完成文件名的 Visual Studio Code 插件。只需一个简单的命令，即可快速完成 "括弧对色彩 DLW "设置。查看仓库的 Git 图形，并从图形中执行 Git 操作。VSCode 中现代和实验 CSS 的语法高亮显示。

01-webgl入门

qq_22188085的博客

05-29

375

前言课前准备安装webstorm 或vscode 开发工具。安装live-server，用于启服务，安装方法 npm i -g live-server 需掌握es6、html、css 的基础知识。数学基础，三角函数和向量（非必须）。课堂目标对webgl 的概念有一个整体认知掌握webgl 基本绘图原理和流程知识点 webgl 概述 webgl 最短教程 - 在画布上刷底色 webgl 最简单图形 - 画一个点第一章 webgl概述 1-webgl是什么？ webgl 是在网页上

WebGL-001

Francis8003的博客

04-14

191

把所有学到的东西串行起来！ 1.在github上部署一个项目https://github.com/Francis8003/LearnWebGLsbs.git==>>一步步学习WebGL 2.编辑器使用vsCode，插件使用Open In Default Browser.可以直接右键html文件进行页面的效果浏览。 3.使用webgl原始的动态库。在文末会添加文件以供下载，也为...

搭建一个typescript下的webgl写代码环境。

weixin_30885111的博客

03-01

467

一、准备工作安装软件： 1、安装代码编辑器 vscode 官网地址：https://code.visualstudio.com/ 软件下载地址：https://code.visualstudio.com/Download 2、安装nodejs 官网地址：https://nodejs.org 软件下载地址：https://code.visualstudio.com/Downloa...

搭建基于webgl的显示方案（一）——环境搭建

小石子的博客

07-28

1107

搭建html和js运行环境

WebGL 入门

liubangbo的专栏

07-06

3750

webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。