Cocos游戏引擎源码解读-鸿蒙原生端启动流程（游戏画面如何显示在原生窗口）
引擎版本：Cocos Creator 3.8.8 目标平台：HarmonyOS Next（纯血鸿蒙） Cocos游戏在鸿蒙原生端的启动流程包含三个核心阶段： 创建原生窗口并建立OpenGL ES图形上下文 初始化JS引擎并绑定必要的Native接口 加载并执行游戏入口代码 本文将结合Cocos引擎源… 阅读更多 »Cocos游戏引擎源码解读-鸿蒙原生端启动流程（游戏画面如何显示在原生窗口）
引擎与渲染
引擎与渲染
OpenGL ES、WebGL和平台的对应关系
OpenGL ES 版本 WebGL 版本 OpenGL版本 iOS版本 Android版本 发布时间 特性 1.0 Android 1.0+ 固定管线 2.0 1.0 2.0 iPhone3GS Android 2.2(API 8)+ 可编程管线 3.0 2.0 3.3 A7/iOS7/iPhon… 阅读更多 »OpenGL ES、WebGL和平台的对应关系
如何用Cocos Shader实现基础光照
开发环境：Cocos Creator 3.7.3 本文代码：https://github.com/foupwang/ShadersForCocosCreator 一 什么是光照 现实世界中，人能够看到物体，是因为光线照射在物体上，反射回我们的眼睛。例如：一个物体是绿色的，实际是因为这个物体会反射更多… 阅读更多 »如何用Cocos Shader实现基础光照
Cocos和Unity的Shader语法对比
Unity Cocos Cocos含义 UNITY_MATRIX_MVP cc_matViewProj 视图投影矩阵 UNITY_LIGHTMODEL_AMBIENT cc_ambientSky 天空颜色 _World2Object cc_matWorld 模型空间转世界空间矩阵 _WorldSpa… 阅读更多 »Cocos和Unity的Shader语法对比
轻量级绘图库NanoVG使用简介
开源项目地址：https://github.com/memononen/nanovg 一 NanoVG NanoVG是一个跨平台、基于OpenGL的矢量图形渲染库。它非常轻量级，用C语言实现，代码不到5000行，非常精简地实现了一套HTML5 Canvas API，做为一个实用而有趣的工具集，用来构… 阅读更多 »轻量级绘图库NanoVG使用简介
分享：《如何让CocosCreator3.x引擎启动提速60%》源码
一 介绍 上篇文章《如何让CocosCreator3.x引擎启动提速60%》发布后，经常有朋友问源码在哪？所以这次把项目定制代码剔除掉了，剩下的都是通用代码开放出来，支持平台包括H5和微信小游戏。裁剪后引擎和demo源码的提取方法见文末。 为什么要做引擎裁剪呢？简单来说，是因为特定应用场景对包体和启… 阅读更多 »分享：《如何让CocosCreator3.x引擎启动提速60%》源码
笔记：WebGL着色器
使用WebGL的方便之处在于，无需搭建开发环境，只要有一个支持WebGL的浏览器就可以了。 着色器 用WebGL绘图必须使用着色器。分为两种： 顶点着色器 顶点是指二维或三维空间中的一个点，例如二维或三维图形的端点或交点。顶点着色器就是用来描述顶点特性（如：位置、颜色）的程序。 示例如下： void… 阅读更多 »笔记：WebGL着色器
如何让CocosCreator3.x引擎启动提速60%
背景 一个采用 Cocos Creator 3.4.2 引擎开发的3D游戏，除了主游戏外，还有一个精简版游戏。精简版运行在小游戏平台，功能非常简单，所以要求启动速度一定要快。 首先在Creator项目设置中仅留下 WebGL 1.0、基础3D功能、基础2D功能、用户界面、运行状态统计 这几个模块，其… 阅读更多 »如何让CocosCreator3.x引擎启动提速60%
Creator3.x引擎切场景时阴影内存泄漏的非官方补丁
一 现象 CocosCreator3.x引擎的场景中开启阴影后，例如阴影贴图使用的是2048*2048，则每一次切换场景都会引起36M(贴图16M+深度20M)的内存泄漏，而且是必现。 这个BUG在3.x引擎一直存在，从3.6开始才没有这个问题，但没有找到专门针对这个BUG的fix说明。因为项目用的… 阅读更多 »Creator3.x引擎切场景时阴影内存泄漏的非官方补丁
3D游戏引擎笔记
1 数学知识 1.1 坐标系 分为左手坐标系和右手坐标系两种，主要区别在于z轴的指向，z轴指向屏幕内的是左手坐标系，z轴指向屏幕外的右手坐标系。Unity和Direct3D使用的是左手坐标系，OpenGL使用的右手坐标系。 法线和切线 与椭圆有且仅有一个交点的直线，叫做椭圆的切线。二者公共点，叫做切… 阅读更多 »3D游戏引擎笔记
Cocos Shader实现纹理的动态波浪效果
一 效果预览 通过滑动条可调节波浪频率的快慢。 二 实现原理 对当前uv坐标进行线性+三角函数的混合变换，结合动态变化的时间值，得到一个新的采样坐标，使纹理呈现出动态、起伏不定的波浪形态。 Shader中的关键代码如下。 // 得到波浪效果的新坐标 vec2 new_uv = wave(v_uv0)… 阅读更多 »Cocos Shader实现纹理的动态波浪效果
Cocos Shader实现HSL和RGB颜色模型
HSL和RGB是两种常见的颜色模型，被广泛应用于计算机图形学、数字图像处理、Web设计等领域。在进行颜色处理时，经常需要将HSL和RGB相互转换，本demo演示如何通过Cocos Creator 3.7游戏引擎，用HSL模型来调节图片颜色，并详细介绍HSL和RGB互相转换的方法。 一 效果预览 色调… 阅读更多 »Cocos Shader实现HSL和RGB颜色模型
JavaScript实现软件光栅化渲染器02-如何画直线
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 前文介绍了画点函数，本文说明如何绘制直… 阅读更多 »JavaScript实现软件光栅化渲染器02-如何画直线
Bresenham快速画直线算法(中文翻译+注释)
原文：https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html 基本Bresenham算法 考虑在光栅网格上绘制一条直线，这条直线的斜率是 $0\leq m \leq 1$。 斜率定义：假设直线起点是(x1, y1)，终点是(… 阅读更多 »Bresenham快速画直线算法(中文翻译+注释)
JavaScript实现软件光栅化渲染器01-如何画点
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 整个项目跟平台相关的，只需要一个类似D… 阅读更多 »JavaScript实现软件光栅化渲染器01-如何画点
JavaScript实现软件光栅化渲染器-前言
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 软件光栅化渲染器，是指用CPU（软件）… 阅读更多 »JavaScript实现软件光栅化渲染器-前言
WebGL编程01
WebGL是什么 WebGL是一项结合了HTML5和JavaScript，用来在网页上绘制和渲染复杂三维图形(3D图形)的技术。WebGL基于OpenGL ES 2.0，也使用GLSL ES编写着色器。 Canvas是什么 HTML5引入标签，定义了网页上的绘图区域，允许JavaScript动态地绘… 阅读更多 »WebGL编程01
Shader入门教程实例-TheBookOfShaders For CocosCreator
简介 《The Book of Shaders》是一本关于片段着色器（Fragment Shader）的入门指南，由Patricio Gonzalez Vivo编写，从零开始讲述了如何通过Shader来完成图形图像的绘制。 本项目使用Cocos Creator 2.1.2实现了书中的大部分Shade… 阅读更多 »Shader入门教程实例-TheBookOfShaders For CocosCreator